# Copy button

> One-click clipboard copy action with checkmark icon morph, label crossfade, and self-reverting timer.

A micro-action button engineered for copying code snippets, markdown blocks, URLs, and API keys. On click, the copy icon smoothly morphs into an animated checkmark, optional labels crossfade without layout jumps, and an accessible screen-reader announcement is dispatched.

## Install

```bash
npx shadcn@latest add https://hairlineui.com/r/copy-button.json
```

Needs React 19, Tailwind CSS v4 and shadcn/ui theme variables (any style, light and dark). Icons from lucide-react.

- npm: `lucide-react`
- Hairline UI components it needs (the CLI installs them too): `ui-interaction-motion`
- Docs and live preview: https://hairlineui.com/ui/copy-button
- Registry item (source): https://hairlineui.com/r/copy-button.json

## Usage

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

<CopyButton text="npm i @hairline/button" />
<CopyButton text="https://hairlineui.com" showLabel />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `text` | `string` | – | The string to copy to the user’s clipboard. |
| `label` | `string` | `"Copy"` | Text shown when idle. |
| `copiedLabel` | `string` | `"Copied!"` | Text shown when successfully copied. |
| `showLabel` | `boolean` | `false` | Whether to show the text label beside the icon. |
| `timeoutMs` | `number` | `2000` | Duration in milliseconds before reverting back to idle. |
| `variant` | `"secondary" \| "outline" \| "ghost"` | `"ghost"` | Visual appearance. |
| `size` | `"xs" \| "sm" \| "md"` | `"sm"` | Height and icon scale. |

## States

- **idle**: Copy icon with title tooltip.
- **copied**: Emerald checkmark morph with "Copied!" feedback and status announcement.

## What it handles

Copying to clipboard is a standard action that often gives weak or delayed feedback. This button gives immediate tactile response with icon morphing and seamless revert.

- **Checkmark morph**: The copy icon crossfades smoothly into a green checkmark on successful copy.
- **Optional label crossfade**: Supports both compact icon-only mode and text-labeled mode ("Copy" → "Copied!").
- **Self-reverting timer**: Automatically resets back to idle after a configurable timeout (default 2000ms).
- **Accessible announcement**: Screen readers hear "Copied!" via an aria-live polite status region.

## Replaces

custom clipboard handlers, static copy buttons, clunky alert popups

## Where it fits

- **Code blocks**: Top-right copy button in syntax-highlighted code specimens.
- **Share links & invite codes**: One-tap copy for URLs and referral tokens.
- **API keys & secrets**: Fast copying of sensitive tokens with visual confirmation.

## Notes

- Uses navigator.clipboard with fallback for older browsers or non-secure contexts.
- Screen readers announce "Copied!" automatically via aria-live.

License: MIT (https://hairlineui.com/license#components)