Copy Button

PreviewCopy Anchor Link

UsageCopy Anchor Link

import { CopyButton } from '@vitnode/core/components/ui/copy-button'

<CopyButton content="pnpm create vitnode-app@canary" />

The check stays for delay (2000ms). Each new copy restarts the timer.

With a labelCopy Anchor Link

Children show next to the icon and become the accessible name.

<CopyButton content={inviteLink} variant="secondary">
  Copy invite link
</CopyButton>

Icon onlyCopy Anchor Link

Without children it's labelled "Copy" / "Copied". With several on a screen, give each its own aria-label.

<CopyButton
  aria-label="Copy install command"
  content={command}
  size="icon-sm"
  variant="ghost"
/>

ControlledCopy Anchor Link

Use copied and onCopiedChange when the page should react.

const [copied, setCopied] = React.useState(false)

<CopyButton content={inviteLink} copied={copied} onCopiedChange={setCopied} />

AccessibilityCopy Anchor Link

• A polite live region announces "Copied".
• With reduced motion, icons just fade and the check appears fully drawn.
• A blocked clipboard (say, on plain HTTP) shows an error toast.
• event.preventDefault() in your own onClick skips the copy.

PropsCopy Anchor Link

API ReferenceCopy Anchor Link

Base UI - Button