Automattic Design System

Components

Badge

A badge component for displaying labels with semantic intent.

import { Badge } from '@wordpress/ui';

View on Storybook

View source on GitHub

PropsPermalink to this section

NameDefaultDescription
children Required

string

The text to display in the badge.

intent'none'

"high" | "medium" | "low" | "stable" | "informational" | "draft" | "none"

The semantic intent of the badge, communicating its meaning through color.

className

string

CSS class name to apply to the element.

style

CSSProperties

CSS style to apply to the element.

render

ComponentRenderFn<HTMLAttributesWithRef<any>> | ReactElement<Record<string, unknown>, string | JSXElementConstructor<any>> | undefined

Replaces the component’s default HTML element using a given React element, or a function that returns a React element.

ExamplesPermalink to this section

DefaultPermalink to this section

const Default = () => <Badge>Badge</Badge>;

HighPermalink to this section

const High = () => <Badge intent="high" />;

MediumPermalink to this section

const Medium = () => <Badge intent="medium" />;

LowPermalink to this section

const Low = () => <Badge intent="low" />;

StablePermalink to this section

const Stable = () => <Badge intent="stable" />;

InformationalPermalink to this section

const Informational = () => <Badge intent="informational" />;

DraftPermalink to this section

const Draft = () => <Badge intent="draft" />;

NonePermalink to this section

const None = () => <Badge intent="none" />;

All IntentsPermalink to this section

const AllIntents = ( args ) => (
    <div
        style={ {
            display: 'grid',
            gridTemplateColumns: 'max-content min-content',
            gap: '1rem',
            color: 'var(--wpds-color-foreground-content-neutral)',
        } }
    >
        { (
            [
                'high',
                'medium',
                'low',
                'stable',
                'informational',
                'draft',
                'none',
            ] as const
         ).map( ( intent ) => (
            <Fragment key={ intent }>
                <div
                    style={ {
                        paddingInlineEnd: '1rem',
                        display: 'flex',
                        alignItems: 'center',
                    } }
                >
                    { intent }
                </div>
                <div
                    style={ {
                        padding: '0.5rem 1rem',
                        display: 'flex',
                        alignItems: 'center',
                    } }
                >
                    <Badge { ...args } intent={ intent } />
                </div>
            </Fragment>
        ) ) }
    </div>
);