Tag

ready

Plain color chip for categorising a row or list item.

The Tag is a small color chip with no built-in meaning — it groups or categorises (“Renewal”, “New”, “Priority”) rather than reporting a workflow state. It shares its tone tokens with Status Badge so the two read consistently on a screen that uses both, but Tag carries no leading dot and no semantic mapping from the label to the tone — the caller picks the tone.

Anatomy

Renewal
  1. 1 Label — the category text, in a tone-colored pill

Tones

Success Warning Danger Info Neutral 
<Tag label="Success" tone="success" />
<Tag label="Warning" tone="warning" />
<Tag label="Danger" tone="danger" />
<Tag label="Info" tone="info" />
<Tag label="Neutral" tone="neutral" />

Usage

✓ Do
Priority

Use Tag for a category the reader picks a tone for — not a status.

✕ Don't
Approved

Don't use Tag for a workflow state — that's Status Badge, with its dot and its own tone map.

Accessibility

  • Text-based; color is never the only signal.

Props

PropTypeDefaultNotes
labelstring—The chip text.
tone"success" | "warning" | "danger" | "info" | "neutral""neutral"Visual tone — chosen by the caller, not inferred from the label.
  • Status Badge — the semantic counterpart, for workflow states.
  • Data Table — renders a TagCell using this component.