Primitive · CLI
Copy Button
Copy → check Button with TextMorph label + icon swap. Rare-path careful delight.
Preview
npx shadcn@latest add @atroui/copy-buttonRare-path delight — TextMorph label + icon swap. Not default on every Button.
Installation
Agent blurb — install command + no npm UI rule. For agents
npx shadcn@latest add @atroui/copy-buttonSource lands in your repo. Installation · Registry
Usage
Use for install chips, share links, and code copy — earned confirmations, not every CTA. Built on Button + TextMorph. Reduced motion swaps instantly (no tween).
tsx
import { CopyButton } from "@/components/ui/copy-button"
<CopyButton value="npx shadcn@latest add @atroui/copy-button" />
{/* Icon-only */}
<CopyButton value="atroui.com" size="icon-sm" aria-label="Copy site URL" />API reference
| Prop | Type | Default | Description |
|---|---|---|---|
| value | string | - | Clipboard payload. |
| idleLabel | string | "Copy" | Label before copy (TextMorph). |
| copiedLabel | string | "Copied" | Label after copy (TextMorph). |
| idleIcon | ReactNode | <Copy /> | Idle glyph. |
| copiedIcon | ReactNode | <Check /> | Copied glyph. |
| iconOnly | boolean | size starts with icon | Hide labels; icon AnimatePresence only. |
| timeout | number | 2000 | Ms before reset to idle. |
| onCopied | (value: string) => void | - | Fires after a successful clipboard write. |
| onCopyError | (error: unknown) => void | - | Fires if clipboard write fails. |
| variant / size | Button props | outline / sm | Pass-through Button chrome. |
Copy Button