Copy Button
A copy-to-clipboard button with success feedback.
npx shadcn add copy-buttonInstallation
Usage
Copy something, show that it worked, go back to normal. Small enough to keep rewriting, which is exactly why it should be installed once.
import { CopyButton } from "@/components/ui/copy-button";
<CopyButton value="npx shadcn add copy-button" />;The icon swaps to a check for two seconds, then returns. If the clipboard write fails — an insecure origin, a denied permission, an old browser — the button turns destructive and says so, instead of pretending the copy happened.
Deferred values
Pass a function when the value is expensive or only known at click time, such as a token you would rather not hold in state:
<CopyButton value={() => generateApiKey()} showLabel copyLabel="Copy key" />It may return a promise; the success state waits for it.
Props
| Prop | Description |
|---|---|
value | The text, or a function resolving to it. |
showLabel | Render the label next to the icon. Icon-only by default. |
copyLabel / copiedLabel / errorLabel | Override the three states. |
resetDelay | How long the success state lasts. Defaults to 2000. |
onCopied / onCopyError | Side effects — analytics, a toast. |
Button props pass through, so variant, size, and className behave as usual.
Accessibility
Icon-only buttons take their accessible name from the current state, so the button is "Copy" before
and "Copied" after. The state change is also written into a visually hidden aria-live region —
without it the swap from one icon to another is silent, and a screen reader user has no way to know
the copy succeeded.