Copy Button
Copies a string to the clipboard and confirms it. The check pops in, then the button returns to rest.
ActionsClient componentlucide-react
Preview
npx shadcn@latest add @duck/copy-buttonInstallation
The CLI writes the source into your project and pulls in whatever it depends on.
$
pnpm dlx shadcn@latest add @duck/copy-buttonPulls in @duck/theme. Already installed items are skipped.
Usage
import { CopyButton } from "@/components/ui/copy-button"The file lands in components/ui/copy-button.tsx and belongs to you from that point on. Edit it in place rather than wrapping it.
Props
Everything not listed here is forwarded to the underlying element.
| Prop | Type | Default | Description |
|---|---|---|---|
| value | string | - | The string written to the clipboard. |
| label | string | "Copy" | Accessible label at rest. |
| copiedLabel | string | "Copied" | Accessible label after a successful copy. |
| onCopied | (value: string) => void | - | Fires after the clipboard write resolves. |