Copy Button
A minimal button that copies any text to the clipboard with a smooth icon transition.
Features
- Copies static strings or dynamically reads from a DOM ref at click time.
- Smooth icon swap from copy to check with a 2s reset.
- Tooltip confirms the action — disappears after copy.
- Fully accessible — aria-label updates on state change.
Installation
1
Run the shadcn CLI command
npx shadcn@latest add @lalit/copy-buttonnpx shadcn@latest add @lalit/copy-buttonpnpm dlx shadcn@latest add @lalit/copy-buttonpnpm dlx shadcn@latest add @lalit/copy-buttonnpx shadcn@latest add @lalit/copy-buttonnpx shadcn@latest add @lalit/copy-buttonbunx shadcn@latest add @lalit/copy-buttonbunx shadcn@latest add @lalit/copy-buttonThis installs the component directly. Update import paths to match your setup.
Usage
import { CopyButton } from "@/components/ui/copy-button"
<CopyButton value="Hello world" />
const ref = useRef<HTMLPreElement>(null)
<CopyButton getValue={() => ref.current?.textContent ?? ""} />import { CopyButton } from "@/components/ui/copy-button"
<CopyButton value="Hello world" />
const ref = useRef<HTMLPreElement>(null)
<CopyButton getValue={() => ref.current?.textContent ?? ""} />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | — | Static text to copy to clipboard. |
getValue | () => string | — | Dynamic getter — called at click time. |
label | string | "Copy" | Accessible label before copy. |
copiedLabel | string | "Copied" | Accessible label after copy. |
duration | number | 2000 | How long to show copied state in ms. |
size | number | 14 | Icon size in px. |
className | string | — | Additional classes for the button. |