CSS

Elements

Label

Wrap the button and a label in .tng-labelled-icon-button, and point the button’s aria-labelledby at the label. The label follows the button’s size and state.

<span class="tng-labelled-icon-button">
  <button
    class="tng-icon-button is-ghost is-xs"
    aria-labelledby="share-label"
  >
    <i class="tng-icon icon-share" aria-hidden="true"></i>
  </button>
  <span id="share-label">Share</span>
</span>
<span class="tng-labelled-icon-button">
  <button
    class="tng-icon-button is-sm"
    aria-labelledby="download-label"
  >
    <i class="tng-icon icon-download" aria-hidden="true"></i>
  </button>
  <span id="download-label">Download</span>
</span>
<span class="tng-labelled-icon-button">
  <button
    class="tng-icon-button is-outlined is-md"
    aria-labelledby="bookmark-label"
  >
    <i class="tng-icon icon-bookmark" aria-hidden="true"></i>
  </button>
  <span id="bookmark-label">Bookmark</span>
</span>
<span class="tng-labelled-icon-button">
  <button
    class="tng-icon-button is-outlined is-lg"
    aria-labelledby="next-label"
  >
    <i class="tng-icon icon-chevron-right" aria-hidden="true"></i>
  </button>
  <span id="next-label">Next</span>
</span>

Neutral
Contrast

Download Bookmark Next

Variants

The default variant is filled.

<button class="tng-icon-button is-filled" 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

<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