Copy Button
The `<pura-copy-button>` copies to the clipboard either a literal text (`value`) or the content of another element on the page (`target`), showing a check icon and the "Copied" label for about 1.2s. Use it to copy commands, API keys, links or code snippets with a single click. It has an agent-native layer: each instance mirrors its state in `data-pura-copy-*` attributes and registers itself in `window.__puraCopyButtons` (indexed by `data-pura-id`), letting agents enumerate and trigger copies via the `.copy()` method without touching the Shadow DOM.
Preview
<div style="display:flex; align-items:center; gap:.5rem">
<code id="chave">sk-pura-2f9a-7c41-d8e0</code>
<pura-copy-button target="#chave" label="Copy key"></pura-copy-button>
</div>
<pura-copy-button value="npm install pura">Copy command</pura-copy-button>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
value | string | — | Literal text to be copied. Takes priority over target. |
target | string | — | CSS selector resolved against the document; copies the value (form fields) or the textContent of the matched node. |
timeout | number | 1200 | Duration of the Copied feedback in milliseconds. |
disabled | boolean | false | Makes the button non-interactive. |
label | string | Copiar | Accessible label (aria-label) for the icon-only button. |
Installation
pura is copy-paste and dependency-free. Load the whole library, or just this component.
<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/copy-button.js"></script>import "./pura/lib/copy-button.js";