# Copy button (goodtabs UI)

Copies a value to the clipboard and confirms with a check mark.

## Install

```bash
npx shadcn@latest add https://ui.goodtabs.co/r/copy-button.json
```

Or, with the @goodtabs namespace configured in components.json: `npx shadcn@latest add @goodtabs/copy-button`

## Usage

```tsx
import { CopyButton } from "@/components/ui/copy-button"

<CopyButton value="npx shadcn@latest add @goodtabs/copy-button" />
<CopyButton value={apiKey} variant="secondary">Copy key</CopyButton>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| value | `string` |  | The text written to the clipboard. |
| label | `string` | `"Copy"` | Accessible name when there is no visible label. |
| timeout | `number` | `2000` | How long the check mark stays, in milliseconds. |
| variant | `Button variant` | `"outline"` | Any shadcn button variant. |
| children | `ReactNode` |  | Optional visible label. Switches the size from icon-sm to sm. |

## When to use

- Next to a command, key, link or id that people need in their clipboard
- Inside code blocks, install fields and settings rows
- Anywhere the copied text is visible, so the button can stay icon only

## When not to use

- For copying rich content or files, which the clipboard API handles differently
- As the only way to get at the text: always show the value too

## Notes for agents

- It extends shadcn's Button, so every Button prop and variant applies
- Without children it renders icon-sm with an aria-label; with children it renders sm with the label and swaps it to Copied
- Clipboard writes need a secure context (https or localhost); failures are silent by design
- The check mark state is data-copied on the button, usable for styling

Docs: https://ui.goodtabs.co/components/copy-button