Copy

The <velin-copy> Web Component copies text to the clipboard and shows a short success state. Use it beside code blocks, API keys, or share links.

Basic

npm install @birdapi/velinstyle

<velin-copy value="npm install @birdapi/velinstyle" label="Copy"></velin-copy>

Alternatively set text (alias), data-source on the element, or copy from a nearby element id via data-source="#copyDemoText".

Attribute	Notes
`value` / `text`	String copied on click (first match wins)
`label`	Optional visible label beside the icon
`data-source`	CSS selector; copies `textContent` of the matched node

Listen for velin-copied (bubbles) — detail.value contains the copied string.

document.querySelector('velin-copy').addEventListener('velin-copied', (e) => {
  console.log('Copied', e.detail.value);
});

Declarative twin: velin-copy HTML attribute — see HTML attributes.