Button

All button variants, sizes, states, and groups.

Variants

Every semantic colour has a solid variant. Add na-button plus a modifier like na-button-primary.

<button class="na-button na-button-primary">Primary</button>
<button class="na-button na-button-secondary">Secondary</button>
<button class="na-button na-button-danger">Danger</button>

Outline variants

<button class="na-button na-button-outline-primary">Outline Primary</button>

Ghost & link

<button class="na-button na-button-ghost">Ghost</button>
<button class="na-button na-button-link">Link</button>

Sizes

<button class="na-button na-button-primary na-button-xs">xs</button>
<button class="na-button na-button-primary na-button-s">s</button>
<button class="na-button na-button-primary">m</button>
<button class="na-button na-button-primary na-button-l">l</button>
<button class="na-button na-button-primary na-button-xl">xl</button>

Icon button

<button class="na-button na-button-primary na-button-icon" aria-label="Add">
  <svg ...>...</svg>
</button>

Full width & disabled

<button class="na-button na-button-primary na-button-block">Full width</button>
<button class="na-button na-button-primary" disabled>Disabled</button>

Button group

<div class="na-button-group">
  <button class="na-button na-button-outline-primary">Left</button>
  <button class="na-button na-button-outline-primary">Centre</button>
  <button class="na-button na-button-outline-primary">Right</button>
</div>

Loading state

<button class="na-button na-button-primary na-button-loading">Saving…</button>

Class reference

Class	Description
`na-button`	Base button - required on all buttons
`na-button-primary / secondary / success / warning / danger / info / dark / light`	Solid colour variants
`na-button-outline-*`	Transparent background, coloured border
`na-button-ghost`	No border, subtle hover background
`na-button-link`	Looks like a text link
`na-button-xs / s / m / l / xl / 2xl / 3xl`	Size scale
`na-button-icon`	Square icon-only button
`na-button-block`	Full-width
`na-button-loading`	Spinner state
`na-button-group`	Joined button row