Inline Copy Text - Kumo Svelte

<script lang="ts">
  import { InlineCopyText } from '$lib/components/inline-copy-text';
</script>

<InlineCopyText
  value="f86b3f10-32e9-4db7-ae95-84a1b2c3d4e5"
  labels={{ copyAction: 'Copy database ID', copied: 'Database ID copied' }}
>
  f86b3f10-32e9-4db7-ae95-84a1b2c3d4e5
</InlineCopyText>

Installation

import { InlineCopyText } from 'kumo-svelte';// or: import { InlineCopyText } from 'kumo-svelte/components/inline-copy-text';

Usage

Use InlineCopyText for short identifiers and values in dense interfaces such as table cells. Use ClipboardText when the value should appear in a read-only, input-like field with an always-visible copy button.

<InlineCopyText  value="f86b3f10-32e9-4db7-ae95-84a1b2c3d4e5"  labels={{ copyAction: 'Copy database ID', copied: 'Database ID copied' }}>  f86b3f10-32e9-4db7-ae95-84a1b2c3d4e5</InlineCopyText>

API Reference

Prop	Type	Default	Description
value	`string`	-	Value copied to the clipboard. Defaults to rendered text content.
variant	`InlineCopyTextVariant`	`mono-secondary`	Text style; heading variants are excluded.
size	`KumoTextSize`	-	Text size.
bold	`boolean`	-	Uses medium-weight copy text.
truncate	`boolean`	`true`	Truncates overflowing text.
as	`TextElement`	`span`	Element used for displayed text.
onCopy	`() => void`	-	Called after a successful clipboard write.
labels	`InlineCopyTextLabels`	-	Localized copy and copied accessible labels.