CwCopy

Click-to-copy button with animated visual feedback. Pass any string as value.

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.

sk-proj-abc123def456ghi789
CwCopy example Copy code 
<CwCopy value="sk-proj-abc123def456">
	<code>sk-proj-abc123def456</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. Counter: 0

Click to increment counter
Documentation Upgrade

Start here

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.

Copy-paste examples

These snippets intentionally show the full public API surface the live demo relies on.

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>