# Copy Button

A utility button that copies text to the clipboard and provides visual feedback.

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md).





A dedicated component for copying strings to the clipboard. It handles the `navigator.clipboard` logic internally and swaps its icon to a success checkmark for 2 seconds after being clicked.

<ComponentPreview name="copy-button-demo">
  <div className="flex items-center justify-center py-8">
    <CopyButton value="npm install react" />
  </div>
</ComponentPreview>

## Installation [#installation]

```bash
npx shadcn@latest add "https://ui.manpuc.me/r/copy-button.json"
```

## Usage [#usage]

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

```tsx
<CopyButton value="Text to copy" />
```

## Examples [#examples]

### Variants [#variants]

Since `CopyButton` inherits from standard `ButtonProps`, it supports all standard button variants.

<ComponentPreview name="copy-button-variants">
  <div className="flex items-center justify-center py-8 space-x-4">
    <CopyButton value="https://ui.manpuc.me" variant="default" />

    <CopyButton value="https://ui.manpuc.me" variant="secondary" />

    <CopyButton value="https://ui.manpuc.me" variant="outline" />

    <CopyButton value="https://ui.manpuc.me" variant="ghost" />
  </div>
</ComponentPreview>

### Shape (Circular) [#shape-circular]

You can use the `shape="pill"` prop (which is the default) to render a perfectly circular button, or `shape="default"` for standard sharp corners.

<ComponentPreview name="copy-button-shape">
  <div className="flex items-center justify-center py-8 space-x-4">
    <CopyButton value="circle" shape="pill" variant="outline" />

    <CopyButton value="square" shape="default" variant="outline" />
  </div>
</ComponentPreview>

### With Text [#with-text]

You can easily pair the button with explanatory text.

<ComponentPreview name="copy-button-with-text">
  <div className="flex items-center justify-center py-8 space-x-2">
    <CopyButton value="npm install react" />

    <span className="text-sm text-muted-foreground">
      Copy install command
    </span>
  </div>
</ComponentPreview>

## API Reference [#api-reference]

The `CopyButton` component extends `ButtonProps` from the standard `Button` component, allowing you to pass `size`, `variant`, and other standard button props.

| Prop    | Type                  | Description                                                                                     |
| ------- | --------------------- | ----------------------------------------------------------------------------------------------- |
| `value` | `string`              | **Required.** The text string that will be written to the clipboard when the button is clicked. |
| `shape` | `"default" \| "pill"` | Controls the corner radius. `"pill"` creates a perfect circle for icon buttons (default).       |