Clipboard Text
kumo-svelte

Clipboard Text

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

0c239dd2 
<script lang="ts">
  import { ClipboardText } from '$lib';
</script>

<div class="flex min-h-24 w-full items-center justify-center">
  <ClipboardText text="0c239dd2" />
</div>

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

abc123 
<script lang="ts">
  import { ClipboardText } from '$lib';
</script>

<div class="flex min-h-24 w-full items-center justify-center">
  <ClipboardText text="abc123" />
</div>

API Key

sk_live_51H8... 
<script lang="ts">
  import { ClipboardText } from '$lib';
</script>

<div class="flex min-h-24 w-full items-center justify-center">
  <ClipboardText text="sk_live_51H8..." />
</div>

Copy Alternate Text

sk_live_*********** 
<script lang="ts">
  import { ClipboardText } from '$lib';
</script>

<div class="flex min-h-24 w-full items-center justify-center">
  <ClipboardText text="sk_live_***********" textToCopy="sk_live_51H8_abc123" />
</div>

Long Text

https://example.com/very/long/url/path 
<script lang="ts">
  import { ClipboardText } from '$lib';
</script>

<div class="flex min-h-24 w-full items-center justify-center">
  <ClipboardText text="https://example.com/very/long/url/path" />
</div>

With Tooltip

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

npx kumo add button 
<script lang="ts">
  import { ClipboardText } from '$lib';
</script>

<div class="flex min-h-24 w-full items-center justify-center">
  <ClipboardText
    text="npx kumo add button"
    tooltip={{ text: 'Copy', copiedText: 'Copied!', side: 'top' }}
  />
</div>

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.