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

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.

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.