# CopyButton

Copies a value and reports the real outcome.

- **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](https://unseenui.com/components/message-actions/), [Snippet](https://unseenui.com/components/snippet/).

## Installation

```bash
npm install @stackunseen/ui
```

## Usage

```tsx
import { CopyButton } from '@stackunseen/ui';
import { useCopy } from '@stackunseen/ui';
import '@stackunseen/ui/styles.css';

<CopyButton value={url} label="Copy link" onCopy={(ok) => track(ok)} />
```

## All props

| Prop | Type | Description |
| --- | --- | --- |
| `asChild` | `boolean` | Render the single child element instead of a button, passing it the button's presentation. |
| `children` | `ReactNode` | Replaces the visible label content; the accessible name still comes from label. |
| `copiedLabel` | `string` |  |
| `failedLabel` | `string` | Says what to do instead; the clipboard can be blocked. |
| `href` | `string` | Renders a link with Button's presentation, for calls to action that navigate. |
| `iconOnly` | `boolean` | Icon only, with the label as a tooltip and accessible name. |
| `label` | `string` | The visible label, and the accessible name when iconOnly. |
| `onCopy` | `((ok: boolean) => void)` | Receives the real outcome. |
| `rel` | `string` | With href. |
| `resetMs` | `number` | How long the outcome stays announced and shown. |
| `size` | `"default" \| "sm"` |  |
| `target` | `string` | With href. |
| `value` (required) | `string` | The text to copy. |
| `variant` | `"link" \| "primary" \| "secondary" \| "outline" \| "ghost" \| "danger"` |  |

## Keyboard

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

## Works with

[ToggleGroup](https://unseenui.com/components/toggle-group/), [Chip](https://unseenui.com/components/chip/), [AppearanceToggle](https://unseenui.com/components/appearance-toggle/), [Button](https://unseenui.com/components/button/), [IconButton](https://unseenui.com/components/icon-button/)

Page: https://unseenui.com/components/copy-button/