Skip to content

Buttons

Buttons are styled automatically. Use data-* attributes for variants.

Default variants

<button>Primary</button>
<button data-secondary>Secondary</button>
<button data-outline>Outline</button>
<button data-ghost>Ghost</button>
<button type="reset">Reset / Danger</button>

States

Link as button 
<button disabled>Disabled</button>
<button data-outline disabled>Outline disabled</button>
<a href="#" role="button">Link as button</a>

Buttons with icons

<button>
  <span class="fabcons-search" aria-hidden="true"></span> Search
</button>
<button data-outline>
  <span class="fabcons-plus" aria-hidden="true"></span> Add item
</button>
<button type="reset">
  <span class="fabcons-trash" aria-hidden="true"></span> Delete
</button>