Badge
A small status or category label: 6 colors × 2 emphasis levels.
New
Variants
NeutralAccentSuccessWarningDangerInfo
Emphasis
SubtleSolid
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | 'neutral' | 'accent' | 'success' | 'warning' | 'danger' | 'neutral' | Color scheme. |
| emphasis | 'subtle' | 'solid' | 'subtle' | Fill strength. |
| leftIcon | ReactNode | Icon before the label. | |
| rightIcon | ReactNode | Icon after the label. | |
| children | ReactNode | Badge label. |
Why it works this way
Why
- Six colours by two emphasis levels cover status, category and count without a size axis: it is a label, not a control.
- Badges are borderless, matching Figma, so they sit on any surface without competing with it.
Don't
- Don't make it clickable. For an interactive filter use FilterChip.
- Don't use colour alone to carry meaning. Pair it with a word.