Skip to content

CSS

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

Variants

Section titled “Variants”

The default variant 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>

Sizes

Section titled “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>

States

Section titled “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>

Icons

Section titled “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>

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>