Copy Button

Shadcn UI

Animate UI

Lucide

Motion

Installation

Open in

Loading component…

When to use

Use this decision tree to determine when to use the Copy Button component:

Usage

Icon Only

<CopyButton content="Hello world!" size="icon" />

With Text Label

<CopyButton content="npm install @redpanda/ui">
  Copy
</CopyButton>

Different Variants

<CopyButton content="Hello world!" variant="outline">
  Copy to clipboard
</CopyButton>

<CopyButton content="Some text" variant="default">
  Copy text
</CopyButton>

<CopyButton content="Code snippet" variant="ghost">
  Copy
</CopyButton>

When the write is refused

No permission, no secure context, no clipboard API: the button swaps to an X for delay and renders a role="alert" region beside itself. The icon span carries data-state="idle" | "copied" | "error", and an icon-only button is named "Copy" unless you pass an aria-label.

Props

Prop

Type

Credits

We take our inspiration from Shadcn UI for the button style.
We use Animate UI from imskyleen for all the animations.

Recent changes

patchv1.2.0Pin shipped dependency floors to the version we develop against. Registry items now declare ranges like `^5.1.9` (the actual installed version) instead of collapsing to `^5.0.0`, so consumers start on the known-tested baseline while caret semantics still allow any compatible release within the same major.#133
minorv1.1.0Theme docs refresh, readability pass on semantic foregrounds, and consumer-facing Base UI regression fixes.#121
minorv1.0.0Post-Base-UI polish. Public API unchanged.#116
majorv1.0.0Migrate every Radix-based primitive to `@base-ui/react@^1.4.0` (Base UI).#114
minorv0.3.0Add theme-provider component to the registry with documentation and tests. Includes playground type improvements (export RegistryItem, remove as-const boilerplate) and docs site dark mode border color fix.#109

See full history →