<div class="row">
  <button class="btn btn--primary">Talk to us</button>
  <button class="btn btn--secondary">Secondary</button>
  <button class="btn btn--ghost">Ghost</button>
  <button class="btn btn--danger">Delete</button>
</div>

Sizes

<div class="row">
  <button class="btn btn--primary btn--lg">Hero CTA</button>
  <button class="btn btn--primary">Default</button>
  <button class="btn btn--primary btn--sm">Small</button>
</div>

States

<div class="row">
  <button class="btn btn--primary" disabled>Disabled</button>
  <button class="btn btn--primary" data-loading="true">Loading</button>
</div>

Back

Icons that name the action: add leads with the plus, back with the arrow

<div class="row">
  <button class="btn btn--primary"><svg class="icon icon--sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg> Add merchant</button>
  <button class="btn btn--secondary"><svg class="icon icon--sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg> New terminal</button>
  <a class="btn btn--ghost" href="button.html"><svg class="icon icon--sm" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M19 12H5m6-6-6 6 6 6"/></svg> Back</a>
</div>

Merchant name

A field, a row of buttons, and the helper text below it. .row spaces the buttons and wraps them; the space above and below comes from the content around the row, which is why nothing touches.

Button rows carry the gap

<div class="field">
  <label for="br-name">Merchant name</label>
  <input class="input" id="br-name" value="Novapay Pte Ltd">
</div>
<div class="row">
  <button class="btn btn--primary">Save changes</button>
  <button class="btn btn--secondary">Cancel</button>
</div>
<p class="muted" style="font-size:var(--text-sm);margin:var(--space-3) 0 0">A field, a row of buttons, and the helper text below it. <code>.row</code> spaces the buttons and wraps them; the space above and below comes from the content around the row, which is why nothing touches.</p>

Usage

One primary button per view, the accent signals the single main action.
Ghost and secondary carry supporting actions; danger is destructive only.
A pair of actions sits side by side, never stacked one on top of the other, and one of the pair is primary — two secondaries leave the reader to guess which is the next step. The secondary always keeps its outline so it still reads as a button beside the filled one.
Links styled as buttons: use an <a class="btn …">, the classes work on both elements.
Don't invent new variants or colours; the accent re-skins per product via a theme class.
An action that creates something, Add, New, Create, Provision or Invite, leads with the plus icon, whatever its variant. Back leads with the left arrow. The icon goes before the label and never replaces it; the label still names the thing being added, like Add merchant.
Buttons go in a .row, which spaces them and wraps at narrow widths. A button carries no margin of its own, so bare siblings touch and read as one broken control.
Placement psychology (forms lead left, dialogs anchor right, danger stands apart) is covered in Actions & placement.

Badge ›