Status Badge
StatusBadge maps a semantic tone to the right --ds-color-status-* token automatically. You never pick a color; you pick a meaning. The same badge reads correctly across lien deadlines, work-order lifecycles, and collections stages because the token does the work.
Live demo
The interactive story below lets you switch tones and text live. It runs from the deployed Storybook.
Usage
import { StatusBadge } from "@beacon/design-system";
// Pick a tone that matches the semantic meaning, not a color.<StatusBadge tone="success">On track</StatusBadge><StatusBadge tone="danger">Overdue</StatusBadge><StatusBadge tone="warning">Approaching</StatusBadge><StatusBadge tone="info">Scheduled</StatusBadge><StatusBadge tone="special">Premium</StatusBadge><StatusBadge tone="neutral">Draft</StatusBadge>Props
| Prop | Type | Default | Description |
|---|---|---|---|
tone | StatusTone | "neutral" | Semantic meaning. Drives the token, not a hardcoded color. |
children | ReactNode | — | Label text shown inside the pill. |
StatusTone values
| Value | Token | Meaning |
|---|---|---|
neutral | --ds-color-content-muted | Draft, inactive, or unknown state. |
info | --ds-color-status-info | Informational; no action required. |
success | --ds-color-status-success | Healthy, complete, or on track. |
warning | --ds-color-status-warning | Approaching a deadline or threshold. |
danger | --ds-color-status-danger | Overdue, failed, or requires immediate attention. |
special | --ds-color-status-special | Premium feature or special designation. |
Design tokens used
| Token | Role |
|---|---|
--ds-color-status-{tone} | Foreground color and alpha-derived background + border. |
--ds-space-xs | Inline padding (half applied to block). |
--ds-space-sm | Inline padding. |
--ds-radius-full | Full pill border radius. |
--ds-font-size-sm | Label font size. |
When to use
- Status columns in data tables (work order status, lien filing status, notice send status).
- Detail page headers where a record has a lifecycle state.
- Anywhere a label needs color-coded meaning without using raw hex values.
Do not use StatusBadge for interactive controls (buttons, checkboxes). It is read-only.