Badges
Status tints, counters, dots, pills & removable chips — every tone ships soft, solid & outline styles.
Foundation
Tones & styles
Six tones across soft, solid & outline fills.
Soft
AccentActivePendingOverdueNoteDraft
SolidAccentPaidLow stockFailedBetaArchived
OutlineAccentVerifiedReviewBlockedInfoNeutral
Form
Sizes & shapes
Default & small, square or pill.
DefaultSmall
SquarePillPill solid
Status
Dot badges
Leading dot pairs color with a glyph-free label.
OnlineAwayBusyOfflineSyncing
Affordance
With icons
Glyph reinforces the meaning of each state.
ApprovedPendingRejectedFeaturedInfo
Metrics
Trend deltas
Arrow + sign so color is never the only cue.
12.4%3.1%8.1%0.0%
Numeric
Counters & notifications
Mono, tabular, on icons or text.
Inbox 128Alerts 99+
Interactive
Removable chips
Active filters you can dismiss.
LightingIn stockUnder $100Rating 4+Aperture Goods
In context
All ordersOrder status cells
Badges as semantic status pills inside a real table.
| Order | Customer | Total | Payment | Fulfilment |
|---|---|---|---|---|
| #10482 | Camila Rossi | $312.00 | Paid | Shipped |
| #10481 | Henry Whitlock | $129.00 | Paid | Processing |
| #10475 | Yuki Tanaka | $225.00 | Pending | Unfulfilled |
| #10473 | Nadia Haddad | $238.00 | Refunded | Cancelled |