Copies a value in one tag: an icon button with a tooltip, or a button with a label, that turns into a check and says "Copied".
$ pnpm dlx shadcn@latest add https://dashral.com/r/copy-button.jsonInstallation
$ pnpm dlx shadcn@latest add https://dashral.com/r/copy-button.jsonAdds the component, the components it builds on, its npm packages and the theme tokens it uses. Using Dashral often? Add the registry to components.json once:
{
"registries": {
"@dashral": "https://dashral.com/r/{name}.json"
}
}Then add components by name:
$ pnpm dlx shadcn@latest add @dashral/copy-buttonUsage
import { CopyButton } from "@/components/dashral/copy-button"
<CopyButton value="sk_live_51H8xK2" tooltip="Copy API key" />Examples
In a field
In a read-only Input's suffix, for an API key or a URL; tooltip names what it copies.
Install command
Beside a line of code or a shell command.
API reference
CopyButton
Also takes every prop of Button(opens in a new tab).
| Prop | Type | Default |
|---|---|---|
value | stringThe text it copies. Required. | — |
label | stringA word beside the icon, e.g. "Copy link"; it reads "Copied" for a moment after. Without it, an icon button with a tooltip. | — |
tooltip | stringThe icon button's tooltip and accessible name before copying, e.g. "Copy API key". | "Copy" |
variant | "solid" | "soft" | "outline" | "ghost" | "link"How much it stands out, as on Button. | "ghost" |
color | "primary" | "neutral" | "info" | "success" | "warning" | "destructive" | "highlight"What it means, as on Button. A ghost one without a color is muted until hovered. | — |
size | "sm" | "default" | "icon-sm" | "icon"Its size, as on Button. | "sm" with a label, "icon-sm" without |
timeout | numberMilliseconds the check (or the failure) stays before it's ready again. | 2000 |
onCopy | (value: string) => voidRuns after a successful copy, e.g. to show a toast. | — |
className | stringExtra classes, merged with cn() so yours win. | — |
Keyboard
| Keys | Action |
|---|---|
| EnterorSpace | Copy |
| Tab | Focusing an icon button shows its tooltip |
Accessibility
- An icon button is named by its tooltip text ("Copy", then "Copied"); a labelled one by its label.
- The result ("Copied" or "Couldn't copy") is announced from a live region outside the button, so it isn't read twice as part of the name.
- Its words come from the kit's messages (copy, copied, copyFailed), so a LocaleProvider translates them.
Motion
- The copy icon blurs and shrinks into a check (or an × if the browser refuses) and back; with reduced motion it only fades.