Copy Button

Copies a value to the clipboard and confirms with a brief "Copied" state.

Import

import { CopyButton } from '@marbleui/ui'

Props

<CopyButton>

Prop	Type	Default	Description
value *required	`string \| (() => string)`	`—`
aria-label	`string`	`—`	Accessible name for an icon-only button (default "Copy"), e.g. "Copy path $.id" when several sit side by side.
className	`string`	`—`
copiedLabel	`string`	`'Copied'`
label	`string`	`—`	Visible label; omit for an icon-only button.
onCopy	`() => void`	`—`
size	`'sm' \| 'md'`	`'sm'`
variant	`'soft' \| 'outline' \| 'ghost'`	`'ghost'`

Accessibility

Keyboard interaction, focus management and ARIA semantics come from the underlying primitive: React Aria Button. Follow the primitive's docs for the full keyboard map.

Usage notes

Copies a string to the clipboard and briefly shows a confirmation. Use it next to codes, links and keys. For a general action button use Button.

<CopyButton value="npm i @marbleui/ui" />
<CopyButton value={() => buildInviteUrl()} label="Copy link" variant="outline" size="md" />

value is a string or a function evaluated at click time. onCopy fires after the write succeeds.
Without label it is icon-only and gets aria-label “Copy”, which becomes copiedLabel (“Copied” by default) afterwards. A hidden role="status" region announces the copy.
The confirmation resets after about 1.6 seconds.
It calls navigator.clipboard.writeText and shows no error state if that fails, so it needs a secure context.

Example source · show

import { CopyButton } from './copy-button'

export const styles = {
  Inline: () => (
    <div className="flex items-center gap-2 rounded-md border border-border bg-surface-muted py-1 pr-1 pl-3 font-mono text-sm text-fg">
      npm i @marbleui/ui
      <CopyButton value="npm i @marbleui/ui" />
    </div>
  ),
  Labeled: () => (
    <div className="flex gap-2">
      <CopyButton value="https://acme.com/invite/x7Kp2" label="Copy link" variant="outline" size="md" />
      <CopyButton value="sk_test_123" label="Copy key" variant="soft" size="md" />
    </div>
  ),
}

Source: packages/ui/src/copy-button/copy-button.tsx

Catalog

Category: inputs
Priority: Core
Primitive: composed
React Aria: useClipboard