Pill Button

Rounded buttons perfect for filters, tags, and selection interfaces.

Sizes

The default size is lg.

<button class="tng-pill-button is-sm">Small</button>
<button class="tng-pill-button is-md">Medium</button>
<button class="tng-pill-button is-lg">Large</button>

Default
Contrast

States

<button class="tng-pill-button is-selected">Selected</button>
<button class="tng-pill-button" disabled>Disabled</button>

Default
Contrast

On overlay

<button class="tng-pill-button on-overlay">Rested</button>
<button class="tng-pill-button on-overlay is-selected">
  Selected
</button>
<button class="tng-pill-button on-overlay is-cta">CTA</button>
<button class="tng-pill-button on-overlay" disabled>Disabled</button>

Icons

<button class="tng-pill-button">
  <i class="tng-icon icon-ui-spinner" aria-hidden="true"></i>
  <span>Loading</span>
</button>
<button class="tng-pill-button">
  <span>Popular</span>
  <i class="tng-icon icon-arrow-right" aria-hidden="true"></i>
</button>

Default
Contrast