Primitive / Atombeta

Copy Button

Raised pill that copies text, announces the result and resets after 1.6 seconds.

Edit on GitHub

pnpm dlx @glinui/cli@latest add copy-button

API key

Use this key to authenticate server requests. Treat it like a password.

glin_live_4f9a7c21b6e8

pnpm add @glinui/ui

Installation

Install from

pnpm dlx @glinui/cli@latest add copy-button

Prefer the package?

Usage

Icon only

<CopyButton value="sk_live_123" iconOnly label="Copy key" />

Variants

<CopyButton value="x" variant="glinr" />
<CopyButton value="x" variant="solid" />
<CopyButton value="x" variant="plain" />
<CopyButton value="x" variant="soft" />
<CopyButton value="x" variant="outline" />
<CopyButton value="x" variant="ghost" />

Glass (opt-in)

<CopyButton value="x" variant="glass" />

Accessibility

Native button; the result is announced through a polite live region.
data-copied reflects state for styling hooks.
Falls back to document.execCommand when the Clipboard API is unavailable.

Keyboard Interactions

Key	Action
`Enter / Space`	Copies the text.

ARIA Attributes

role=status live region with the copied label
aria-label when iconOnly

Reduced Motion

Only a 1px press translate, removed under reduced motion.

Affected properties

press translate

API Reference

Prop	Type	Required	Default	Description
`value`	`string`	No	`""`	Text to copy.
`getValue`	`() => string`	No	`-`	Lazily resolve the text. Wins over value.
`onCopy`	`(value: string) => void`	No	`-`	Called after a successful copy. Use for analytics.
`label`	`string`	No	`Copy`	Idle label.
`copiedLabel`	`string`	No	`Copied`	Label shown and announced after copying.
`resetMs`	`number`	No	`1600`	Delay before returning to idle.
`iconOnly`	`boolean`	No	`false`	Hide the text label and keep an accessible name.
`variant`	`"glinr" \| "solid" \| "plain" \| "soft" \| "outline" \| "ghost" \| "gradient" \| "glass"`	-	`ambient (glinr)`	Surface from the shared Button vocabulary.
`tone`	`"neutral" \| "accent" \| "success" \| "warning" \| "danger" \| "info"`	-	`neutral`	Colour axis.
`size`	`"xs" \| "sm" \| "md" \| "lg" \| "icon"`	-	`xs`	Button size. iconOnly defaults to a compact square.

Source

Import directly from the package or browse the source on GitHub. Click any file to view it.

Import

import { CopyButton } from "@glinui/ui"

Source Files

copy-button.tsx

Dependencies

@glinui/ui@phosphor-icons/react

Generated API Snapshot

Beta

Auto-extracted from TypeScript source in packages/ui/src/components/copy-button.tsx. This section is in beta and may lag behind hand-curated docs. Regenerate with pnpm --filter @glinui/docs api:generate.

Generated: 2026-10-08T01:41:21.546Z · Full index: /docs/api-metadata

Primary Props Type

CopyButtonProps

`CopyButtonProps`

Prop	Type	Required	Default	Description
`copiedLabel`	`string`	No	`"Copied"`	Label shown (and announced) after copying.
`getValue`	`() => string`	No	`-`	Lazily resolve the text to copy (wins over `value`).
`iconOnly`	`boolean`	No	`false`	Hide the text label and keep only the icon (label stays as the accessible name).
`label`	`string`	No	`"Copy"`	Idle label.
`onCopy`	`(value: string) => void`	No	`-`	Called after a successful copy with the copied text (analytics hook).
`resetMs`	`number`	No	`1600`	Milliseconds before returning to the idle state.
`value`	`string`	No	`""`	Static text to copy.