Copy button

Copy a value with success and error feedback.

View code

import { CopyButton } from "@stack/ui/copy-button";

export default function Example() {
  return <CopyButton value="bun install" aria-label="Copy install command" />;
}

Usage

import { CopyButton } from "@stack/ui/copy-button";

Pass a string or a function that returns the current value. Clipboard access requires a secure context or localhost.

Reference

Tables list component-specific props and inherited control options. Components that forward native props also accept the applicable React HTML attributes and event handlers, including data-* and aria-* attributes.

CopyButton

Also accepts native element props.

Prop	Type	Required	Description
style	CSSProperties | ((state: ButtonState) => CSSProperties | undefined)	No	Inline styles for the underlying element.
title	string	No	Title content.
className	string | ((state: ButtonState) => string | undefined)	No	Additional CSS classes for the underlying element.
variant	"link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null	No	Appearance variant.
aria-label	string	No	Accessible name for the control.
children	ReactNode	No	Content rendered inside the component.
onClick	((event: BaseUIEvent<MouseEvent<HTMLButtonElement, MouseEvent>>) => void)	No	Handle clicks before the built-in action. Prevent the default event to cancel that action.
size	"default" | "sm" | "xs" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null	No	Size variant.
render	ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, ButtonState>	No	Replace the underlying element using render composition.
disabled	boolean	No	Disable interaction.
focusableWhenDisabled	boolean	No	Whether the button should be focusable when disabled.
nativeButton	boolean	No	Whether the component renders a native <button> element when replacing it via the render prop.
value	string | (() => string)	Yes	Text to copy, or a function that returns the current text.
copiedLabel	string	No	Accessible label after copying succeeds. Default: "Copied".
errorLabel	string	No	Accessible label after copying fails. Default: "Could not copy. Try again.".
tooltip	ReactNode	No	Tooltip content; null or false suppresses it.
tooltipProps	Omit<HintContentProps, "children">	No	Props forwarded to the tooltip content.
onCopy	(() => void)	No	Called after copying succeeds.
onCopyError	((error: Error) => void)	No	Handle a clipboard failure.