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.

Main Button

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>

Default

Button Button

Contrast

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

Default

Primary Secondary Tertiary Tertiary Ghost

Contrast

Primary Secondary Tertiary Tertiary Ghost

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>

Default

Small Medium Large

Contrast

Small Medium Large

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>

Default

Primary Secondary Tertiary Tertiary Ghost

Contrast

Primary Secondary Tertiary Tertiary Ghost

Icons

<button class="tng-button is-primary">
  <i class="tng-icon icon-download" aria-hidden="true"></i>
  <span>Download</span>
</button>
<button class="tng-button is-secondary">
  <span>Save</span>
  <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>
  <span>External Link</span>
</button>

Default

Download Save External Link

Contrast

Download Save External Link

Accent Button

Draft

This component is still in development. The implementation may be incomplete or the design not yet reviewed. Learn more

High-contrast conversion buttons for critical actions and call-to-actions.

Schemes

<button class="tng-accent-button">Default</button>
<button class="tng-accent-button is-bz4x">BZ4X</button>

Default

Default BZ4X

Contrast

Default BZ4X

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>

Default

Small Medium Large

Contrast

Small Medium Large

States

<button class="tng-accent-button" disabled>Default</button>
<button class="tng-accent-button is-bz4x" disabled>BZ4X</button>

Default

Default BZ4X

Contrast

Default BZ4X

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

Pill Button

Rounded buttons perfect for filters, tags, and selection interfaces.

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>

Default

Small Medium Large

Contrast

Small Medium Large

States

<button class="tng-pill-button is-selected">Selected</button>
<button class="tng-pill-button" disabled>Disabled</button>

Default

Selected Disabled

Contrast

Selected Disabled

On overlay

<button class="tng-pill-button on-overlay">Rested</button>
<button class="tng-pill-button on-overlay is-selected">
  Selected
</button>
<button class="tng-pill-button on-overlay is-cta">CTA</button>
<button class="tng-pill-button on-overlay" disabled>Disabled</button>

Rested Selected CTA Disabled

Icons

<button class="tng-pill-button">
  <i class="tng-icon icon-ui-spinner" aria-hidden="true"></i>
  <span>Loading</span>
</button>
<button class="tng-pill-button">
  <span>Popular</span>
  <i class="tng-icon icon-arrow-right" aria-hidden="true"></i>
</button>

Default

Loading Popular

Contrast

Loading Popular

Social Button

Icon-only buttons for social media actions and sharing.

Sizes

The default size is sm.

<button
  class="tng-social-button is-sm"
  aria-label="Share on Facebook"
>
  <i class="tng-icon icon-facebook" aria-hidden="true"></i>
</button>
<button class="tng-social-button is-lg" aria-label="Share on YouTube">
  <i class="tng-icon icon-youtube" aria-hidden="true"></i>
</button>

States

<button
  class="tng-social-button"
  disabled
  aria-label="Share on YouTube"
>
  <i class="tng-icon icon-youtube" aria-hidden="true"></i>
</button>

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>

Sit sit occaecat minim aute tempor veniam Lorem non et anim. Id in quis eiusmod ea velit sit qui aute cillum aliquip ad aliqua ex. Proident irure proident labore occaecat ex velit Lorem.

Accessibility

Semantic markup

• Use <button> for actions (submit, toggle, open dialog). Use <a> for navigation. Both can be styled with .tng-button, but only <button> responds to Space and has implicit role="button".
• Never use <a href="#"> as a button substitute — screen readers announce it as a link.

Icon-only buttons

Icon buttons (.tng-icon-button, .tng-social-button) 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>

States

• Disabled — prefer the native disabled attribute. It removes the button from tab order and communicates the state automatically.
• Focusable disabled — if a disabled button must remain focusable (e.g. to show a tooltip), use aria-disabled="true" instead and prevent the click in JavaScript.
• Toggle buttons — use aria-pressed="true" / "false" for on/off toggles. Use aria-expanded when the button controls a collapsible region.

Touch targets

All button variants use the tng-touch-target utility to meet the WCAG 2.5.8 minimum target size of 44×44 CSS pixels.