Copy Button

FreeNew

A button that copies text to the clipboard and briefly shows a check mark.

The full demo as documented.

Customize

Derived from this item’s props table, because it declares no controls of its own. Changes drive the preview live.

value

label

copiedLabel

ariaLabel

variant

size

resetAfter1800


pnpm dlx shadcn@latest add https://ui.tealmac.com/r/copy-button.json

import { CopyButton } from "@/components/ui/copy-button"

<CopyButton value="pnpm add @acme/ui" label="Copy" />

Prop	Type	Default	Description
`value`	`string`	-	Text to copy.
`getValue`	`() => string \| Promise<string>`	-	Reads the text at click time instead of `value`.
`label`	`string`	-	Visible label next to the icon. Leave out for an icon-only button.
`copiedLabel`	`string`	`Copied`	Label shown after a successful copy.
`ariaLabel`	`string`	`Copy to clipboard`	Accessible name of an icon-only button.
`variant`	`"ghost" \| "outline" \| "solid"`	`ghost`	Visual style.
`size`	`"sm" \| "default" \| "lg"`	`default`	Button size.
`resetAfter`	`number`	`1800`	How long the confirmation stays, in milliseconds.
`onCopied`	`(text: string) => void`	-	Called with the copied text.
`onError`	`() => void`	-	Called when copying fails.

Also accepts all <button> props except value, onCopy and children.

When the async Clipboard API is blocked (insecure origins, some iframes) it falls back to a hidden textarea and document.execCommand("copy").
The result is announced through a polite live region.
copyText(text) and copyButtonVariants are exported too.

Guide and examples


pnpm dlx shadcn@latest add https://ui.tealmac.com/r/copy-button.json

import { CopyButton } from "@/components/ui/copy-button"

<CopyButton value="pnpm add @acme/ui" label="Copy" />

Prop	Type	Default	Description
`value`	`string`	-	Text to copy.
`getValue`	`() => string \| Promise<string>`	-	Reads the text at click time instead of `value`.
`label`	`string`	-	Visible label next to the icon. Leave out for an icon-only button.
`copiedLabel`	`string`	`Copied`	Label shown after a successful copy.
`ariaLabel`	`string`	`Copy to clipboard`	Accessible name of an icon-only button.
`variant`	`"ghost" \| "outline" \| "solid"`	`ghost`	Visual style.
`size`	`"sm" \| "default" \| "lg"`	`default`	Button size.
`resetAfter`	`number`	`1800`	How long the confirmation stays, in milliseconds.
`onCopied`	`(text: string) => void`	-	Called with the copied text.
`onError`	`() => void`	-	Called when copying fails.

Also accepts all <button> props except value, onCopy and children.

When the async Clipboard API is blocked (insecure origins, some iframes) it falls back to a hidden textarea and document.execCommand("copy").
The result is announced through a polite live region.
copyText(text) and copyButtonVariants are exported too.