Display
Badge
A count or a state, set in mono so it reads as metadata.
When to reach for it
One fact about one record. If it names what something is ABOUT, that is a Tag.
Examples
tones
12DraftDeployedDegradedFailed
Notes
A count, a state, a small inline marker.
Mono and small, so it reads as metadata rather than as content. A badge is not interactive — if it can be clicked or dismissed it is a Tag or a button, and giving this one an onClick produces a control a keyboard cannot reach.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| childrenrequired | ReactNode | — | |
| tone | BadgeTone | 'neutral' | `neutral` is the default and the right answer nearly always. The three status tones are the system's only chroma and are bound to STATE — a badge that is red because the design wanted a red badge is the thing this scale exists to prevent. |
Also accepts everything in HTMLAttributes<HTMLSpanElement>. Those are forwarded to the underlying element and are not listed row by row.
Types
export type BadgeTone = 'neutral' | 'success' | 'warning' | 'danger' | 'outline'Accessibility
- Not interactive. A badge with an onClick is a control a keyboard cannot reach.
- The status tones double their colour with words, so the meaning survives monochrome and colour-blindness.