Button
Buttons are interactive elements that trigger actions or events when activated by users. Our button system provides six base button types designed for different use cases and interaction patterns.
Button (Primary, Secondary, Tertiary)
Section titled “Button (Primary, Secondary, Tertiary)”The main button component with three visual variants for different emphasis levels.
<button class="tng-button">Button</button><a class="tng-button" href="#">Button</a>Button schemes
Section titled “Button schemes”The default scheme is primary.
<button class="tng-button is-primary">Primary</button><button class="tng-button is-secondary">Secondary</button><button class="tng-button is-tertiary">Tertiary</button><button class="tng-button is-tertiary is-ghost">Tertiary Ghost</button>Button sizes
Section titled “Button sizes”The default size is lg.
<button class="tng-button is-sm">Small</button><button class="tng-button is-md">Medium</button><button class="tng-button is-lg">Large</button>Button states
Section titled “Button states”<button class="tng-button is-primary" disabled>Primary</button><button class="tng-button is-secondary" disabled>Secondary</button><button class="tng-button is-tertiary" disabled>Tertiary</button><button class="tng-button is-tertiary is-ghost" disabled>Tertiary Ghost</button>Button with icons
Section titled “Button with icons”<button class="tng-button is-primary"> <i class="tng-icon icon-download" aria-hidden="true"></i> Download</button><button class="tng-button is-secondary"> Save <i class="tng-icon icon-bookmark" aria-hidden="true"></i></button><button class="tng-button is-tertiary"> <i class="tng-icon icon-external-link" aria-hidden="true"></i> External Link</button>Accent Button
Section titled “Accent Button”High-contrast conversion buttons for critical actions and call-to-actions.
Accent Button schemes
Section titled “Accent Button schemes”<button class="tng-accent-button">Default</button><button class="tng-accent-button is-bz4x">BZ4X</button>Accent Button sizes
Section titled “Accent Button sizes”The default size is lg.
<button class="tng-accent-button is-sm">Small</button><button class="tng-accent-button is-md">Medium</button><button class="tng-accent-button is-lg">Large</button>Accent Button states
Section titled “Accent Button states”<button class="tng-accent-button" disabled>Default</button><button class="tng-accent-button is-bz4x" disabled>BZ4X</button>Icon Button
Section titled “Icon Button”Icon Button schemes
Section titled “Icon Button schemes”<button class="tng-icon-button"> <i class="tng-icon icon-download" aria-hidden="true"></i> <span class="sr-only">Filled</span></button><button class="tng-icon-button is-neutral"> <i class="tng-icon icon-external-link" aria-hidden="true"></i> <span class="sr-only">Neutral</span></button><button class="tng-icon-button is-outlined"> <i class="tng-icon icon-bookmark" aria-hidden="true"></i> <span class="sr-only">Outlined</span></button><button class="tng-icon-button is-outlined is-neutral"> <i class="tng-icon icon-bookmark" aria-hidden="true"></i> <span class="sr-only">Outlined</span></button>Icon Button sizes
Section titled “Icon Button sizes”The default size is sm.
<button class="tng-icon-button is-sm"> <i class="tng-icon icon-search" aria-hidden="true"></i> <span class="sr-only">Search</span></button><button class="tng-icon-button is-md"> <i class="tng-icon icon-calendar" aria-hidden="true"></i> <span class="sr-only">Close</span></button><button class="tng-icon-button is-lg"> <i class="tng-icon icon-check" aria-hidden="true"></i> <span class="sr-only">Confirm</span></button>Icon Button states
Section titled “Icon Button states”<button class="tng-icon-button" disabled> <i class="tng-icon icon-download" aria-hidden="true"></i> <span class="sr-only">Filled</span></button><button class="tng-icon-button is-neutral" disabled> <i class="tng-icon icon-download" aria-hidden="true"></i> <span class="sr-only">Filled</span></button><button class="tng-icon-button is-outlined" disabled> <i class="tng-icon icon-external-link" aria-hidden="true"></i> <span class="sr-only">Outlined</span></button><button class="tng-icon-button is-outlined is-neutral" disabled> <i class="tng-icon icon-external-link" aria-hidden="true"></i> <span class="sr-only">Outlined</span></button>Link Button
Section titled “Link Button”The Link Button extends the Link component and adds sizing modifiers on top.
<a class="tng-link-button" href="#link-button">Link</a><button class="tng-link-button">Link Button</button>Link Button schemes
Section titled “Link Button schemes”<a class="tng-link-button">Default</a><a class="tng-link-button is-neutral">Neutral</a>Link Button sizes
Section titled “Link Button sizes”The default size is lg.
<a class="tng-link-button is-sm">Small</a><a class="tng-link-button is-md">Medium</a><a class="tng-link-button is-lg">Large</a>Link Button states
Section titled “Link Button states”Link Button with icons
Section titled “Link Button with icons”<a class="tng-link-button"> <i class="tng-icon icon-external-link" aria-hidden="true"></i> External Link</a><a class="tng-link-button"> Continue <i class="tng-icon icon-arrow-right" aria-hidden="true"></i></a>Pill Button
Section titled “Pill Button”Rounded buttons perfect for filters, tags, and selection interfaces.
Pill Button schemes
Section titled “Pill Button schemes”<button class="tng-pill-button">Subtle</button><button class="tng-pill-button is-highlight">Highlight</button><button class="tng-pill-button is-inactive">Inactive</button>Pill Button on overlay
Section titled “Pill Button on overlay”<button class="tng-pill-button on-overlay">Subtle</button><button class="tng-pill-button on-overlay is-cta">CTA</button><button class="tng-pill-button on-overlay is-highlight">Inactive</button><button class="tng-pill-button on-overlay is-inactive">Inactive</button>Pill Button sizes
Section titled “Pill Button 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>Pill Button states
Section titled “Pill Button states”<button class="tng-pill-button" disabled>Subtle</button><button class="tng-pill-button is-highlight" disabled>Highlight</button><button class="tng-pill-button is-inactive" disabled>Inactive</button>Pill Button with icons
Section titled “Pill Button with icons”<button class="tng-pill-button"> <i class="tng-icon icon-check" aria-hidden="true"></i> Approved</button><button class="tng-pill-button"> Popular <i class="tng-icon icon-arrow-right" aria-hidden="true"></i></button>Social Button
Section titled “Social Button”Icon-only buttons for social media actions and sharing.
Social Button sizes
Section titled “Social Button sizes”The default size is sm.
<button class="tng-social-button is-sm"> <i class="tng-icon icon-facebook" aria-hidden="true"></i> <span class="sr-only">Share on Facebook</span></button><button class="tng-social-button is-lg"> <i class="tng-icon icon-youtube" aria-hidden="true"></i> <span class="sr-only">Share on YouTube</span></button>Social Button states
Section titled “Social Button states”<button class="tng-social-button" disabled> <i class="tng-icon icon-youtube" aria-hidden="true"></i> <span class="sr-only">Share on YouTube</span></button>Overflow
Section titled “Overflow”You can set overflow limitation on a button just like any other element by using the overflow utility class.
<button class="tng-button"> <div class="tng-overflow-ellipsis">…</div></button>