Badge Atom
A label. Server-safe, because it neither listens nor animates.
Usage
NeutralBrandLivePendingOverduesm
<Badge tone="success" dot>Live</Badge><Badge tone="danger" variant="solid">Overdue</Badge>Do
Add dot when the badge carries status — colour alone is invisible to a colour-blind reader and to a screen reader both.
Don't
Make a Badge clickable. Something you can press is a Button, and something you can remove needs a labelled control.
Props
| Prop | Type | Default | Notes |
|---|---|---|---|
| tone | Tone | 'neutral' | Semantic colour. |
| variant | 'soft' | 'solid' | 'outline' | 'soft' | Solid is loud; reserve it for one thing per view. |
| size | 'sm' | 'md' | 'md' | sm fits inside a table row or a tab. |
| dot | boolean | false | Leading status dot. |