Studio
2

Copy Button

Installation

pnpm dlx @mielui/svelte add copy-button

Usage

Import Copy Button and pass the text to copy:

The click handler runs before copying; call preventDefault() to cancel. The oncopy callback receives the exact text requested by the latest successful copy. Pending copies are ignored after the button is removed.

import { CopyButton } from '$lib/mielui/components/copy-button';

<CopyButton text="pnpm add @mielui/svelte" />
<CopyButton text={apiKey} label="Copy key" variant="outline" />

Examples

In a field

Variants

Confirm the clipboard result

Use oncopy for feedback after a successful clipboard write. A secure browser context and clipboard permission are required. Keep the source text available so people can select it manually when clipboard access is blocked.

API reference

CopyButton

Copies text to the clipboard.

Prop Type Default
text Required string

The string written to the clipboard on click.

 —
label string | undefined

Tooltip label at rest.

 'Copy'
copiedLabel string | undefined

Tooltip label shown right after copying.

 'Copied'
duration number | undefined

How long (ms) to hold the copied state before reverting.

 2000
variant ButtonVariant | undefined

Button variant (defaults to `ghost`).

 'ghost'
size "sm" | "md" | "lg" | "icon" | undefined

Button size (defaults to `icon`). Pass a text size when rendering children.

 'icon'
class string | undefined —
children Snippet<[]> | undefined

Optional visible label rendered after the icon.

 —
oncopy (((text: string) => void) & ClipboardEventHandler<HTMLButtonElement>) | undefined

Fired after the text is successfully written to the clipboard.

 —