Badge
stableserver-safe
Status, read not clicked. A tint plus theme ink rather than a saturated fill — quiet enough to annotate without shouting.
Tones
The tints are deliberately subtle, so each is contrast-checked composited over its surface rather than against the ideal colour.
DraftNewNeeds reviewBlockedIn progressCleared
<Badge>Draft</Badge>
<Badge tone="warning">Needs review</Badge>
<Badge tone="signal">Blocked</Badge>
<Badge tone="success">Cleared</Badge>With a status dot
Because the tints are quiet, the dot is what keeps status readable for anyone who can't separate them by hue. Worth it on any toned badge.
DraftNeeds reviewBlockedIn progressCleared
<Badge tone="signal" dot>Blocked</Badge>
<Badge tone="success" dot>Cleared</Badge>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| tone | "neutral" | "accent" | "signal" | "warning" | "success" | "progress" | "neutral" | Semantic colour, applied as a tint. Never decorative. |
| dot | boolean | false | Show a solid status dot, so the state survives greyscale and colour blindness. |
Guidance
Do
- Keep to one or two words.
Don't
- Don't use a badge as a button. If it's clickable it needs to look clickable.