# CopyButton

> Copies text to the clipboard and confirms it visually and to screen readers.

Category: Actions · Status: stable · Package: @bindshq/stance-react@0.1.1 · Docs: https://stanceui.com/components/copy-button

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.

## Import

```tsx
import { CopyButton } from '@bindshq/stance-react';
```

Styles are imported once per app: `@bindshq/stance-tokens/css` and `@bindshq/stance-react/styles.css`.

## Examples

### Icon only

```tsx
import { CopyButton } from '@bindshq/stance-react';

export function Basic() {
  return <CopyButton value="org_8f2c91" label="Copy organisation ID" />;
}
```

### With label

```tsx
import { CopyButton } from '@bindshq/stance-react';

export function WithLabel() {
  return (
    <CopyButton value="https://binds.si/s/acme" label="Copy link" showLabel variant="outline" />
  );
}
```

### In context

```tsx
import { 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

| Component | Prop | Type | Default | Description |
| --- | --- | --- | --- | --- |
| CopyButton | `value` (required) | `string \| (() => string)` | None | Text to copy, or a function evaluated on click. |
| CopyButton | `label` | `string` | `'Copy'` | Visible or accessible label. |
| CopyButton | `copiedLabel` | `string` | `'Copied'` | Label after copying. |
| CopyButton | `showLabel` | `boolean` | `false` | Show text beside the icon. |
| CopyButton | `onCopy` | `(success: boolean) => void` | None | Called after each attempt. |
| CopyButton | `timeout` | `number` | `2000` | Duration of the copied state in ms. |
| CopyButton | `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. |

## Guidelines

**Do**

- Place next to the value it copies.

**Don’t**

- Copy secrets without the user asking.

## Related

- https://stanceui.com/components/copyable-code
- https://stanceui.com/components/button