<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>

Usage

One primary button per view, the accent signals the single main action.
Ghost and secondary carry supporting actions; danger is destructive only.
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.

Badge ›