kit

Copy button

A button that copies text to the clipboard, confirming in place and to screen readers, with a fallback that selects the text when copying is blocked.

Tier 2 · behaviour Button beta

Example

Show the markup 
<div class="kit-stack demo-fill" data-gap="4">
  <div class="kit-cluster" data-gap="3"><button class="kit-button" type="button" data-copy="Example text to copy"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true"><rect x="5" y="5" width="8" height="8" rx="2"/><path d="M3 11V4a1 1 0 0 1 1-1h7"/></svg>Copy text</button><button class="kit-button" data-icon type="button" data-copy="Another example" aria-label="Copy example" data-tooltip="Copy"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true"><rect x="5" y="5" width="8" height="8" rx="2"/><path d="M3 11V4a1 1 0 0 1 1-1h7"/></svg></button></div>
  <div class="kit-field"><label for="cp-key">Field with a copy button</label><div class="kit-input-group"><input class="kit-input" id="cp-key" value="abc_123_example" readonly data-numeric><button class="kit-button" type="button" data-copy-target="#cp-key" aria-label="Copy value"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true"><rect x="5" y="5" width="8" height="8" rx="2"/><path d="M3 11V4a1 1 0 0 1 1-1h7"/></svg>Copy</button></div></div>
</div>

Usage

<button class="kit-button" data-copy="npm install kit">Copy</button>
<button class="kit-button" data-icon data-copy-target="#api-key" aria-label="Copy API key">…</button>

copy.js (in kit.js) copies the data-copy text, or the text (or value, for inputs) of the element data-copy-target points at. The button shows "Copied" for two seconds (its aria-label too, for icon buttons) and announces it; a copy event fires with { text }.

If the browser refuses (some embedded views do), the target's text is selected instead, so Ctrl or ⌘+C finishes the job.

Accessibility

  • It's a real button, with a name that says what it copies when that isn't obvious.
  • "Copied" is announced through a live region; the button's own label changes too, so there's a visible and a spoken confirmation.