Copy Button
newCopies text to the clipboard and confirms it.
npx shadcn@latest add @blank/copy-buttonInstallation
npx shadcn@latest add @blank/copy-buttonUsage
import { CopyButton } from "@/components/ui/copy-button"<CopyButton value="npx shadcn@latest add @blank/button" />A successful copy is confirmed three ways: the icon turns into a check, the
tooltip says "Copied", and a polite live region announces it for screen
readers. If the clipboard refuses, the button shows an error state instead of
pretending. Pass onCopy to do the copying yourself — a rejected promise
lands in the same error state.
Examples
With a label
Children render beside the icon. label still names the button in the
tooltip.
Props
Every Button prop, plus:
| Prop | Type | Default |
|---|---|---|
value | string | — |
onCopy | () => void | Promise<void> | — |
timeout | number | 2000 |
label | string | "Copy" |
copiedLabel | string | "Copied" |
errorLabel | string | "Copy failed" |
tooltip | boolean | true |