Copy Button

Copies a text to the clipboard; the icon turns into a check mark.

Dependencieslucide-react
npx shadcn@latest add @balick/copy-button

Installation#

pnpm dlx shadcn@latest add @balick/copy-button

Or pass the full URL: https://ui.balick.me/r/copy-button.json

Usage#

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

export function Command() {
  return <CopyButton value="npm install motion" label="Copy command" />
}

Props#

PropTypeDefault
value

Text written to the clipboard. Required.

string—
label

Accessible name of the button.

string"Copy"
timeout

How long the check mark stays, in milliseconds.

number2000
onCopy

Called once the text is copied.

() => void—