Copy Button

An icon button that copies text to the clipboard, morphs its icon from a copy glyph to a checkmark, and anchors a confirmation toast to itself — built on Tooltip and the anchored Toast. It brings its own toast manager and provider internally, so it drops in anywhere with zero setup.

Last updated January 1, 1980

Overview

Installation

$ pnpm dlx shadcn@latest add @persianlabsui/copy-button

Usage

No provider to wrap — the copy confirmation is a toast anchored to the button itself (not a corner-stacked one), and CopyButton manages that internally by default.

import { CopyButton } from "@/components/ui/copy-button"
 
export function Example() {
  return <CopyButton text="https://persian-labs.ir" label="Copy link" />
}

Examples

With Text

It's a regular Button under the hood, so any variant, size, or children work — pass a label as children alongside the icon.

RTL

The default label is already Persian ("کپی"), and the anchored confirmation toast mirrors correctly since it goes through the same direction-aware AnchoredToastProvider as Toast.

API Reference

CopyButton

Prop	Type	Default	Description
text	string \| (() => string)	—	The text copied to the clipboard on click. Pass a function to compute it lazily at click time.
label	string	"کپی"	Accessible label and tooltip content. Also used as the button's aria-label.
toastManager	ReturnType<typeof Toast.createToastManager>	undefined	By default CopyButton creates its own manager and wraps itself in an AnchoredToastProvider — no setup required. Pass your app's own manager (with a matching ancestor AnchoredToastProvider) only if this button's confirmation should share state with other anchored toasts on the page.
side	"top" \| "bottom" \| "left" \| "right" \| "inline-start" \| "inline-end"	"top"	Which side of the button the confirmation toast anchors to.
onCopySuccess	(text: string) => void	undefined	Called after a successful copy, in addition to the toast.
idleIcon	ReactNode	<CopyIcon />	Icon shown before copying.
doneIcon	ReactNode	<CheckIcon />	Icon shown briefly after a successful copy.
...props	ComponentProps<typeof Button>	—	Any other Button prop — variant, size, className, children, etc.

Edit this page on GitHub

PreviousContext Menu NextData Table