Copy to Clipboard

Copy with confirmation. Free, MIT · Basics › Buttons

Installation

npx valyro-cli@latest add copy-to-clipboard

npx shadcn@latest add https://valyro.xyz/r/copy-to-clipboard.json

npm install valyro-ui

import 'valyro-ui/styles.css';
import { CopyToClipboard } from 'valyro-ui';

Props

Prop	Type	Default
`value` *	`string`		Text written to the clipboard.
`iconOnly`	`boolean`	`false`	Square icon button; the label becomes its accessible name.
`label`	`string`	`'Copy'`	Button text before copying; the accessible name when `iconOnly`.
`copiedLabel`	`string`	`'Copied!'`	Replaces the label after a successful copy and is announced, until `timeout` resets it.
`errorLabel`	`string`	`'Copy failed'`	Replaces the label after a failed copy; announced together with the error message.
`animation`	`'default' \| 'spring'`	`'default'`	`spring`: the icons swap with a spin and a bounce, and the label slides between states. Combine with `hoverScale` / `tapScale` for the full micro-interaction. `default`: the theme's pop.
`variant`	`'primary' \| 'secondary' \| 'ghost' \| 'accent' \| 'danger' \| 'link'`		Solid `primary`/`accent`/`danger` fill, outlined `secondary`, transparent `ghost`, or unpadded text `link`.
`size`	`'sm' \| 'md' \| 'lg'`		Control height, padding and text size.
`loading`	`boolean`		Shows a spinner and blocks activation without changing the button's width: the spinner takes the left icon's place, or covers the label when there is no left icon. The button stays focusable and gets aria-busy.
`fullWidth`	`boolean`		Stretch to the full width of the container.
`pill`	`boolean`		Fully rounded ends, regardless of theme.
`hoverScale`	`number`		Scale under a hovering mouse, e.g. `1.05`; it springs back with a slight bounce. Off by default (the theme's own hover). Skipped on touch and under reduced motion.
`tapScale`	`number`		Scale while pressed, e.g. `0.95`, instead of the theme's press transform; springs back on release.
`timeout`	`number`		How long the copied/error state lasts, ms.
`onCopy`	`(text: string) => void`
`onError`	`(error: Error) => void`

Related components

Button — Buttons in every variant
Icon Button — Icon-only button
Button Group — Grouped buttons
Badge — Status labels and tags
Avatar — User avatars
Tooltip — Hover and focus hints
Separator — Dividers
Skeleton — Loading placeholders
Spinner — Loading indicator
Progress Bar — Progress bars

Previous: Button Group · Next: Badge · All Basics