---
name: Badge
package: '@wordpress/ui'
category: '@wordpress-ui'
status: stable
canonical: 'https://system.automattic.design/components/badge/'
storybook: 'https://wordpress.github.io/gutenberg/?path=/docs/design-system-components-badge--docs'
github: 'https://github.com/WordPress/gutenberg/tree/trunk/packages/ui/src/badge'
---

# Badge

A badge component for displaying labels with semantic intent.

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

## Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `children` *(required)* | `string` | — | 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. |
| `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. |


## Examples

### Default

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

### High

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

### Medium

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

### Low

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

### Stable

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

### Informational

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

### Draft

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

### None

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

### All Intents

```tsx
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>
);
```