CopyButton
Copies text to the clipboard and confirms in place: the icon swaps to a check instead of showing a toast.
Props
CopyButton extends ButtonHTMLAttributes<HTMLButtonElement> except children, value, and onCopy. The copy value can be a string or a function evaluated on click.
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | (() => string) | — | The text to copy. A function is called at click time. |
label | ReactNode | — | Text beside the icon. Omit for icon-only. |
copiedLabel | ReactNode | "Copied" | Replaces label while in the copied state. |
timeout | number | 1400 | How long the confirmation state lasts (ms). |
size | "sm" | "md" | "md" | Button size. |
variant | "ghost" | "outline" | "ghost" | Visual treatment. |
onCopy | (ok: boolean) => void | — | Called after the copy attempt. |
Examples
With label
Icon-only
Custom timeout
import { CopyButton } from "@solarius/onset";
<CopyButton value="sk_live_abc123" label="Copy API key" />
<CopyButton value={() => getSecret()} label="Copy" />