Components Actions
CopyButton
StableCopies text to the clipboard and confirms it visually and to screen readers.
CopyButton copies a value and shows confirmation for two seconds. It uses the asynchronous Clipboard API and falls back to the legacy command. The result is announced through a polite live region. By default it is icon-only, with its label as the accessible name.
Overview
import { CopyButton } from '@bindshq/stance-react';
export function Basic() {
return <CopyButton value="org_8f2c91" label="Copy organisation ID" />;
}Light, dark and high contrast
Every Stance component is designed and tested in all three appearance modes.
Import
import { CopyButton } from '@bindshq/stance-react';Examples
import { CopyButton } from '@bindshq/stance-react';
export function WithLabel() {
return (
<CopyButton value="https://binds.si/s/acme" label="Copy link" showLabel variant="outline" />
);
}Template ID:
tpl_42ab7import { CopyButton, Text } from '@bindshq/stance-react';
export function InContext() {
return (
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
<Text size="sm" as="span">
Template ID: <code>tpl_42ab7</code>
</Text>
<CopyButton value="tpl_42ab7" label="Copy template ID" size="xs" />
</div>
);
}API reference
| Prop | Type | Default | Description |
|---|---|---|---|
value* required | string | (() => string) | None | Text to copy, or a function evaluated on click. |
label | string | 'Copy' | Visible or accessible label. |
copiedLabel | string | 'Copied' | Label after copying. |
showLabel | boolean | false | Show text beside the icon. |
onCopy | (success: boolean) => void | None | Called after each attempt. |
timeout | number | 2000 | Duration of the copied state in ms. |
variant | size | ButtonProps | 'ghost' | 'sm' | Button appearance. |
Accessibility
- Icon-only buttons use the label as aria-label, which updates to “Copied”.
- Success or failure is announced in a polite live region.
Keyboard
| Keys | Action |
|---|---|
| Enter Space | Copies the value. |
Usage guidelines
Do
- Place next to the value it copies.
Don’t
- Copy secrets without the user asking.