Skip to content
GetUrUI

Copy Button

.md

Icon button that copies a value to the clipboard and morphs its glyph into a check with a scale-and-blur swap.

copyclipboardcodeinstallicon button

Installation

$npx shadcn@latest add @geturui/copy-button
Download source (.zip)

Usage

usage.tsx
1import { CopyButton } from "@/components/ui/copy-button";
2
3export function InstallCommand() {
4  const command = "npx shadcn@latest add https://geturui.dev/r/copy-button.json";
5  return (
6    <div className="flex items-center gap-3 rounded-lg bg-surface-sunken py-2 pl-4 pr-2">
7      <code className="flex-1 truncate font-mono text-sm">{command}</code>
8      <CopyButton value={command} label="Copy install command" />
9    </div>
10  );
11}

Props

PropTypeDefaultDescription
value*string—Text written to the clipboard.
labelstring"Copy"Accessible name before copying.
onCopy(value: string) => void—Called after each click, even if the clipboard is blocked.
classNamestring—Classes for the button.

Accessibility

  • A real <button> whose accessible name switches from the label to "Copied" for 1.6s.
  • Still gives visual feedback when the clipboard API is blocked; use onCopy to announce status in your own live region.
  • Visible focus ring and a 32px hit area.