CSS

Variants

<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>

Neutral

Contrast

Link variant

Icon buttons can also be rendered as links using the as prop:

<a
  class="tng-icon-button"
  href="https://instagram.com"
  target="_blank"
  rel="noopener noreferrer"
  aria-label="Follow us on Instagram"
>
  <i class="tng-icon icon-instagram" aria-hidden="true"></i>
</a>
<a
  class="tng-icon-button is-outlined"
  href="https://facebook.com"
  target="_blank"
  rel="noopener noreferrer"
  aria-label="Follow us on Facebook"
>
  <i class="tng-icon icon-facebook" aria-hidden="true"></i>
</a>

Neutral

Contrast

Sizes

The default size is sm.

<button class="tng-icon-button is-xs" aria-label="Search">
  <i class="tng-icon icon-search" aria-hidden="true"></i>
</button>
<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>

Neutral

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>

Neutral

Contrast