CopyButton
A reusable copy action with Clipboard API fallback and accessible status announcements.
Contract
The control reports idle, copied, or unavailable through data-copy-status. The latest copy attempt wins, and its result resets to idle after two seconds by default.
Install
pnpm add @tinyrack/uiScroll inside the code area to read long lines.
Styles
@import '@tinyrack/ui/components/copy-button.css';Scroll inside the code area to read long lines.
Imports
import { TRCopyButton } from '@tinyrack/ui/components/copy-button';Scroll inside the code area to read long lines.
Playground
Usage
Examples
Inherited Button combinations permalink
Appearance, variant, uiSize, and labels compose across Button styles. Idle and copied labels share a stable footprint; the longer unavailable label appears only on failure.
API
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | required | Text passed to the Clipboard API or the offscreen selection fallback. |
idleLabel | string | "Copy" | Visible and accessible label before copying. |
copiedLabel | string | "Copied" | Success label and polite announcement. |
unavailableLabel | string | "Copy unavailable" | Failure label and polite announcement when both copy strategies fail. |
onStatusChange | (status) => void | — | Receives copied or unavailable, then idle after reset. Stale and unmounted attempts do not emit. |
resetDelay | number | 2000 | Milliseconds before a completed result resets to idle. |
All TRButton props except children are inherited, including refs, native events, disabled, loading, loadingLabel, appearance, variant, and uiSize. Calling preventDefault() in onClick cancels the copy attempt.