Copy Button

Copies its text on click. The icon turns into a check and the tooltip reads Copied for two seconds, then both revert.

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

<CopyButton text="bun add @sivir-ui/svelte" />

Installation

Copy the command below and run it in your terminal.

bunx @sivir-ui/svelte add copy-button

Usage

text is required. The button is icon-only by default, so label sets both the tooltip and the accessible name. To show a visible label, pass children and a text size such as sm; the default icon size clips text.

import { CopyButton } from '@sivir-ui/svelte/components/copy-button';

<CopyButton text="bun add @sivir-ui/svelte" />
<CopyButton text={apiKey} label="Copy key" variant="outline" />
<CopyButton text={inviteUrl} size="sm">Copy link</CopyButton>

The tooltip opens after 125ms. Raise tooltipDelay in a row of message actions so tooltips appear only when the pointer rests. duration sets how long the copied state holds (2000ms by default), and oncopy fires after a successful write.

Examples

In a field

bunx sv create my-app

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

<div
    class="flex w-full max-w-sm items-center gap-2 rounded-[var(--radius-md)] border border-border bg-card px-3 py-2"
>
    <code class="min-w-0 flex-1 truncate font-mono text-sm text-foreground">
        bunx sv create my-app
    </code>
    <CopyButton text="bunx sv create my-app" />
</div>

Variants

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

<div class="flex items-center gap-3">
    <CopyButton text="ghost variant" label="Ghost" />
    <CopyButton text="outline variant" label="Outline" variant="outline" />
    <CopyButton text="secondary variant" label="Secondary" variant="secondary" />
</div>

Anatomy

CopyButton - Copies text to the clipboard.