Automattic Design System

Badge

A badge component for displaying labels with semantic intent.

View on Storybook

View source on GitHub

Import

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

Props

Name	Type	Default	Required	Description
`className`	`string`			CSS class name to apply to the element.
`style`	`React.CSSProperties`			CSS style to apply to the element.
`render`	`\| ComponentRenderFn< HTMLAttributesWithRef > \| React.ReactElement< Record< string, unknown > >`			Replaces the component’s default HTML element using a given React element, or a function that returns a React element.
`children`	`string`		Yes	The text to display in the badge.
`intent`	`\| 'high' \| 'medium' \| 'low' \| 'stable' \| 'informational' \| 'draft' \| 'none'`	`'none'`		The semantic intent of the badge, communicating its meaning through color. @default “none”

Examples

All Intents

const AllIntents = () => (
    <>
        <Badge intent="high">high</Badge>
        <Badge intent="medium">medium</Badge>
        <Badge intent="low">low</Badge>
        <Badge intent="stable">stable</Badge>
        <Badge intent="informational">informational</Badge>
        <Badge intent="draft">draft</Badge>
        <Badge intent="none">none</Badge>
    </>
);

High

const High = () => (
    <>
        <Badge intent="high">Payment declined</Badge>
        <Badge intent="high">Security issue</Badge>
    </>
);

Medium

const Medium = () => (
    <>
        <Badge intent="medium">Approval required</Badge>
        <Badge intent="medium">Review needed</Badge>
    </>
);

Low

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

Informational

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

Draft

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

Stable

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

None

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

Comment Status

const CommentStatus = () => (
    <>
        <Badge intent="none">Approved</Badge>
        <Badge intent="medium">Approval required</Badge>
    </>
);

Page Status

const PageStatus = () => (
    <>
        <Badge intent="none">Published</Badge>
        <Badge intent="low">Pending</Badge>
        <Badge intent="draft">Draft</Badge>
        <Badge intent="informational">Scheduled</Badge>
        <Badge intent="informational">Private</Badge>
    </>
);

Plugin Status

const PluginStatus = () => (
    <>
        <Badge intent="stable">Active</Badge>
        <Badge intent="none">Inactive</Badge>
    </>
);

Default

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

High

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

Medium

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

Low

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

Stable

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

Informational

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

Draft

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

None

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

All Intents

const AllIntents = ( args ) => (
    <div
        style={ {
            display: 'grid',
            gridTemplateColumns: 'max-content min-content',
            gap: '1rem',
            color: 'var(--wpds-color-fg-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>
);