Copy Button
A serene copy button with character morphing, drawn checkmark, calm spring physics, and reserved layout width.
Installation
npx viora-ui@latest add copy-buttonpnpm dlx viora-ui@latest add copy-buttonnpx viora-ui@latest add copy-buttonbunx viora-ui@latest add copy-buttonStep 1: Install Dependencies
npm install motion lucide-reactStep 2: Copy the Source Code
Copy copy-button.tsx into your @/components/arc/copy-button/ directory.
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>
);
}Props
| 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