mielui
Blocks

Copy Button

A button that copies text to the clipboard, with copy and copied states.

Installation

pnpm dlx @mielui/svelte add copy-button

Usage

Pass the text to copy. The button shows a copy icon with a tooltip, or a visible label when you give it children and a text size.

<script lang="ts">
    import { CopyButton } from '@mielui/svelte/components/copy-button';
</script>

<CopyButton text="pnpm add @mielui/svelte" />
<CopyButton text="sk_live_example" labels={{ copy: 'Copy API key' }} variant="outline" size="md">
    Copy key
</CopyButton>

onclick runs before copying; call preventDefault() to cancel. oncopy runs after a successful clipboard write and receives the copied text. Clipboard access needs a secure context, so keep the source text visible for people to select by hand when it is blocked.

Examples

Copy confirmation

A status line under the command updates after a successful copy.

In a field

Variants

Copied feedback

labels.copy is the tooltip and accessible name at rest, Copy by default. After a copy, the button holds its copied state and shows labels.copied, Copied by default. Every key in labels is optional and English is the fallback. duration is how long the copied state lasts in milliseconds, 2000 by default.

API reference

CopyButton

Copies text to the clipboard.

  • labels
    CopyButtonLabels

    Overrides the built-in text and accessible names. Every key is optional and English is the fallback.

  • text Required
    string

    The string written to the clipboard on click.

  • duration
    number

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

    Default 2000

  • variant
    ButtonVariant

    Button variant (defaults to ghost).

    Default 'ghost'

  • size
    "sm" | "md" | "lg" | "icon"

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

    Default 'icon'

  • class
    string

    Classes added to the element.

  • children
    Snippet<[]>

    Optional visible label rendered after the icon.

  • oncopy
    ((text: string) => void)

    Fired after the text is successfully written to the clipboard.