CwCopy

Click-to-copy button with visual feedback and a screen-reader announcement. Pass any string as value. If the browser blocks clipboard access the button reports the failure instead of pretending it worked (customise the text with labels.failedFeedback).

Basic (icon only)

Just the copy button — hover to see the clipboard icon, click to copy.

Hello, CropWatch!

With inline content

Pass children to display the value alongside the button.

cw_demo_4f9a2c71e0b8d35a
CwCopy example Copy code 
<CwCopy value="cw_demo_4f9a2c71e0b8">
	<code>cw_demo_4f9a2c71e0b8</code>
</CwCopy>

Sizes

sm Hello, CropWatch!
md Hello, CropWatch!
lg Hello, CropWatch!

Long value (truncated display)

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkNyb3BXYXRjaCJ9

onCopy callback

The onCopy prop fires after a successful copy.

Click to increment counter

Last event: copied 0 times

API

Usage and API reference

CwCopy handles the clipboard action and temporary copied feedback. You choose the string to copy, and optionally render visible content next to the button.

How to think about it

  1. Pass the raw value you want copied The visual content can be truncated or formatted, but the `value` prop should contain the exact text you want on the clipboard.
  2. Render children when the value should stay visible For API keys, invite codes, or token strings, put the visible text inside the default snippet.
  3. Use `onCopy` for analytics or confirmations The callback only runs after a successful copy operation.

Props and callbacks

APITypeDetails
value Required
stringText written to the clipboard.
size

Default: md

'sm' | 'md' | 'lg'Size preset for the copy affordance.
feedbackDuration

Default: 1500

numberHow long the copied feedback state stays visible.
children
SnippetOptional visible content rendered before the copy button.
onCopy
(value: string) => voidRuns after a successful copy operation.
labels.failedFeedback

Default: 'Copy failed'

stringMessage shown when copying fails.

Copy-paste examples

Each snippet is a complete, working example you can paste into a Svelte 5 component.

Icon-only copy button

Useful when the surrounding layout already shows the full value.

Icon-only copy button Copy code 
<CwCopy value={device.serialNumber} />
Visible value and copy callback

Use this when the user should see exactly what will be copied.

Visible value and copy callback Copy code 
<script lang="ts">
	let copiedCount = $state(0);
</script>

<CwCopy
	value="sk-proj-abc123def456ghi789"
	size="lg"
	feedbackDuration={2500}
	onCopy={() => (copiedCount += 1)}
>
	<code>sk-proj-abc123def456ghi789</code>
</CwCopy>