Display
Chip
Status, role, tier, and category are enumerations, and enumerations get chips so the eye can pick them out of a row of prose. Status tones mean status and nothing else, while identity tones attach to a data type across the whole app and never to one record's mood. A chip settles in when it appears and crossfades when its tone changes, because a value arriving on a row is a change worth noticing.
npx shadcn@latest add @minflow/chipWhere to use it
- Status, state, and lifecycle values on rows, cards, and detail panels.
- Type and ownership markers, where one identity tone stands for one kind of thing everywhere.
- Never for a count, which is a badge, and never for a free-text value, which is just text.
Variations
Status tones
Health and outcome: passing, degraded, failed. These three tones are spoken for, so never borrow them for a category.
Identity tones
Teams, projects, labels, anything where one tone should mean one thing app-wide. Assign the tone to the data type once and never per instance.
Outline
When a row already carries a tinted chip and a second one would compete. The outline reads as the quieter of the two without giving up the shape.
In a list
The everyday case. Aligned down the trailing edge of a list, chips turn a column of statuses into something scannable without a table.