```tsx
import { CopyButton } from '@/components/ikui/copy-button'

export function Demo() {
  return <CopyButton value="Ikui 🪄" />
}
```

## Installation

```bash
npx shadcn@latest add @ikui/copy-button
```

## Usage

```tsx
import { CopyButton } from "@/components/copy-button";
```
```tsx
<CopyButton value="Text to copy" />
```

## Examples

### Size

```tsx
import { CopyButton } from '@/components/ikui/copy-button'

export function Demo() {
  return (
    <div className="flex items-center gap-4">
      <CopyButton value="Small" size="sm" />
      <CopyButton value="Default" />
      <CopyButton value="Large" size="lg" />
    </div>
  )
}
```

### With label

```tsx
import { CopyButton } from '@/components/ikui/copy-button'

export function Demo() {
  return (
    <div className="flex items-center gap-4">
      <CopyButton value="Copied with a label">Copy</CopyButton>
      <CopyButton value="Copied with a label" copiedChildren="Copied!">
        Copy
      </CopyButton>
    </div>
  )
}
```

## Props

| Prop | Type | Default | Description |
| ---- | ---- | ------- | ----------- |
| `value` | `string \| (() => string \| Promise<string>)` | - | Text to copy, or a (possibly async) function resolving to it on click |
| `size` | `SizeVariant` | `default` | Button size. Options: sm, default, lg |
| `timeout` | `number` | `1500` | How long the copied state stays before resetting, in ms |
| `copyIcon` | `ReactNode` | - | Icon shown in the idle state |
| `copiedIcon` | `ReactNode` | - | Icon shown after a successful copy |
| `onCopy` | `(value: string) => void` | - | Called with the copied text after it is written to the clipboard |
| `onCopyError` | `(error: unknown) => void` | - | Called when reading the value or writing to the clipboard fails |
| `children` | `ReactNode` | - | Optional label rendered next to the icon, turning this into a text button |
| `copiedChildren` | `ReactNode` | - | Label shown after a successful copy. Falls back to children when omitted |
| `className` | `string` | - | Additional CSS classes |