Copy Button

Copy buttons copy a value to the clipboard on click and show a "Copied!" confirmation with a check icon. They extend the .button component and come in three variants.

All variants use the same inner markup: a .copy-btn-default span (shown by default) and a .copy-btn-copied span (shown on success). Each span contains an icon.

Icon + Text

The default copy button with a copy icon and "Copy" label. Best for standalone copy actions where the purpose needs to be clear.

<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

.is-icon-only hides the text labels and shows only the icon. Best for compact UI — code blocks, table cells, and dense layouts. Always include aria-label.

<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

.is-ghost removes the background and border for a minimal, inline copy action. Best for use alongside content where a button would be too heavy.

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

Data Attributes

Use data-copy for static values (tokens, URLs). Use data-clipboard-target for dynamic content (code blocks).

JavaScript

Include assets/js/copy-button.js on any page using copy buttons. The script handles all .copy-btn elements via event delegation — no per-button initialisation needed.

<script src="/assets/js/copy-button.js"></script>

Accessibility

• Always include aria-label="Copy" on icon-only and ghost variants
• The copied state provides visual feedback via the check icon and green colour

Variant Summary