ContextQMD
Back to Onyx

CopyButton

web/lib/opal/src/components/buttons/copy-button/README.md

4.1.01.7 KB
Original Source

CopyButton

A button that copies text to the clipboard on click. The icon transitions through three states: idle (SvgCopy), copied (SvgCheck), and error (SvgAlertTriangle). The icon is not overridable by callers.

Usage

Icon-only (omit children)

tsx
import { CopyButton } from "@opal/components";

<CopyButton getCopyText={() => apiKey} tooltip="Copy API key" />

With label (provide children)

tsx
<CopyButton getCopyText={() => shareUrl}>
  Copy link
</CopyButton>

Rich copy (HTML + plain text)

tsx
<CopyButton
  getCopyText={() => "plain text fallback"}
  getHtmlContent={() => "<b>rich</b> content"}
/>

Props

PropTypeDefaultDescription
getCopyText() => string—Required. Returns the text written to the clipboard.
getHtmlContent() => stringundefinedOptional HTML content for rich copy. Falls back to getCopyText when the Clipboard API is unavailable.
childrenstringundefinedOptional label. When provided the button renders with text; when omitted it is icon-only.
tooltipstring"Copy"Tooltip text shown in the idle state. Overridden by "Copied!" / "Failed to copy" on state change.
prominenceButtonProminence"tertiary"Visual prominence level.
sizeContainerSizeVariants"lg"Size preset.

All other Button props (except icon, onClick, rightIcon) are forwarded.

Notes

  • Uses navigator.clipboard when available, falls back to copy-to-clipboard package.
  • The icon is always controlled by internal copy state — it cannot be overridden via props.
  • The copied / error state resets after 3 seconds.