Copy Button

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

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#

Prop	Type	Default	Description
`value` Text written to the clipboard. Required.	`string`	—	Text written to the clipboard. Required.
`label` Accessible name of the button.	`string`	"Copy"	Accessible name of the button.
`timeout` How long the check mark stays, in milliseconds.	`number`	2000	How long the check mark stays, in milliseconds.
`onCopy` Called once the text is copied.	`() => void`	—	Called once the text is copied.