CopyButton Component
React copy-to-clipboard button with success feedback, secure-context fallback, sizes and label support — built with Tailwind CSS.
Import
javascript
1import { CopyButton } from "@neuctra/ui";Basic Usage
Click to copy; the icon flips to a check for 1.5s.
npm install @neuctra/uiWith Label & Callback
Props
All available props for the CopyButton component.
| Prop | Type | Default | Description |
|---|---|---|---|
| value | string | — | Text placed on the clipboard (required) |
| label | ReactNode | — | Visible label; becomes "Copied" during feedback |
| feedbackDuration | number | 1500 | How long the check state shows (ms) |
| size | "sm" | "md" | "lg" | "md" | Button scale |
| onCopied | (value: string) => void | — | Fired after a successful copy |
| iconClassName | string | — | Styles the copy/check icon. |
| labelClassName | string | — | Styles the visible label text. |
Accessibility
- aria-label switches between “Copy to clipboard” and “Copied”, with aria-live so the change is announced.
- Falls back to a hidden textarea + execCommand outside secure contexts.
- The feedback timer is cleaned up on unmount.
Frequently Asked Questions
How do I install and import the CopyButton component?
Install the @neuctra/ui package, then import it with: import { CopyButton } from "@neuctra/ui";
What variants and sizes does CopyButton support?
CopyButton supports sizes: sm, md, lg. Use the variant and size props to switch between them, or pass a className to layer on custom Tailwind CSS classes.
Is the CopyButton component accessible?
CopyButton is built with semantic HTML and standard ARIA attributes, and supports keyboard navigation and focus states out of the box, so it works well with screen readers and keyboard-only users.