Copy Button
Copy-to-clipboard button whose icon twists into a check.
Copy Button copies text to the clipboard (install commands, API keys, links). The copy icon twists into a check, an optional label reads "Copied", and the result is announced to screen readers.
Preview
npx shadcn@latest add https://ui.cuelark.com/r/button.jsonInstallation
pnpm dlx shadcn@latest add https://ui.cuelark.com/r/copy-button.jsonThe CLI also installs the Cuelark theme tokens, the GSAP motion layer and the components it builds on. With the @cuelark namespace configured, use @cuelark/copy-button.
Builds on: button, motion
Usage
import { CopyButton } from "@/components/ui/copy-button";
<CopyButton value="npx shadcn@latest add …" />Motion
The icon swap twists and scales in with a cue-snap overshoot.
Scale it with --cl-motion (0 off, 1 default, 1.5 expressive) on any ancestor. Reduced-motion preferences always switch it off.
API reference
CopyButton
Takes Button's variant and size.
| Prop | Type | Default | Description |
|---|---|---|---|
| value | string | — | Text to copy. |
| label | string | — | Visible label. |
| timeout | number | 1600 | ms the check stays. |
| onCopied | (value: string) => void | — | Callback. |
Accessibility
- Icon-only buttons have an aria-label that changes to "Copied".
- A polite live region announces success.
FAQ
Also searched as: copy to clipboard button · react copy button · clipboard component · copy code button