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
Accent
Active
Pending
Overdue
Note
Draft
Solid
Accent
Paid
Low stock
Failed
Beta
Archived
Outline
Accent
Verified
Review
Blocked
Info
Neutral
Form
Sizes & shapes
Default & small, square or pill.
Default
Small
Square
Pill
Pill solid
Status
Dot badges
Leading dot pairs color with a glyph-free label.
Online
Away
Busy
Offline
Syncing
Affordance
With icons
Glyph reinforces the meaning of each state.
Approved
Pending
Rejected
Featured
Info
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 128
Alerts 99+
Interactive
Removable chips
Active filters you can dismiss.
All filters cleared.
In context
All orders
Order 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 |