naUI
Components Components

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

ClassDescription
na-buttonBase button - required on all buttons
na-button-primary / secondary / success / warning / danger / info / dark / lightSolid colour variants
na-button-outline-*Transparent background, coloured border
na-button-ghostNo border, subtle hover background
na-button-linkLooks like a text link
na-button-xs / s / m / l / xl / 2xl / 3xlSize scale
na-button-iconSquare icon-only button
na-button-blockFull-width
na-button-loadingSpinner state
na-button-groupJoined button row