Use a secure browser context for clipboard access. The icon confirms a successful copy; onCopy runs after the clipboard write.
Installation
$pnpm dlx shadcn@latest add https://your-docs-domain.com/r/copy-button.json
Usage
"use client"
import { CopyButton } from "@/components/ui/copy-button"
export default function Demo() {
return (
<div className="flex items-center gap-4 rounded-xl border p-5">
<code>hello@afterglow.ui</code>
<CopyButton value="hello@afterglow.ui" tooltip />
</div>
)
}
API
| Property | Type | Description |
|---|
value | string | The value option. |
timeout? | number | The timeout option. |
showLabel? | boolean | The show label option. |
variant? | "soft" | "ghost" | soft sits on a faint fill; ghost has no fill until you hover it |
tooltip? | boolean | a small "Copied" bubble pops up above the button |
onCopy? | (value: string) => void | The on copy option. |
Standard element attributes are supported where the props extend a React element type. Required properties appear without a question mark.
Dependencies
motion
Its icons come from animate-ui and install with the component.
Shared local files are included in the Code panel. See project setup for Tailwind, path aliases, and theme tokens.