Components
Copy button
Copy to clipboard that answers like liquid: the icon folds into a check that draws itself, light washes out from where you pressed, droplets burst and a "Copied" bubble rises off the button.
Paste it into ChatGPT, Claude, Cursor or v0.
Usage
import { CopyButton, useClipboard } from '@vizzele/react';
<CopyButton value="npm i @vizzele/react">Copy</CopyButton>
// Icon only — a "Copied" bubble rises off it
<CopyButton value={() => window.location.href} aria-label="Copy link" />
// Build your own
const { copy, copied } = useClipboard();Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | () => string | — | Text to copy, or a function that builds it on click. |
children | ReactNode | — | Label. Omit for an icon-only button. |
copiedLabel | ReactNode | 'Copied' | Shown once copied. |
announce | string | 'Copied to clipboard' | What screen readers hear. |
timeout | number | 1800 | How long the copied state lasts (ms). |
size | 'md' | 'sm' | 'md' | Size. |
onCopy | (text, ok) => void | — | Called after every attempt. |
Accessibility
- A real <button>. Icon-only buttons get the name "Copy to clipboard" unless you pass aria-label.
- The result is announced in a polite live region outside the button, so its name never changes.
- Both labels share one grid cell: the button never jumps in width.
- With reduced motion the label simply swaps — no wash, droplets or jelly.
- If the clipboard is blocked it shows "Failed" with a cross instead of pretending it worked.