# CopyButton

A clipboard action with stable geometry and localized result feedback.

Connect Flood once using [the installation guide](https://flood.md/docs/installation). Then import the components you use; no per-component add command is needed.

## Example

```tsx
"use client";

import { FloodRoot, CopyButton } from "@flood-md/react";
import "@flood-md/react/styles.css";

export function Example() {
  return (
    <FloodRoot>
      <CopyButton value="npm install @flood-md/react" />
    </FloodRoot>
  );
}
```

## Design notes

- Copies only on a user click. Requires a secure context and Clipboard API; onCopyError receives unavailable/denied errors. The host owns any manual-copy fallback. Native button ref and disabled semantics are preserved.
- Localize copyLabel/copiedLabel/errorLabel. resetDelay restores the idle state after success. Labels reserve their common width and a live status announces the result. No remote data transfer is built in. Available in 0.2.5.

## API reference

| Prop | Values | Default |
| --- | --- | --- |
| `variant` | `"solid" \| "subtle" \| "outline" \| "ghost"` | `"subtle"` |
| `size` | `"2xs" \| "xs" \| "sm" \| "md" \| "lg" \| "xl" \| "2xl"` | `"md"` |
| `value` | `string` | `Required` |
| `copyLabel` | `string` | `"Copy"` |
| `copiedLabel` | `string` | `"Copied"` |
| `errorLabel` | `string` | `"Failed"` |
| `resetDelay` | `number` | `2000` |
| `onCopied` | `() => void` | `—` |
| `onCopyError` | `(error: unknown) => void` | `—` |
| `Native HTML props` | `Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children" \| "value" \| "type" \| "onClick" \| "loading">` | `Forwarded` |