Components / Data Display
Badge
stableA small status label — status is always shown as a coloured badge, never as plain text.
Variants
ActivePendingFailedDraftArchived
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
variant | 'success' | 'warning' | 'error' | 'info' | 'neutral' | 'neutral' | No | Colour, matched to meaning. |
children | ReactNode | — | Yes | Label text. |
Do
- Use the semantic variant that matches the actual status (success for "Active", error for "Failed").
- Keep the label to one or two words.
Don't
- Invent a sixth colour for a status — map it onto success/warning/error/info/neutral.
- Use a badge for something that isn’t a status (that’s a Chip or plain text).