CopyButton

Preview

Installation

pnpm add fancy-ui-svelte

import { CopyButton } from 'fancy-ui-svelte'

Usage

svelte

<script lang="ts">
  import { CopyButton } from 'fancy-ui-svelte';
</script>

<CopyButton />

Examples

Basic Usage

An outline button that copies a value on click.

Icon Only

Drops the visible label into aria-label for a toolbar.

Custom Labels

Overrides the idle and copied label text.

Variants

Four Button variants used as the idle skin.

svelte

<script lang="ts">
	import { CopyButton } from "$lib/fancy-ui/copy-button";
	import type { ButtonVariant } from "$lib/fancy-ui/button";

	const variants: ButtonVariant[] = ["outline", "ghost", "secondary", "accent"];
</script>

<div class="flex flex-wrap items-center gap-3">
	{#each variants as variant}
		<CopyButton value="npm install fancy-ui-svelte" {variant} />
	{/each}
</div>

Props

Prop	Type	Default	Description
`value` *	string	-	The text written to the clipboard on activation
`label`	string	`"Copy"`	Idle label
`copiedLabel`	string	`"Copied"`	Label shown for resetMs after a successful copy
`resetMs`	number	`2000`	How long the copied state holds before reverting, in milliseconds
`variant`	ButtonVariant	`"outline"`	Passed straight through to the underlying Button
`size`	ButtonSize	`"md"`	Passed straight through to the underlying Button
`disabled`	boolean	`false`	Disables the button and blocks the copy
`iconOnly`	boolean	`false`	Drops the visible label, moving it to aria-label instead
`onCopy`	(value: string, ok: boolean) => void	-	Called with the value and whether the write actually succeeded
`class`	string	-	Additional CSS classes
`ref`	HTMLButtonElement \| HTMLAnchorElement \| null	`null`	Bindable element reference, matching Button's own ref type
`sound`	boolean	`false`	Plays the copy cue on a successful copy and error on a failed one, once the user has enabled sound