Loading…

Copy Button

beta

Copies a value to the clipboard and morphs its icon and label into a confirmation that reverts on its own.

Forms
1 file
1 npm package
Accessibility notes

Playground

Installation

The CLI installs button as well, because this component imports it. Or copy everything in by hand.

$pnpm dlx @dowel-ui/cli add copy-button

npm packages installed: class-variance-authority.

Usage

Imported from your own path — the file is yours, so this is an import like any other.

app/page.tsxTSX

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

Examples

Every example the tests run, live and operable, side by side.

Default
Gallery
Icon Only
Custom Icons
Value From Function

API

Generated from the component's own types, so a prop cannot appear here without existing.

<CopyButton>

Prop	Type	Default
`copiedAnnouncement` Announced to assistive technology on success. Defaults to "Copied", or to a string `copiedLabel` on an icon-only button, where it is never shown.	`string`	—
`copiedIcon` The confirmation icon. Defaults to a check.	`ReactNode`	—
`copiedLabel` Replaces the label while the confirmation shows. On an icon-only button a string `copiedLabel` is announced instead, as Code Block's original did.	`ReactNode`	`"Copied"`
`errorAnnouncement` Announced to assistive technology when the clipboard refuses the write.	`string`	`"Copy failed"`
`getText` Reads the text to copy at the moment of the click.	`() => string`	—
`icon` The resting icon. Defaults to a copy glyph.	`ReactNode`	—
`label` The accessible name of an icon-only button.	`string`	—
`onCopied` Called with the copied text once the clipboard write has resolved.	`(text: string) => void`	—
`onCopyError` Called when the clipboard is unavailable or refuses the write.	`(error: unknown) => void`	—
`resetAfter` How long the confirmation stays, in milliseconds.	`number`	—
`timeout` How long the confirmation stays, in milliseconds (default 2000). A behaviour timer, not a duration.	`number`	—
`tone`	`"current" \| "primary" \| "success" \| "warning" \| "destructive" \| "info"`	`"current"`
`value` What goes on the clipboard. Pass a function to read it at the moment of the click — the current contents of an editor, say — rather than at render. Required unless the deprecated `getText` is given.	`string \| (() => string)`	—

Accessibility

The confirmation is announced through a polite role="status" region rendered beside the button, so it never becomes part of the button's name. Only the visible label is exposed; the hidden one is aria-hidden. Icon-only buttons are named "Copy" unless given an aria-label. A refused clipboard write is announced as a failure and never shows the check. The button is never disabled while confirming, so keyboard focus stays put.

Quality

Measured from the source and its tests at build time.

All scores

8/8

checks passed

Tested — passes
axe assertion — passes
Keyboard tested — does not apply
Storybook examples — passes
Accessibility documented — passes
Semantic tokens only — passes
Motion from tokens — passes
className merged — passes
Visible focus — does not apply
No fixed widths — passes

Used in

Whole screens assembled from this component. Installing one brings this and everything else it needs with it.

Hero flow field

Prop

Type

Default

copiedAnnouncement

Announced to assistive technology on success. Defaults to "Copied", or to a string copiedLabel on an icon-only button, where it is never shown.

string

—

copiedIcon

The confirmation icon. Defaults to a check.

ReactNode

—

copiedLabel

Replaces the label while the confirmation shows. On an icon-only button a string copiedLabel is announced instead, as Code Block's original did.

ReactNode

"Copied"

errorAnnouncement

Announced to assistive technology when the clipboard refuses the write.

string

"Copy failed"

getText

Reads the text to copy at the moment of the click.

() => string

—

icon

The resting icon. Defaults to a copy glyph.

ReactNode

—

label

The accessible name of an icon-only button.

string

—

onCopied

Called with the copied text once the clipboard write has resolved.

(text: string) => void

—

onCopyError

Called when the clipboard is unavailable or refuses the write.

(error: unknown) => void

—

resetAfter

How long the confirmation stays, in milliseconds.

number

—

timeout

How long the confirmation stays, in milliseconds (default 2000). A behaviour timer, not a duration.

number

—

tone

"current"

value

What goes on the clipboard. Pass a function to read it at the moment of the click — the current contents of an editor, say — rather than at render. Required unless the deprecated getText is given.

string | (() => string)

—