Copy Button

Usage

Use CopyButton to put one value on the clipboard: an incident ID, an address, a link.

variant={CopyButtonVariant.Outline} (the default) is a neutral Soft button with its outline, the copy icon, and a label. Its width follows the label and springs between label sizes, so a shorter copied label makes a narrower button and neighbors ease instead of jumping. Reduced motion snaps the width.
variant={CopyButtonVariant.Icon} is a Ghost icon-only button for tight spaces such as a table cell or a field. label is its accessible name and is announced when the state changes; it is never drawn. Pair it with tooltip so sighted users see the name.
After a copy the icon becomes a check (copied) or an alert (failed) and returns to the copy icon after about 1.9 seconds.
onCopy and onCopyError run after the result. Use them for analytics or a toast; the button already shows the result.

When not to use it

The action is not a copy: use Button, or ActionButton for async work.
The value is secret and must stay out of the clipboard history: do not offer a copy control.

On this page

Usage

Use CopyButton to put one value on the clipboard: an incident ID, an address, a link.

variant={CopyButtonVariant.Outline} (the default) is a neutral Soft button with its outline, the copy icon, and a label. Its width follows the label and springs between label sizes, so a shorter copied label makes a narrower button and neighbors ease instead of jumping. Reduced motion snaps the width.
variant={CopyButtonVariant.Icon} is a Ghost icon-only button for tight spaces such as a table cell or a field. label is its accessible name and is announced when the state changes; it is never drawn. Pair it with tooltip so sighted users see the name.
After a copy the icon becomes a check (copied) or an alert (failed) and returns to the copy icon after about 1.9 seconds.
onCopy and onCopyError run after the result. Use them for analytics or a toast; the button already shows the result.

When not to use it

The action is not a copy: use Button, or ActionButton for async work.
The value is secret and must stay out of the clipboard history: do not offer a copy control.

On this page