Copy button

A React component in Beamline's Actions category, in the free sample.

Copies a value and confirms in place: the icon becomes a check and the label says Copied; a refused copy says so instead of pretending.

Use it for

Copying a key, an id, a URL or a code snippet with visible confirmation.

Not for

Copying whole documents or files (offer a download).

Anatomy

Button
icon (copy → check / x)
label
live status for screen readers

Variants

variant: secondary (default), outline, ghost, plain (alias of ghost), primary
size: sm, md, lg

States

idle
copied (1.6 s)
failed
disabled

Keyboard

Enter / Space copies

Motion

Icon feedback uses --pui-duration-feedback (existing 160ms default); reduced/none swaps instantly. Copy result timeout is reading time and does not scale with animation speed.

Props

Prop	Type	Default	Description
`value`	`string`	—
`label`	`string`	`"Copy"`
`iconOnly`	`boolean`	—
`variant`	`ButtonVariant \| "plain"`	`"secondary"`
`size`	`ButtonSize`	`"sm"`
`onCopied`	`() => void`	—
`timeout`	`number`	`1600`
`classNames`	`CopyButtonClassNames`	—
`style / ref`	`CSSProperties / native Ref`	—	native button

Dependencies

lucide-react, motion

Import

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

Get it

Copy button is part of Beamline: 190 React components and screens your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 one payment (regular $200), no subscription, a year of updates, one licence for your whole team. Copy button is in the free sample, which costs nothing. Get Beamline · Connect your agent