A serene copy button with character morphing, drawn checkmark, calm spring physics, and reserved layout width.
Installation
Usage
import { CopyButton } from "@/components/arc/copy-button/copy-button";
export function ApiKeyRow({ apiKey }: { apiKey: string }) {
return (
<div className="flex items-center gap-2">
<code>{apiKey}</code>
<CopyButton value={apiKey} label="Copy key" iconOnly />
</div>
);
}API Reference
CopyButton
| Prop | Type | Default | Description |
|---|---|---|---|
| value | string | — | Text to copy to clipboard. |
| label | string | "Copy" | Accessible label text. |
| iconOnly | boolean | false | Whether to display only the icon without text. |
| variant | "outline" | "plain" | "outline" | Visual style of the button. |
| disabled | boolean | false | Disables interaction. |
| onCopied | () => void | — | Callback fired after successful copy. |
Built by Otis
Last updated: 10/12/2026