CopyButton

Copy a value to the clipboard with immediate, quiet confirmation: the icon becomes a drawn check and the label reads "Copied" without the button changing width.

When to use

• Signing secrets, invite links, install commands, IDs: anything people paste elsewhere.
• Inside fields and code rows as an icon-only plain button; as a labelled outline button in toolbars.
• For copying a whole code sample with its own header, use CodeBlock, which carries this button. For a copy action inside a group of actions, use ButtonGroup with a reserve label.

Usage

import { CopyButton } from "@/components/iris/copy-button/copy-button";

<div className="secret-field">
  <code>{signingSecret}</code>
  <CopyButton value={signingSecret} label="Copy signing secret" iconOnly variant="plain" />
</div>;

Props

Prop	Type	Default	Description
value	string	—	Text written to the clipboard (required).
label	string	"Copy"	Visible label and accessible name.
copiedLabel	string	"Copied"	Label shown once the value is on the clipboard.
iconOnly	boolean	false	Hides the label; the button keeps aria-label={label}.
variant	"outline" | "plain"	"outline"	Bordered or borderless.
disabled	boolean	—	Native disabled.
onCopied	() => void	—	Called after a successful copy.
className	string	—	Extra class on the button.

Notes

• Uses navigator.clipboard.writeText, which needs a secure context (HTTPS or localhost) and user activation. On failure the button shows "Failed" with an alert icon.
• The feedback lasts about 1.9s. A sibling <output> live region announces "{label}: Copied" (or your copiedLabel) or "Could not copy".
• data-copy-state="idle" | "copied" | "error" is exposed for styling.
• The label cell reserves its widest state (the label, the copied label or "Failed"), so nothing around it shifts. Reduced motion drops the scale and slide.