Button

Buttons are interactive elements used to trigger actions. They size to their content by default and should communicate clear intent and hierarchy.

The .button class is required for styled buttons. The bare <button> element has only a minimal reset — always add class="button" to get the full button appearance.

Primary Button

The default .button is the most prominent action on the page.

<button class="button">Primary Action</button>
<button class="button" disabled>Primary Action</button>

Outline Button

.is-outline removes the filled background and uses a border instead. Use for secondary actions that shouldn't compete with the primary CTA.

<button class="button is-outline">Secondary Action</button>

Faded Button

.is-faded applies a subtle background for low-priority or passive actions.

<button class="button is-faded">Optional Action</button>

Outline + Faded

.is-outline.is-faded combines both modifiers for tertiary or utility actions.

<button class="button is-outline is-faded">Tertiary Action</button>

Small Button

.is-small reduces font size and padding for dense UI areas.

<button class="button is-small">Small Primary</button>
<button class="button is-small is-outline">Small Outline</button>
<button class="button is-small is-faded">Small Faded</button>

Icon Button

.is-icon creates a circular button designed for icons only. Always include aria-label for accessibility.

<button class="button is-icon" aria-label="Close">
  <div class="svg-icn" data-icon="close"><!-- SVG icon --></div>
</button>

<button class="button is-icon is-faded" aria-label="Search">
  <div class="svg-icn" data-icon="search"><!-- SVG icon --></div>
</button>

Button Group

.button-group is a flex container for grouping multiple buttons together. It provides consistent spacing, wraps on smaller screens, and vertically centres buttons of different sizes.

<div class="button-group">
  <button class="button">Confirm</button>
  <button class="button is-outline">Cancel</button>
</div>

<div class="button-group justify-center">...</div>
<div class="button-group justify-end">...</div>

All Variants

A side-by-side comparison of every button style at default size.

Copy Button

The .copy-btn adds clipboard copy functionality to any button. It copies the value from data-copy and shows a "Copied!" state. Three variants are available. See the Copy Button docs for full details.

<!-- Icon + Text -->
<button class="button is-small is-outline copy-btn" data-copy="value" type="button">
  <span class="copy-btn-default">{{icon:copy}} Copy</span>
  <span class="copy-btn-copied">{{icon:check}} Copied!</span>
</button>

<!-- Icon Only -->
<button class="button is-small is-outline copy-btn is-icon-only" data-copy="value" data-tooltip="Copy" type="button" aria-label="Copy">
  <span class="copy-btn-default">{{icon:copy}}</span>
  <span class="copy-btn-copied">{{icon:check}}</span>
</button>

<!-- Ghost -->
<button class="button copy-btn is-ghost" data-copy="value" data-tooltip="Copy" type="button" aria-label="Copy">
  <span class="copy-btn-default">{{icon:copy}}</span>
  <span class="copy-btn-copied">{{icon:check}}</span>
</button>

Requires assets/js/copy-button.js.

Usage Rules

• Buttons should never stretch full width by default
• Use one clear primary button per section when possible
• Use outline or faded styles to reduce visual competition
• Use icon buttons only when the icon meaning is clear
• If a button feels too prominent or too quiet, change the modifier — not the base styles