Kumo Svelte
kumo-svelte

Clipboard Text

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

0c239dd2 
<script lang="ts">
  import { ClipboardText } from "kumo-svelte/components/clipboard-text";
</script>

<ClipboardText text="0c239dd2" />

Import

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

Usage

<script lang="ts">
  import { ClipboardText } from "kumo-svelte/components/clipboard-text";
</script>

<ClipboardText text="Copy this text" />

Examples

Short Text

abc123 
<script lang="ts">
  import { ClipboardText } from "kumo-svelte/components/clipboard-text";
</script>

<ClipboardText text="abc123" />

API Key

sk_live_51H8... 
<script lang="ts">
  import { ClipboardText } from "kumo-svelte/components/clipboard-text";
</script>

<ClipboardText text="sk_live_51H8..." />

Copy Alternate Text

sk_live_*********** 
<script lang="ts">
  import { ClipboardText } from "kumo-svelte/components/clipboard-text";
</script>

<ClipboardText text="sk_live_***********" textToCopy="sk_live_51H8_abc123" />

Long Text

https://example.com/very/long/url/path 
<script lang="ts">
  import { ClipboardText } from "kumo-svelte/components/clipboard-text";
</script>

<ClipboardText text="https://example.com/very/long/url/path" />

With Tooltip

Shows a “Copy” tooltip on hover and “Copied!” after a successful copy.

npx kumo add button 
<script lang="ts">
  import { ClipboardText } from "kumo-svelte/components/clipboard-text";
</script>

<ClipboardText
  text="npx kumo add button"
  tooltip={{ text: "Copy", copiedText: "Copied!", side: "top" }}
/>

API Reference

ClipboardText

PropTypeDefault
classstring—
labelsClipboardTextLabels{}
onCopy() => void—
sizeKumoClipboardTextSizeKUMO_CLIPBOARD_TEXT_DEFAULT_VARIANTS.size
text*string—
textToCopystring—
tooltipClipboardTextTooltipConfig—