# CopyButton

> Button preset wired to the clipboard, morphing its icon and label to a success or failure state for a moment after each copy attempt.

- Package: `fancy-ui-svelte` (Svelte 5 + Tailwind CSS v4)
- Category: Actions
- Tags: copy, clipboard, button, success
- Dependencies: button, status-morph
- Docs: https://fancy-ui.rama.app/docs/components/copy-button
- Source: https://github.com/RamaHerbin/fancy-ui/tree/main/src/lib/fancy-ui/copy-button

## Import

```svelte
<script lang="ts">
  import { CopyButton } from 'fancy-ui-svelte';
</script>
```

Setup (once per project): `npm install fancy-ui-svelte`, then add `@import "fancy-ui-svelte/tailwind.css";` after `@import "tailwindcss";` in your main CSS file. Full guide: https://fancy-ui.rama.app/llms.txt

React: `import { CopyButton } from 'fancy-ui-react';` (same prop names; `class` becomes `className`, snippets become `ReactNode`).

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` (required) | `string` | — | The text written to the clipboard on activation |
| `label` | `string` | `"Copy"` | Idle label |
| `copiedLabel` | `string` | `"Copied"` | Label shown for resetMs after a successful copy |
| `errorLabel` | `string` | `"Copy failed"` | Label and announcement shown after a failed copy |
| `resetMs` | `number` | `2000` | How long the copied state holds before reverting, in milliseconds |
| `variant` | `ButtonVariant` | `"outline"` | Passed straight through to the underlying Button |
| `size` | `ButtonSize` | `"md"` | Passed straight through to the underlying Button |
| `disabled` | `boolean` | `false` | Disables the button and blocks the copy |
| `iconOnly` | `boolean` | `false` | Drops the visible label, moving it to aria-label instead |
| `onCopy` | `(value: string, ok: boolean) => void` | — | Called with the value and whether the write actually succeeded |
| `class` | `string` | — | Additional CSS classes |
| `ref` | `HTMLButtonElement \| HTMLAnchorElement \| null` | `null` | Bindable element reference, matching Button's own ref type |
| `sound` | `boolean` | `false` | Plays the copy cue on a successful copy and error on a failed one, once the user has enabled sound |

## Snippets

| Snippet | Description |
| --- | --- |
| `children` | Overrides the default icon + label content |

## Examples

### Basic Usage

An outline button that copies a value on click.

```svelte
<script lang="ts">
	import { CopyButton } from "fancy-ui-svelte";
</script>

<CopyButton sound value="npm install fancy-ui-svelte" />
```

### Icon Only

Drops the visible label into aria-label for a toolbar.

```svelte
<script lang="ts">
	import { CopyButton } from "fancy-ui-svelte";
</script>

<CopyButton sound value="npm install fancy-ui-svelte" iconOnly label="Copy install command" />
```

### Custom Labels

Overrides the idle and copied label text.

```svelte
<script lang="ts">
	import { CopyButton } from "fancy-ui-svelte";
</script>

<CopyButton
	sound
	value="https://example.com/invite/9k2f"
	label="Copy link"
	copiedLabel="Link copied"
/>
```

### Variants

Four Button variants used as the idle skin.

```svelte
<script lang="ts">
	import { CopyButton } from "fancy-ui-svelte";
	import type { ButtonVariant } from "fancy-ui-svelte";

	const variants: ButtonVariant[] = ["outline", "ghost", "secondary", "accent"];
</script>

<div class="flex flex-wrap items-center gap-3">
	{#each variants as variant}
		<CopyButton sound value="npm install fancy-ui-svelte" {variant} />
	{/each}
</div>
```