CopyButton

Copies a value to the clipboard with visual feedback. Defaults to an icon + label button; pass a render-prop children function when you need custom chrome.

Examples

Default

Provide the value written to the clipboard. Labels default to “Copy” / “Copied” / “Error”.

import { CopyButton } from '@var-ui/react';

<CopyButton value="npm i @var-ui/react" />

Custom labels

Override copyLabel and copiedLabel (and optionally errorLabel) for context-specific copy.

import { CopyButton } from '@var-ui/react';

<CopyButton
  value="npm i @var-ui/react"
  copyLabel="Copy install command"
  copiedLabel="Copied to clipboard"
/>

Props

Accessibility

The default control is a native button whose aria-label tracks the current state label (copyLabel, copiedLabel, or errorLabel). After a successful copy, the label updates so assistive tech hears the confirmation. Prefer clear verbs over icon-only copy affordances unless you supply an explicit render-prop with its own accessible name.