Buttons

Copy button

Copies text to the clipboard and says so: the icon turns into a tick and the label into “Copied”, then both come back. The button never changes width.

Installation

npx sinaui add copy-button

Copy src/lib/ui/CopyButton.svelte, with Button.svelte, Icon.svelte, Tooltip.svelte, announce.ts and tokens.css. No dependencies.

Examples

With a label

<script lang="ts">
	import CopyButton from '#lib/ui/CopyButton.svelte';
</script>

<CopyButton value="https://bayt-al-hikma.org/manuscripts/optics-1021">Copy link</CopyButton>

Icon only

Next to the thing it copies. The tooltip names it, and says “Copied” after.

Catalog reference BH-MS-0873

<script lang="ts">
	import CopyButton from '#lib/ui/CopyButton.svelte';

	const reference = 'BH-MS-0873';
</script>

<div class="ref">
	Catalog reference <code>{reference}</code>
	<CopyButton value={reference} square variant="ghost" size="sm" />
</div>

<style>
	.ref {
		display: flex;
		align-items: center;
		gap: 0.5rem;
	}
</style>

Props

Prop	Type	Default
`value`	`string \| () => string \| Promise<string>` (required)
`variant`	`'primary' \| 'secondary' \| 'ghost'`	`'secondary'`
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`
`square`	`boolean`: icon only	`false`
`copied`	`string`	`'Copied'`
`children`	the label	“Copy”

Keyboard

Key	Does
`Enter` `Space`	Copies

Accessibility

“Copied”, or “Couldn't copy” if the browser refuses, is announced to screen readers.
The icon-only button is named by its tooltip.
With reduced motion, the icons and labels crossfade without scaling.