Button

Variants × sizes × states. Use <button class="bf-btn …"> for actions and <a class="bf-btn …"> for navigation. Always pair with an accessible label, even on icon-only buttons.

Variants

Copy<button class="bf-btn bf-btn--primary">Primary</button>
<button class="bf-btn bf-btn--secondary">Secondary</button>
<button class="bf-btn bf-btn--soft">Soft</button>
<button class="bf-btn bf-btn--ghost">Ghost</button>
<button class="bf-btn bf-btn--danger">Danger</button>
<button class="bf-btn bf-btn--link">Link</button>

Sizes

With icons

Copy<button class="bf-btn bf-btn--primary">
  <i class="fa-duotone fa-plus"></i> Create
</button>

<button class="bf-btn bf-btn--secondary bf-btn--icon" aria-label="Settings">
  <i class="fa-duotone fa-gear"></i>
</button>

States

Button group