CopyButton

Copy to clipboard with confirmation and error handling; a stable accessible name.

Installation

Run it from the root of a project already set up with zunoui init.

$ npx zunoui@latest add copy-button

What add copy-button installs alongside the component. The CLI skips any you already have in a compatible version.

1 examples · 1 component

Confirms the copy and reverts after a few seconds.

Forwards props and ref to the container element; it only adds composition utilities.

Prop	Type	Default
`value` Text copied to the clipboard.	`string`	—
`label` Stable accessible name of the button.	`string`	`"Copy"`
`...ButtonProps` Accepts variant, size and the rest of the Button props.	`—`	—

The states that apply to this component and their visual treatment.

State	Treatment
Rest	Button with its stable aria-label.
Copied	Confirms with an icon and role="status" text; reverts after a few seconds.
Error	If the clipboard fails, it says so with an icon and text.

The aria-label stays stable; the result is announced with role="status" text.

The icon changes to confirmation or error, but the state is also communicated through text.