Chip

Examples

Every color rendered live from chips.css. Pair a chip with a Phosphor icon when the label benefits from a glyph.

<span class="chip chip--blue">Activation</span>
<span class="chip chip--violet">Retention</span>
<span class="chip chip--green">Engagement</span>
<span class="chip chip--orange">Conversion</span>

<span class="chip chip--violet">
  <i class="ph ph-sparkle" aria-hidden="true"></i> AI
</span>

Usage

Chips carry meaning through color, so keep that mapping consistent.

• Map each color to a category consistently across the product, a color should always mean the same thing.
• Chips describe a category or status; they are not actionable. Never wire a chip to a click or a route.
• Keep labels to 1-2 words so the chip stays a tag, not a sentence.
• The radius is --radius-md (12px): chips are softly rounded, never fully pill-round.

States

Chips are static: they have no hover, active, or disabled states by default. Because a chip only labels, there is no interaction to give feedback for. If you need something the user can click, reach for a button instead.

Code

Link the stylesheet once, then compose with the element and color classes.

<link rel="stylesheet" href="/_shared/components/chips.css">

<span class="chip chip--blue">Activation</span>
<span class="chip chip--violet">Retention</span>
<span class="chip chip--green">Engagement</span>
<span class="chip chip--orange">Conversion</span>

<span class="chip chip--violet">
  <i class="ph ph-sparkle" aria-hidden="true"></i> AI
</span>