Skip to content

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

Section titled “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

Section titled “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>

Variants

Section titled “Variants”

On Image

Section titled “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

Section titled “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

Section titled “Suggestion”

Use is-suggestion for a filter-style pill — a white rested fill, a trailing arrow, and a dark selected state. 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>