CopyButton

Markdown

Copies a value and reports the real outcome.

Used in Settings and billing.

Use it for: Copying a value such as a command, id or link, with the real outcome reported.
Not for: Copying whole messages with other actions beside it. Try MessageActions or Snippet.

npm install @stackunseen/ui

Loading example…

Installation

npm install @stackunseen/ui

import { CopyButton } from '@stackunseen/ui';

Styles: @stackunseen/ui/styles.css

Usage and props

The outcome is announced in a polite live region and shown by the icon; the accessible name never changes mid-press. A failed copy says to copy by hand. Snippet uses it, so the library has one copy behavior.

Supported inputs

This is the public signature used by this example. Open Code to see how the values and callbacks fit together.

value · label? · copiedLabel? · failedLabel? · iconOnly? · onCopy?(ok) · resetMs? · variant? · size?

How state and callbacks work

All props

Loading…

For your coding agent

Give the agent this page instead of a screenshot. The prompt wraps the page with the install and import lines and the rule that your server, not a click, completes an action.

Contract: value · label? · copiedLabel? · failedLabel? · iconOnly? · onCopy?(ok) · resetMs? · variant? · size?
Keeps honest: The outcome is announced in a polite live region and shown by the icon; the accessible name never changes mid-press. A failed copy says to copy by hand. Snippet uses it, so the library has one copy behavior.
MCP: read_component "CopyButton" on the docs endpoint

Open the Markdown file

Keyboard and customization

Keyboard

A button: Enter or Space copies. The icon-only form has a tooltip and an accessible name.

Customization

Change shared colors, spacing, corners and icons with the theme. Use the component's supported props to adapt its content and layout. Customization guide and Theme Studio