Chips / status labels

Compact status pills and inline deltas. The data-variant attribute sets intent (success / warning / error / info / outline / neutral); status variants pair a glyph or sign with the color so meaning never rides on color alone. Use them standalone, in a legend rail, or as table trend badges.

Status variants

<span class="casca-chip" data-variant="success">✓ Healthy</span>
<span class="casca-chip" data-variant="warning">⚠ Warning</span>
<span class="casca-chip" data-variant="error">✗ Error</span>
<span class="casca-chip" data-variant="info">ℹ Info</span>
<span class="casca-chip" data-variant="outline">Draft</span>

Category tags

The neutral variant is a filled, low-emphasis label for non-status things like categories or counts, distinct from the dark base chip and the bordered outline, with meaning on the text, not the color.

<span class="casca-chip" data-variant="neutral">core</span>

Inline deltas

<span class="casca-chip" data-variant="success">↑ 12%</span>
<span class="casca-chip" data-variant="error">↓ 3.1%</span>