Copy Button
A button that copies text to the clipboard and confirms with a check.
Installation
Installs the style saved in lily.json. For a new Diamond project,
run lily-svelte init --style diamond first.
Install the lily base and `utils` (run once per project).
npx lily-svelte@latest initCopy the copy-button source into $lib/components/ui/copy-button, and the use-clipboard hook into $lib/hooks.
Usage
<script lang="ts">
import { CopyButton } from '$lib/components/ui/copy-button';
</script>
<CopyButton text="Hello, lily!" />CopyButton is a Button — variant, size and every button attribute pass through. It
defaults to the ghost variant and the icon size.
With a label
Pass children to show text next to the icon; the size switches to default so there is room.
<CopyButton text={command} size="sm">
{#snippet icon()}
<Icon icon="heroicons:command-line-solid" />
{/snippet}
<span class="font-mono text-xs">{command}</span>
</CopyButton>Feedback
After a copy the icon swaps to a check (or a cross if the clipboard was unavailable) for delay milliseconds — 1500 by default. onCopy receives the same 'success' | 'failure' status.
<CopyButton text={token} delay={800} onCopy={(status) => console.log(status)} />The hook
The button is built on UseClipboard, which you can use on its own.
<script lang="ts">
import { UseClipboard } from '$lib/hooks/use-clipboard.svelte';
import { Button } from '$lib/components/ui/button';
const clipboard = new UseClipboard();
</script>
<Button onclick={() => clipboard.copy('hello')}>
{clipboard.copied ? 'Copied' : 'Copy'}
</Button>