Overview
Two related families share the same chrome but different intent: status pills (.status-pill) communicate workflow position via a 6 px colored dot + label, with a tinted background per state; count chips (.tab-count) are neutral pills that show numeric counts inside tabs or beside labels.
Use cases
- Workflow status. Inside table rows, card headers, and detail-page chrome to show progress (In Progress · Awaiting Review · Approved).
- Lifecycle state. On record cards and list items to indicate Draft / Active / Completed / Archived.
- Tab counts. Beside a tab label to show how many items are in that tab — replaces the need to load the tab to find out.
- Inline count summaries. Next to a section heading or filter label to show how many items are visible.
Properties
| Property | Type | Notes |
|---|
.status-pill | base class | Status pill chrome — 11/600 label, full pill radius, 6 px colored dot. |
| status variant | progress · ready_review · approved · new · completed · on-hold | Sets dot color + background tint per workflow state. |
.dot | required child | The 6 px colored circle inside the pill. Inherits color from the variant. |
.tab-count | base class | Neutral count chip. Inline-block, monospace digits, half-pill radius. |
Types & styles
Workflow status — 3-state
| Style | Meaning | Class |
|---|
| In Progress | Active work; user can edit and continue. | .status-pill.progress |
| Awaiting Review | Submitted; needs another user to approve. | .status-pill.ready_review |
| Approved | Sign-off complete; ready for the next stage. | .status-pill.approved |
Lifecycle status
| Style | Meaning | Class |
|---|
| Draft | Created but not yet shared. | .status-pill.new |
| Active | Live and accepting changes. | .status-pill.progress |
| Completed | Finished; read-only. | .status-pill.completed |
| Archived | Paused or shelved; off the active list. | .status-pill.on-hold |
Count chip
| Style | When to use | Class |
|---|
| All records 142 | Inside tabs, beside filter labels, in section headers. | .tab-count |
Best practices
- One status per record. A row or card should carry at most one status pill — combining two confuses workflow position.
- Status pills aren't navigation. Don't make pills clickable links. If a state transition is needed, use a button or dropdown that opens the transition workflow.
- Don't invent colors. Use the existing variants. If a new state is needed, add a variant to the system rather than inlining a custom color.
- Count chips stay neutral. Never tint count chips with the same variants as status pills — counts are quantitative, not qualitative.