Chip

.chip makes compact actions look like chips.

Applicable Elements

• button
• a
• Any other container element

Basic Usage

<button class="chip">Salmon</button>
<a class="chip" href="#basic-usage">View all fish</a>
<span class="chip">Fresh today</span>

Variants

.chip has an .active variant for the current selection.

<button class="chip">Lean tuna</button>
<button class="chip active">Medium fatty tuna</button>
<button class="chip">Fatty tuna</button>

Combination

.icon pairs well with .chip.

<button class="chip">
  <svg class="icon"><use href="/diamond.svg#root" /></svg>
  Chef’s choice
</button>

<button class="chip">
  Remove tuna
  <svg class="icon"><use href="/delete.svg#root" /></svg>
</button>

States

<button class="chip" disabled>Sold out</button>
<button class="chip active" disabled>Already selected</button>