Copy 1.2.2

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. Deutsch: Kopieren

Maturity: Documented as stable in VelinStyle 1.2.0. Design Intelligence (plan / review / agent meta) is separate and beta / foundation where noted.

When to use

One-click copy of a value (API keys, snippets, codes) with <velin-copy>.
When clipboard feedback should live next to the content being copied.

When not

Bulk export or download of files — use a download link or app action.
Editing content — this only copies; it does not open an editor.

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".

API note: <velin-copy> reads value / text (or data-source). Do not wrap a child button with data-velin-copy — that attribute pattern is not the Web Component API.

Attributes

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

Events

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.

Native button with aria-label (switches to "Copied" briefly).
Minimum 44×44px touch target; focus ring via :focus-visible.