Component
CopyButton
A standalone copy-to-clipboard button with smooth icon swap animation. Clipboard SVG draws in idle, checkmark path draws on copy. Works standalone or inside CodePreview.
Usage
npm install @carabine/uipnpm add @carabine/uiyarn add @carabine/uinpm i @carabine/uiInside CodePreview
CodePreview.CopyButton is now powered by CopyButton internally — the same animation, zero duplication.
npm install @carabine/uiAPI Reference
| Prop | Type | Default | Description |
|---|---|---|---|
value* | string | — | Text written to the clipboard on click. |
duration | number | 2000 | How long (ms) to show the "copied" checkmark before reverting. |
onCopy | (value: string) => void | — | Callback fired after a successful copy, receives the copied value. |
unstyled | boolean | false | Strip all default styles — no data-cui-* attributes attached. |
CSS states
/* Idle — default ghost button */
[data-cui-copy-button][data-state='idle'] { }
/* Copied — green tint for 2 s */
[data-cui-copy-button][data-state='copied'] { }
/* Override the size */
[data-cui-copy-button] {
--cb-size: 28px;
--cb-radius: 5px;
}