What it does
Copy button wraps the clipboard write in a single accessible control with built-in idle and copied states. It uses the library's useClipboard hook, so the copied flag is managed for you and resets on the timeout you choose.
The static entry swaps the icon instantly, while the animated entry transitions the clipboard and checkmark icons through a spring scale and rotation.
Composition and API
Import CopyButton from the copy-button entrypoint, or CopyButtonAnimated from copy-button/animated for the motion variant. Set value with the text to copy, and tune the control with timeout, iconOnly, label, copiedLabel, copyIcon, copiedIcon, onCopy, appearance, and size.
Common use cases
Reach for Copy button anywhere a user benefits from one-click copying: install commands and code samples in docs, API keys and tokens in dashboards, share links, invoice or order IDs in tables, and onboarding steps that surface copyable values.
Accessibility
The control renders a real button with an aria-label that reflects the current state, and a visually hidden live region announces the copied label to assistive technology. Provide your own aria-label when the surrounding context already names the value.
Next.js integration notes
Copy button is a client component because it reads navigator.clipboard in the browser. Render it inside client components or interactive islands; the clipboard write is a no-op during SSR and resolves only once the component is hydrated.
FAQ
How long does the copied state last?
It resets after the timeout prop in milliseconds (2000 by default). Pass timeout={0} to keep the copied state until the button is pressed again.
Can I show a text label instead of just an icon?
Yes. Pass iconOnly={false} to render the label and copiedLabel text next to the icon. The icon-only layout still exposes an accessible label.
How do I react to a successful copy?
Pass an onCopy callback. It receives the copied value after the clipboard write resolves, so you can toast, log analytics, or update local state.