Badge
A compact pill label for status and metadata. Five tones, sized to sit inline next to text or inside a button.
Examples
Tones
neutral accent success warning danger
Show code
<Badge tone="neutral">neutral</Badge>
<Badge tone="accent">accent</Badge>
<Badge tone="success">success</Badge>
<Badge tone="warning">warning</Badge>
<Badge tone="danger">danger</Badge>With status dots
neutral accent success warning danger
Show code
<Badge tone="neutral" dot>neutral</Badge>
<Badge tone="accent" dot>accent</Badge>
<Badge tone="success" dot>success</Badge>
<Badge tone="warning" dot>warning</Badge>
<Badge tone="danger" dot>danger</Badge>Props
| Prop | Type | Default | Description |
|---|---|---|---|
tone | "neutral" | "accent" | "success" | "warning" | "danger" | "neutral" | Color of the pill. success, warning and danger are for status. |
dot | boolean | false | Shows a status dot in the current text color before the label. |
Any other attribute is spread onto the <span>, so a badge
can carry title or an aria-label when the text
alone is not descriptive enough.