Clipboard Text
kumo-svelte

Clipboard Text

A text component with a copy-to-clipboard button.

Installation

Barrel

import { ClipboardText } from 'kumo-svelte';

Granular

import { ClipboardText } from 'kumo-svelte/components/clipboard-text';

Usage

<script lang="ts">  import { ClipboardText } from 'kumo-svelte';</script><ClipboardText text="Copy this text" />

Examples

Short Text

API Key

Copy Alternate Text

Long Text

With Tooltip

Shows "Copy" tooltip on hover, "Copied!" toast on click.

API Reference

PropTypeDefaultDescription
size 'sm' | 'base' | 'lg'"lg"Size preset.
text *string-Text to display and copy to the clipboard.
textToCopy string-Alternate text copied to the clipboard.
class string-Additional classes merged onto the root element.
tooltip { text?: string; copiedText?: string; side?: TooltipSide; }-Tooltip content.
labels { copyAction?: string; }-Accessible labels for internationalization.
onCopy () => void-Called after copying succeeds.