Chip Row

Updated 2 weeks ago

Live preview

default

primary

accent

neutral

warning

success

When to use Chip Row

Use a chip row for an inline group of small labelled values that share a category — a label prefix (in monospace) followed by a value, rendered as a constrained-height inline-flex element. It reads as metadata, not as an action.

When to use

  • Metadata rows on a detail page: status, classification, mode — one chip per fact.
  • Compact summaries in a list or table cell where a full field label would take too much horizontal space.

When not to use

  • Interactive filters the user can add/remove: build a real filter-chip component with role="checkbox"/role="button" and aria-pressed — chip row is presentational by default, not a control.
  • A single standalone value: a chip only earns its keep as part of a row of related facts. One chip alone is just a badge.

Variants

Six semantic variants, chosen by what the value means, not by preference:

VariantUse for
DefaultGeneric categorisation — no particular semantic weight
PrimaryPrimary semantic anchor for the row
AccentClassification-domain chip (e.g. a taxonomy or category tag)
NeutralMode or state chip
WarningWarning / regulation-attached chip
SuccessVerified / pass state chip
Important Information

Design System disclosure

This site provides open-source design tokens, documentation, and self-hostable software published by Woodfine Capital Projects Inc. Information here is for general reference only and does not constitute an offer, warranty, or a guarantee of fitness for any particular purpose. Statements regarding planned, intended, or targeted future features are forward-looking and subject to change without notice; they are not undertaken to be updated except as required by law.