Copy Button
A button component for copying text to clipboard with visual feedback
The copy button copies a string to the clipboard and animates to a checkmark to confirm. If the copy fails (for example, when clipboard permissions are blocked), it shows an error icon instead. Use it beside code snippets, API keys, share links, or any value a user needs to grab.
For a full multi-line code sample with its own copy control, use CodeBlock instead.
Preview
Installation
Usage
Examples
Custom Icons
Pass copyIcon and checkIcon to replace the default copy and confirmation icons.
With Toast
Set toast to show an anchored toast above the button on a successful copy. Pass an options object to customize the description, side, duration, or any other anchored toast option.
Accessibility
The button is icon-only, so it ships with a built-in aria-label that switches from "Copy to clipboard" to "Copied to clipboard" when the copy succeeds, or "Copy failed" when it does not. Do not pass children; if you need a different label, override aria-label.
API Reference
The CopyButton component extends the Button component with clipboard functionality. All Button props are supported except size, variant, onClick, and children which are controlled internally.
Props
CopyButton
Button that copies text to clipboard with visual feedback. Extends the Button component.