Lists & data / Classification labels

Chip

A compact label that names a kind or state. Meaning and appearance are specified separately.

Basic usage

Preview

SELECT INSERT UPDATE v1.0.0

HTML

<div class="chips">
  <span class="chip tone-blue">SELECT</span>
  <span class="chip tone-violet">INSERT</span>
  <span class="chip tone-teal">UPDATE</span>
  <span class="chip chip-ghost">v1.0.0</span>
</div>

Showing state

Preview

✓ Resolved Partial ! Unresolved

HTML

<div class="chips">
  <span class="chip tone-ok">✓ Resolved</span>
  <span class="chip tone-warn">Partial</span>
  <span class="chip tone-danger">! Unresolved</span>
</div>

Classes & attributes

Class / attribute	Purpose
`.chip`	The standard classification label.
`.chip-sm / .chip-lg`	Reduced spacing, or a larger label. Small never means unreadable text.
`.chip-ghost`	An outline for a version or a literal identifier.
`.tone-blue / .tone-violet / .tone-teal`	Identity hues. Also available: amber, pink, indigo, and slate.
`.tone-ok / .tone-warn / .tone-danger`	State hues for success, caution, and a problem.

Usage notes

Never use red to identify a kind. Write the meaning in the label so it survives when color disappears.

Examples follow your system color scheme. Use ◐ in the header to try automatic, light, and dark themes.

Explore variations in Storybook ↗All components →