Copy Button

<CopyButton value="pnpm dlx shadcn add card" />

Installation

$ npx shadcn@latest add @constella/copy-button

Usage

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

<CopyButton value={code} />

The icon swaps to a tick with a Swap Icon, holds for 1.5s, and swaps back. Its accessible name doesn't change, and a status region announces "Copied" to screen readers.

HTML

Pass html with the same content as markup, and the clipboard carries both. A target that takes HTML, like a spreadsheet or a doc, pastes it rich; anywhere else pastes the text.

<CopyButton html={() => tableHtml(rows)} value={() => tableTsv(rows)} />

Variant

CopyButton is a Button: pass its variant and size. It's ghost at icon-sm by default.

<CopyButton value="Hello" variant="outline" />

Label

Pass children for a visible label after the icon. It names the button, and the size defaults to sm.

<CopyButton value="Hello" variant="outline">  Copy</CopyButton>

API Reference