Copy Button

A Copy Button copies a text value to the clipboard and shows on the button whether the copy worked.

Usage

<p>
    <span class="me-2">https://example.com/invite/7Hq2Lm</span>
    <CopyButton value="https://example.com/invite/7Hq2Lm" />
</p>

Bind value to a property to copy dynamic text:

<CopyButton value="{$inviteUrl}" />

Label and style

By default, the button shows only an icon and looks like a small link. Use label to add visible text, and buttonClass to change the look:

<CopyButton value="{$inviteUrl}" label="Copy link" buttonClass="btn btn-outline-secondary btn-sm" />

buttonClass replaces the default classes, so include btn and any other classes you need.

Feedback

After a click, the button shows the result for 1.5 seconds, then goes back to its normal state:

• On success, the icon changes to a check mark, and the label (if set) changes to Copied.
• On failure, the icon changes to a warning sign, and the label (if set) changes to Copy failed.

The button's title shows the same status text while it is visible.

The feedback stays on the button itself, so it works on any page without an alert container. In a table with a copy button on each row, the user sees which one was pressed. The click does not bubble up to parent elements, so it does not trigger a click handler on the row.

Browser support

The button uses the Clipboard API when the page runs in a secure context (HTTPS or localhost). If the Clipboard API is missing or refuses the write, the button falls back to the older document.execCommand('copy') method. It reports success only after the copy has actually finished.

If you need a copy button inside a text input, use the copyable property of Text Input.

Properties

value - (optional), the text to copy. Default: `` (empty).

label - (optional), visible text next to the icon. Empty means an icon only button. Default: `` (empty).

title - (optional), title and aria-label of the button. Default: Copy.

buttonClass - (optional), class attribute of the button. Default: btn btn-link btn-sm p-0.