CopyButton

Icon button that copies a value to the clipboard and announces the result.

Examples

Default

Copy

<CopyButton onCopy={fn()} value="sk_live_51ABC123" />

Lazy Value

Copy

<CopyButton onCopy={fn()} value={() => 'value resolved when clicked'} />

Custom Labels

Copy API key

<CopyButton
  onCopy={fn()}
  value="sk_live_51ABC123"
  copiedLabel="API key copied"
  copyLabel="Copy API key"
  errorMessage="Could not copy API key"
/>

States

Copy

Copy

<HStack gap={3}>
  <CopyButton {...args} />
  <CopyButton {...args} isDisabled />
</HStack>

API

CopyButton

Icon button that copies a value to the clipboard and announces the result.

Prop	Type	Default	Description
copiedLabel	string	'Copied'	Label and tooltip shown after a successful copy.
copyLabel	string	'Copy'	Label and tooltip shown when the button is ready to copy.
errorMessage	string	'Copy failed'	Message announced assertively when copying fails.
onCopy	() => void	—	Called after the value is successfully copied.
onCopyError	(error: unknown) => void	—	Called when resolving the value or writing to the clipboard fails.
resetTimeout	number	2000	Time in milliseconds before the copied state resets.
value*	string | (() => string)	—	Text to copy, or a synchronous getter evaluated on each activation.
form	string	—	HTML form attribute associating the button with a <form> by ID.
id	string	—	HTML id attribute applied to the root element.
aria-controls	string	—	Identifies the element(s) whose contents are controlled by the button.
aria-describedby	string	—	Identifies the element(s) that describe the button.
aria-details	string	—	Identifies the element that provides a detailed description.
aria-expanded	boolean	—	Indicates whether a controlled element is expanded or collapsed.
aria-haspopup	boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog'	—	Indicates the button opens an interactive popup element.
aria-keyshortcuts	string	—	Keyboard shortcuts that activate or focus the button.
aria-labelledby	string	—	Identifies the element(s) that label the button.
onFocus	FocusEventHandler<HTMLElement>	—	Focus event handler for the root element.
onKeyDown	(event: KeyboardEvent<HTMLElement>) => void	—	Keyboard event handler for the root element.
onPointerEnter	PointerEventHandler<HTMLElement>	—	Pointer enter event handler for the root element.
style	CSSProperties	—	Inline styles applied to the root element.
ref	Ref<HTMLElement>	—	Ref forwarded to the root element.
className	string	—	Additional CSS class names applied to the root element.
data-testid	string	—	Test ID applied to the root element.
isDisabled	boolean	—	Whether the button is disabled. Prevents interaction and applies disabled styling.
size	"sm" | "md" | "lg"	—	Visual size of the button.
variant	"destructive" | "primary" | "ghost" | "onSolid" | "outline" | "secondary"	—	Visual style variant.