Badge
A compact label for statuses, counts, and tags. Inline-flex pill; tones via
[data-tone]. Status tones consume the WCAG-AA
-bg/-text token pairs, so they're legible in both
themes by construction.
Tones
Default New Active Pending review Blocked
With a leading dot
A status pip for at-a-glance scanning.
Online Degraded Outage
Groups
Use .c-badge-group for wrapping sets of status badges.
Inbound New SLA watch Routable
In context
Badges pair naturally with table cells, list items, and headers.
| Account | Status |
|---|---|
| Acme Ops | Active |
| Northwind | Trialing |
| Globex | Past due |