CopyButton

A button that copies text to the clipboard and shows that it did.

Import

ts
import { CopyButton } from '@k8ordo/ui';

Usage

When pressed, its icon turns into a check for two seconds (an error icon if the write fails), and a live region beside it announces “Copied”. The button keeps its name.

tsx
<CopyButton value="pnpm add @k8ordo/ui" label="Copy command" size="sm" />

Icon Only

With iconOnly it becomes a transparent IconButton, and label becomes its tooltip and accessible name.

tsx
<CopyButton value={code} label="Copy code" iconOnly size="sm" />
<CopyButton value={code} label="Copy code" iconOnly />
<CopyButton value={code} label="Copy code" iconOnly size="lg" />

Building the Text on Click

value can also be a function, and it may return a Promise. It is called on the click, and the promise goes to a ClipboardItem as it is, so the write starts inside the click even when the text arrives later (Safari refuses a write that begins after an await).

tsx
'use client';

<CopyButton label="Copy link" value={() => window.location.href} />

// A promise is fine too: the write still starts inside the click
<CopyButton
  label="Copy as Markdown"
  value={async () => (await fetch(`/blog/${slug}.md`)).text()}
/>

Props

value
Type: string|(() => string | Promise<string>)
Default: -
disabled?
Type: boolean
Default: false
iconOnly?
Type: boolean
Default: false
label?
Type: string
Default: -
size?
Type: 'sm'|'md'|'lg'
Default: 'md'

Components