Data display
Badge
A short status label. Every tone is contrast checked in every theme.
Live example
NeutralAccentConfirmedOn holdCancelled
Usage
<Badge tone="success" dot>Cleared</Badge>Props
| Prop | Type | Default | Description |
|---|---|---|---|
tone? | 'neutral' | 'accent' | 'success' | 'warning' | 'danger' | 'neutral' | Maps to subtle background and text tokens. |
dot? | boolean | false | A decorative dot before the text. |
children | ReactNode | none | The status text. |
Do and don't
Do
- Use one or two words.
- Map tones to meaning consistently across the product.
Don't
- Use a badge as a button.
- Rely on color alone; the text must carry the meaning.
Accessibility
- Plain text in a span, read in place.
- Badge tone pairs are part of the automated contrast checks.
No keyboard interaction of its own; it contains whatever controls you put inside.