CSS

<button class="tng-chip">
  <i class="tng-icon icon-check" aria-hidden="true"></i>
  <span>Label</span>
  <i class="tng-icon icon-close" aria-hidden="true"></i>
</button>

Sizes

The default size is sm.

<button class="tng-chip is-sm">
  <i class="tng-icon icon-check" aria-hidden="true"></i>
  <span>Small</span>
  <i class="tng-icon icon-close" aria-hidden="true"></i>
</button>
<button class="tng-chip is-lg">
  <i class="tng-icon icon-check" aria-hidden="true"></i>
  <span>Large</span>
  <i class="tng-icon icon-close" aria-hidden="true"></i>
</button>

States

Use is-selected for a chip that’s currently chosen. The pressed appearance applies automatically while the chip is held (:active); add is-active to pin that appearance — for example, while a menu the chip controls is open. Disable a chip with the native disabled attribute.

<button class="tng-chip is-active">
  <i class="tng-icon icon-check" aria-hidden="true"></i>
  <span>Active</span>
  <i class="tng-icon icon-close" aria-hidden="true"></i>
</button>
<button class="tng-chip is-selected">
  <i class="tng-icon icon-check" aria-hidden="true"></i>
  <span>Selected</span>
  <i class="tng-icon icon-close" aria-hidden="true"></i>
</button>
<button class="tng-chip" disabled>
  <i class="tng-icon icon-check" aria-hidden="true"></i>
  <span>Disabled</span>
  <i class="tng-icon icon-close" aria-hidden="true"></i>
</button>

A chip can open a Dropdown — the filter chip. Give it a trailing icon-chevron-down; while aria-expanded="true" (or is-active) the chip shows its active colours and the chevron points up. Let the label reflect the selection: the chosen value for a single choice, or the filter name with a count for several. The Dropdown’s Checkbox List recipe shows the whole pattern working, and the Accessibility tab covers the ARIA wiring.

<button
  class="tng-chip"
  aria-haspopup="listbox"
  aria-expanded="false"
>
  <span>Petrol</span>
  <i class="tng-icon icon-chevron-down" aria-hidden="true"></i>
</button>
<button class="tng-chip" aria-haspopup="listbox" aria-expanded="true">
  <span>Body type (2)</span>
  <i class="tng-icon icon-chevron-down" aria-hidden="true"></i>
</button>

Variants

On Image

Use on-image when placing chips on top of imagery — for example, over a hero or product photo.

<button class="tng-chip on-image">
  <i class="tng-icon icon-check" aria-hidden="true"></i>
  <span>Label</span>
  <i class="tng-icon icon-close" aria-hidden="true"></i>
</button>
<button class="tng-chip on-image is-selected">
  <i class="tng-icon icon-check" aria-hidden="true"></i>
  <span>Selected</span>
  <i class="tng-icon icon-close" aria-hidden="true"></i>
</button>
<button class="tng-chip on-image" disabled>
  <i class="tng-icon icon-check" aria-hidden="true"></i>
  <span>Disabled</span>
  <i class="tng-icon icon-close" aria-hidden="true"></i>
</button>

On Solid

Use on-solid when placing chips on a dark or contrast background.

<button class="tng-chip on-solid">
  <i class="tng-icon icon-check" aria-hidden="true"></i>
  <span>Label</span>
  <i class="tng-icon icon-close" aria-hidden="true"></i>
</button>
<button class="tng-chip on-solid is-selected">
  <i class="tng-icon icon-check" aria-hidden="true"></i>
  <span>Selected</span>
  <i class="tng-icon icon-close" aria-hidden="true"></i>
</button>
<button class="tng-chip on-solid" disabled>
  <i class="tng-icon icon-check" aria-hidden="true"></i>
  <span>Disabled</span>
  <i class="tng-icon icon-close" aria-hidden="true"></i>
</button>

Suggestion

Use is-suggestion for a filter-style pill with a trailing arrow and its own rested, selected and disabled colours. It’s the chip behind the suggestions in Chat messages. The label sits in a <span> and the arrow is a decorative trailing icon-ui-arrow-right.

<button class="tng-chip is-suggestion">
  <span>Label</span>
  <i class="tng-icon icon-ui-arrow-right" aria-hidden="true"></i>
</button>
<button class="tng-chip is-suggestion is-selected">
  <span>Selected</span>
  <i class="tng-icon icon-ui-arrow-right" aria-hidden="true"></i>
</button>
<button class="tng-chip is-suggestion" disabled>
  <span>Disabled</span>
  <i class="tng-icon icon-ui-arrow-right" aria-hidden="true"></i>
</button>

Neutral
Contrast

CSS