# CopyButton

Copies a value to the clipboard with visual feedback. Defaults to an icon + label button; pass a render-prop `children` function when you need custom chrome.

## Examples

### Default

Provide the `value` written to the clipboard. Labels default to “Copy” / “Copied” / “Error”.

```tsx
import { CopyButton } from '@var-ui/react';

<CopyButton value="npm i @var-ui/react" />
```

```astro
<!-- No Astro binding yet — use @var-ui/react -->
```

```html
<!-- No HTML demo yet — use @var-ui/react -->
```

### Custom labels

Override `copyLabel` and `copiedLabel` (and optionally `errorLabel`) for context-specific copy.

```tsx
import { CopyButton } from '@var-ui/react';

<CopyButton
  value="npm i @var-ui/react"
  copyLabel="Copy install command"
  copiedLabel="Copied to clipboard"
/>
```

```astro
<!-- No Astro binding yet — use @var-ui/react -->
```

```html
<!-- No HTML demo yet — use @var-ui/react -->
```

## Props

| Name | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| value | string | yes |  | Text written to the clipboard when copy is triggered. |
| children | ((state: CopyButtonRenderProps) => ReactNode) \| undefined | no |  | Custom render function; defaults to a styled icon button. |
| className | string \| undefined | no |  |  |
| copiedLabel | string \| undefined | no | Copied | Label for the default button after a successful copy. |
| copyLabel | string \| undefined | no | Copy | Label for the default button when not copied. |
| errorLabel | string \| undefined | no | Error | Label for the default button after a failed copy. |
| timeout | number \| undefined | no | 2000 | Milliseconds before the copied state resets. |

## Accessibility

The default control is a native `button` whose `aria-label` tracks the current state label (`copyLabel`, `copiedLabel`, or `errorLabel`). After a successful copy, the label updates so assistive tech hears the confirmation. Prefer clear verbs over icon-only copy affordances unless you supply an explicit render-prop with its own accessible name.