---

## CopyButton
One-tap copy-to-clipboard button with built-in success feedback (the icon
swaps to a check and the intent flips to success for a moment). Icon-only by default;
pass `label` for the string shorthand or `children` to fill it like any other Button.
Forwards `variant`/`intent`/`size`/`tier` to the underlying Button, so it inherits the
full button styling vocabulary.

**Import:** `import { CopyButton } from '@urbicon-ui/blocks';`

### Examples
```svelte
<CopyButton value="npm i

```svelte
<CopyButton value={apiKey} label="Copy key" variant="outlined" />
```

### Variants
- size: 2xs, lg, md, sm, xl, xs (default: md)
- state: copied, error, idle (default: idle)

### Api
| Prop | Type | Required | Default | Description |
| --- | --- | :---: | --- | --- |
| value | `string` | yes |  | The text written to the clipboard when pressed. |
| ...HTMLButtonAttributes | `HTMLAttributes` | no |  | HTML attributes (excluding: 'value' | 'onclick' | 'class' | 'disabled' | 'children') |
| children | `Snippet<[CopyPhase]>` | no |  | Button content, like any other Button — an icon plus text, a `Kbd`, whatever the action needs. Wins over `label`, which stays as the string shorthand for the common case. Receives the copy phase, so the content can answer the copy itself; ignoring the argument keeps the content static while the icon and intent still flip. |
| class | `string` | no |  | Additional CSS class merged onto the underlying Button. In the same Tailwind bucket `class` wins over the `slotClasses` entry for the element it lands on. Presets and provider defaults sit below both. |
| copiedLabel | `string` | no | the i18n "Copied" string | Visible label shown for `timeout` ms after a successful copy. |
| disabled | `boolean` | no | false | Whether the button is disabled |
| hideIcon | `boolean` | no | false | Hide the copy/check icon (label-only). |
| intent | `'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'neutral'` | no |  | Inherited from ButtonProps. |
| label | `string` | no |  | Optional visible label next to the icon. When omitted the button is icon-only. |
| onCopy | `(value: string) => void` | no |  | Called with `value` after it is written to the clipboard. |
| onError | `(error: unknown) => void` | no |  | Called with the thrown error when the clipboard write fails (permission denied, insecure context, …). |
| preset | `string` | no |  | Apply a named preset registered via `<BlocksProvider presets={{ CopyButton: {...} }}>`. Prefer this over `class` overrides when the requested look falls outside the semantic intent palette — presets keep hover/active/dark-mode logic coherent. |
| slotClasses | `Partial<Record<CopyButtonSlots, string>>` | no |  | Per-slot class overrides. Slots: base | icon | label. In the same Tailwind bucket `class` wins over the `slotClasses` entry for the element it lands on. Presets and provider defaults sit below both. |
| tier | `'commit' | 'modify'` | no |  | Inherited from ButtonProps. |
| timeout | `number` | no | 2000 | How long the success/error state stays before reverting, in ms. `0` keeps it until the next copy. |
| unstyled | `boolean` | no |  | Strip all default styles; forwarded to the underlying Button. |
| variant | `'filled' | 'outlined' | 'ghost' | 'text'` | no |  | Inherited from ButtonProps. |
| size | `'2xs' | 'lg' | 'md' | 'sm' | 'xl' | 'xs'` | no | md | Controls the dimensions, padding, and text size of the CopyButton. Affects the component's physical footprint. Available options: 2xs, lg, md, and 3 more. |
| state | `'copied' | 'error' | 'idle'` | no | idle | Controls the visual state representation of the CopyButton to communicate status to users. Available options: copied, error, idle. |

Inherited from:
- Pick<ButtonProps, 'variant' | 'intent' | 'size' | 'tier' | 'disabled'> (pick-pattern)
- Omit<HTMLButtonAttributes, 'value' | 'onclick' | 'class' | 'disabled' | 'children'> (omit-pattern)

### Types
```ts
type CopyPhase = 'idle' | 'copied' | 'error'
```

```ts
type MintProp = | MintName
  | { name: MintName; config?: MintConfig & Record<string, unknown> }
  | Array<MintName>
  | Array<MintName | { name: MintName; config?: MintConfig & Record<string, unknown> }>
```

```ts
type SlotNames = keyof ReturnType<T> & string
```

```ts
type MintName = BuiltinMintName | 'none' | (string & {})
```

```ts
interface MintConfig {
/**
   * `hover` and `focus` hold the effect while the pointer/visible focus stays
   * on the element; `click` and `load` run it once.
   */
  trigger?: 'hover' | 'click' | 'focus' | 'load';
  /**
   * Effect duration in ms. Written as an inline per-effect custom property
   * (`--blocks-mint-<effect>-duration`), so the CSS transition/animation
   * actually runs at this speed; unset, the theme duration tokens apply.
   */
  duration?: number;
  /** Delay in ms before the effect applies. */
  delay?: number;
  /**
   * CSS easing for the effect (`--blocks-mint-<effect>-easing` inline);
   * unset, the per-effect theme default applies.
   */
  easing?: string;
  disabled?: boolean;
}
```

### Slots (slotClasses keys)
`base`, `icon`, `label`