Copy button – Tsunami

Copy a fixed text

Add data-copy to a .btn. Children marked data-idle show normally, and children marked data-done show for 1.5 seconds after the copy.

<button type="button" class="btn" data-copy="ORD-110963">
  <i class="icon icon-copy" data-idle aria-hidden="true"></i>
  <i class="icon icon-check" data-done aria-hidden="true"></i>
  <span data-idle>Copy order number</span>
  <span data-done>Copied</span>
</button>

Copy from an element

data-copy-target takes a selector. An input or textarea copies its value; any other element copies its text.

<div class="input-group">
  <input id="copy-key" value="tsu_live_9Xk2mQp7LdVw4RbN8sEh3TyA" readonly aria-label="API key" />
  <button type="button" class="btn" data-variant="ghost" data-size="icon-sm" data-copy-target="#copy-key" aria-label="Copy API key">
    <i class="icon icon-copy" data-idle aria-hidden="true"></i>
    <i class="icon icon-check" data-done aria-hidden="true"></i>
  </button>
</div>

Copy a code block

In a .code-block the button sits in the top right corner of the pre, for commands and snippets.

npm install @tsunami/ui

<div class="typography">
  <div class="code-block">
    <pre><code id="cb-install">npm install @tsunami/ui</code></pre>
    <button type="button" class="btn" data-variant="ghost" data-size="icon-sm" data-copy-target="#cb-install" aria-label="Copy the code">
      <i class="icon icon-copy" data-idle aria-hidden="true"></i>
      <i class="icon icon-check" data-done aria-hidden="true"></i>
    </button>
  </div>
</div>

With a toast

data-copy-toast also shows a toast. Leave it empty for "Copied", or give your own message.

<button type="button" class="btn" data-variant="ghost" data-copy="https://shop.example.com/orders/110963" data-copy-toast="Link copied">
  <i class="icon icon-link" aria-hidden="true"></i>
  Copy link
</button>

API

Name	Values	Description
`tsunami.copy(text)`	string	Copies the text and returns a promise of `true` or `false`. It uses `navigator.clipboard` and falls back to `document.execCommand("copy")` on pages that are not a secure context.

Events

Name	Values	Description
`tsunami:copy`	`detail.text`	Bubbles from the button after a successful copy.

Attributes

Attribute / element	Values	Description
`data-copy`	text	The text to copy.
`data-copy-target`	CSS selector	Copies the `value` of an input or textarea, or the text of any other element. Used when there is no `data-copy`.
`data-copy-toast`	message (may be empty)	Shows a toast too. Empty means `Copied`.
`data-copied`	set by the script	On the button for 1.5 s after a copy. Use it to style the state.
`[data-idle]`	child	Hidden while the button has `data-copied`.
`[data-done]`	child	Shown only while the button has `data-copied`.

Accessibility

Every copy is announced as Copied in a polite live region, so the icon swap is not the only signal.
An icon-only button needs an aria-label.
Nothing happens if the clipboard is blocked or the target is missing; the button stays as it was.