Icon Button
Schemes
Section titled “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>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>States
Section titled “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>Accessibility
Section titled “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>