How to build an accessible CopyButton in React

Renders a native <button> so Enter/Space, focus, and role come from the platform; the aria-label swaps between copy and copied labels to announce the state change to screen readers since the icon swap alone is silent, and the SVG icons are aria-hidden

When to use a CopyButton

• Letting users copy a short value to the clipboard — install commands, API keys, tokens, share links
• Inline next to code snippets or read-only fields where copying is the primary affordance

When not to use it

• Triggering a general action — use Button
• Copying content the user can already select and edit freely where a copy affordance adds nothing

Keyboard interactions

Role button, verified at WCAG 2.2-AA.

• Enter
• Space

Common mistakes

Avoid: Wiring CopyButton to perform a non-clipboard action via onClick

Prefer: Use Button for arbitrary actions; CopyButton always writes value to the clipboard

Its click handler is fixed to navigator.clipboard.writeText(value) plus copied feedback — overloading it breaks user expectation

Example

<CopyButton value="npx cascivo add button" />

See the full CopyButton reference →