Chip

A small mono label for state and context: info (action-subtle), neutral (bg-subtle, fg-muted), changed (signal-subtle), and the status colours: pass (status-success-subtle), warning (status-warning-subtle) and error (status-error-subtle).

Info, changed, and the status colours: pass, error, warning

Light

brand · Aexplainedchanged · 4.2%pass3 errors2 warnings0 findings

Graphite

brand · Aexplainedchanged · 4.2%pass3 errors2 warnings0 findings

Story: /stories/chip/states/

Guidelines

• Text is meta-sized mono, lower case, values after a middle dot: “changed · 4.2%”.
• State chips carry a marker so the state is not told by colour alone: a dot for changed and pass, an open ring for a warning, a filled square for an error (the shapes of the severity markers). Text in the tone’s text colour on its tint (7:1), the status markers in status-*-marker.
• Counts of findings are status chips (3 errors, 2 warnings, 0 findings); something that changed is changed, never a status (and an error is never changed).
• Info and neutral are context, not a state, and carry no marker. Neutral is for a settled fact beside a state chip, such as “explained” next to “changed” on a Diff card.
• Chips are not buttons; a filter that toggles is a segmented control.

Tokens used

Read from the component’s source:

--action-subtle--action-text--bg-subtle--fg-muted--font-mono--radius-full--radius-sm--signal-subtle--signal-text--status-error-marker--status-error-subtle--status-error-text--status-success-marker--status-success-subtle--status-success-text--status-warning-marker--status-warning-subtle--status-warning-text--stroke-ink--type-meta-line-height--type-meta-size