Feedback
Badge
A small chip for status, counts, or labels. Six tones, two sizes, optional status dot: keep them short, ideally one or two words.
Tones
Neutral Brand Internal Live Limited Critical
With status dot
Live Degraded Down
Sizes
Small Medium
API
| Prop | Type | Default | Description |
|---|---|---|---|
tone | 'neutral' | 'brand' | 'success' | 'warn' | 'danger' | 'violet' | 'neutral' | Color role. Its type is AccentTone. |
size | 'sm' | 'md' | 'sm' | Padding and font size. |
dot | boolean | false | Render a status dot before the label. |
class | string | no default | Extra classes on the wrapper. |
children required | Snippet | no default | Badge content. |