Copy Button

An icon button that copies text to the clipboard, morphs its icon from a copy glyph to a checkmark (or an error state), 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 August 9, 2026

Overview

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

Installation

$ npx shadcn@latest add https://ui.persian-labs.ir/r/copy-button.json

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" />
}

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.

"use client"
 
import { CopyButton } from "@/components/ui/copy-button"
 
export function CopyButtonWithTextExample() {
  return (
    <CopyButton
      text="npx shadcn@latest add https://ui.persian-labs.ir/r/copy-button.json"
      label="Copy install command"
      variant="outline"
      size="default"
      className="w-fit"
    >
      Copy command
    </CopyButton>
  )
}

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.

"use client"
 
import { CopyButton } from "@/components/ui/copy-button"
 
export function CopyButtonRtlExample() {
  return (
    <CopyButton
      text="۰۹۱۲۳۴۵۶۷۸۹"
      variant="outline"
      size="default"
      className="w-fit"
    >
      کپی شماره
    </CopyButton>
  )
}

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.
onCopyError	(error: Error) => void	undefined	Called if the copy fails, in addition to the toast.
idleIcon	ReactNode	<CopyIcon />	Icon shown before copying.
doneIcon	ReactNode	<CheckIcon />	Icon shown briefly after a successful copy.
errorIcon	ReactNode	<XCircleIcon />	Icon shown briefly if the copy fails.
...props	ComponentProps<typeof Button>	—	Any other Button prop — variant, size, className, children, etc.

Edit this page on GitHub

PreviousContext Menu NextDialog