Copy button
A copy-to-clipboard button that confirms with a glyph swap and a self-drawing check.
API reference
Components
<CopyButton />
A copy-to-clipboard button that writes value on click, confirms with a clipboard-to-check swap and an aria-live announcement, then reverts after resetMs. Owns its own confirm/reset state; observe copies via onCopy. Pick a shape with variant; time nothing yourself (the theme does).
value
The text written to the clipboard when the button is clicked.
variant?
The button shape. "label" (default) is a primary-fill pill with visible text; "icon" is a compact muted-ghost glyph-only button.
children?
The visible resting label, "label" variant only (ignored by "icon"). Default "Copy".
copiedText?
The visible confirmed label shown after a copy, "label" variant only. Default "Copied".
label?
The button's accessible name (aria-label) while resting. Essential for the "icon" variant, which has no visible text. Default "Copy to clipboard".
copiedLabel?
The accessible name after a copy, also announced via the aria-live region. Default "Copied to clipboard".
resetMs?
How long the confirmed state holds, in milliseconds, before it reverts to resting. Default 2000.
onCopy?
Fired at the copy beat, after the clipboard write is attempted, with the copied value. Use it to tick your own analytics or toast; the button needs nothing back.
disabled?
Disable the button (skips the copy and the swap).
className?
Merged onto the button element.
ref?
Ref to the underlying <button>, React 19 ref-as-prop style, for consumers that need to focus or measure it.
Featured in
See the copy button composed into full sections.
