Preview
Props
Install
npx shadcn@latest add @evilbuttons/copy-buttonUsage
import { CopyButton } from "@/components/evil-buttons/copy-button";
export function ButtonDemo() {
return (
<CopyButton
value="npm install evil-buttons"
onCopy={(text) => console.log("Copied", text)}
/>
);
}Variants
Custom labels
Name the action after what it copies.
Secret value
Turn off showValue when the text shouldn't be flashed on screen, like an API key.
Props
The component spreads native button props except value and onCopy, and forwards its ref to the button.
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | - | Text written to the clipboard. Required. |
timeout | number | 1500 | Milliseconds before the button returns to idle. |
copyLabel | React.ReactNode | "Copy" | Label shown before copying. |
copiedLabel | React.ReactNode | "Copied" | Label shown after a successful copy. |
errorLabel | React.ReactNode | "Failed" | Label shown when the clipboard write fails. |
showValue | boolean | true | Show the copied text in a small chip above the button after copying. |
onCopy | (value: string) => void | - | Fired with the copied text after a successful write. |
className | string | - | Extra classes passed to the button. |
Good to know
- Falls back to
execCommandon plain HTTP. - Never changes width between states.
- Announces copy success or failure to screen readers.