Tag & Status pill
Two components that look adjacent and mean different things. A Tag labels a category; a Status pill reports state. Letting them share a treatment is how dashboards end up ambiguous, so the pill is always solid, uppercase and dotted.
Tag variants
Subtle — the default
First choice inside lists and tables. It carries the tone without competing with the row content.
Solid
Reserve for a single emphasised tag. Six solid tags in one row is a colour test, not an interface.
Outline
Sizes, shape, content
Removable
Supplying onRemove renders a labelled button, not a bare glyph — screen readers announce which tag they are about to remove.
Status pill
Five tones only, mapped to the data-* semantic tokens rather than the brand ramps. Status is not a brand decision.
Status dot
The quiet member of the family. In a table the column heading already says “Status”, so the solid pill spends contrast on something the layout has communicated already.
Where this came from
This component did not exist until the agent console was refactored onto the system. Its runs table needed a status treatment, reached for StatusPill, and four solid pills stacked down a dense table turned out to be shouting. The gap was in the system, not the app — so it got filled here rather than worked around there.
Which is the argument for making a real product consume a design system before calling it finished. A component library built in isolation is a set of guesses.
Choosing between the three
Tag
Labels a category. Any number can coexist on one row.
StatusPill
Reports state, prominently. For headers and detail views where status is the headline.
StatusDot
Reports state, quietly. For tables and lists where a column already frames it.