Badge
Compact labels for counts and categories, and a StatusBadge whose visible label is required so colour is never the sole carrier of meaning.
Status tones
ReadyAwaiting releaseCriticalProcessingRecoveringOrdered
<StatusBadge tone="success" label="Ready" dot /><StatusBadge tone="warning" label="Awaiting release" dot /><StatusBadge tone="danger" label="Critical" dot /><StatusBadge tone="info" label="Processing" dot /><StatusBadge tone="alt" label="Recovering" dot /><StatusBadge tone="neutral" label="Ordered" dot />Without a dot
DoneProcessing
<StatusBadge tone="success" label="Done" /><StatusBadge tone="info" label="Processing" />Count badge
12128
<Badge>12</Badge><Badge size="md">128</Badge>StatusBadge props
| Prop | Type | Default | Notes |
|---|---|---|---|
label | string | — | Required visible text. Colour is never the only signal. |
tone | 'success' | 'warning' | 'danger' | 'info' | 'alt' | 'neutral' | — | Required. Chooses the semantic colour. |
dot | boolean | false | Adds a redundant solid dot as a scanning aid. |
size | 'sm' | 'md' | 'sm' | Compact by default for dense tables. |