Icon Button

Schemes

<button class="tng-icon-button" aria-label="Download">
  <i class="tng-icon icon-download" aria-hidden="true"></i>
</button>
<button class="tng-icon-button is-outlined" aria-label="Bookmark">
  <i class="tng-icon icon-bookmark" aria-hidden="true"></i>
</button>
<button class="tng-icon-button is-ghost" aria-label="External link">
  <i class="tng-icon icon-external-link" aria-hidden="true"></i>
</button>

Default

Contrast

Sizes

The default size is sm.

<button class="tng-icon-button is-sm" aria-label="Search">
  <i class="tng-icon icon-search" aria-hidden="true"></i>
</button>
<button class="tng-icon-button is-md" aria-label="Calendar">
  <i class="tng-icon icon-calendar" aria-hidden="true"></i>
</button>
<button class="tng-icon-button is-lg" aria-label="Confirm">
  <i class="tng-icon icon-check" aria-hidden="true"></i>
</button>

Default

Contrast

States

<button class="tng-icon-button" disabled aria-label="Download">
  <i class="tng-icon icon-download" aria-hidden="true"></i>
</button>
<button
  class="tng-icon-button is-outlined"
  disabled
  aria-label="External link"
>
  <i class="tng-icon icon-external-link" aria-hidden="true"></i>
</button>
<button
  class="tng-icon-button is-ghost"
  disabled
  aria-label="External link"
>
  <i class="tng-icon icon-external-link" aria-hidden="true"></i>
</button>

Default

Contrast

Accessibility

Icon buttons must include an accessible label. Prefer aria-label over .sr-only (learn why).

<button class="tng-icon-button" aria-label="Download">
  <i class="tng-icon icon-download" aria-hidden="true"></i>
</button>