Copy Button

Copy text to the clipboard with animated status feedback.

Installation

pnpm dlx shadcn-svelte@latest add http://sveltekit-prerender/r/copy-button.json

Usage

usage.svelte

Props

CopyButton

Button that copies text and displays animated status feedback.

Name	Type	Default	Description
`text`	`string \| (() => string)`	`required`	`Text to copy, or a function that returns it.`
`children`	`Snippet`	`undefined`	`Optional label rendered beside the status icon.`
`idleIcon`	`Snippet`	`undefined`	`Custom icon shown before the copy action. Defaults to CopyIcon.`
`doneIcon`	`Snippet`	`undefined`	`Custom icon shown after a successful copy. Defaults to CheckIcon.`
`errorIcon`	`Snippet`	`undefined`	`Custom icon shown when copying fails. Defaults to CircleXIcon.`
`onCopySuccess`	`(text: string) => void`	`undefined`	`Called with the copied text after a successful copy.`
`onCopyError`	`(error: Error) => void`	`undefined`	`Called when the copy operation fails.`
`onclick`	`(event: MouseEvent) => void`	`undefined`	`Called after the copy action starts.`
`variant`	`ButtonVariant`	`'default'`	`Visual style inherited from the Button component.`
`size`	`ButtonSize`	`'icon'`	`Button size.`
`class`	`string`	`undefined`	`Additional classes applied to the button.`
`aria-label`	`string`	`'Copy'`	`Accessible label for the button.`