Copy button ported

Copy a value with immediate confirmation.

Copy a value with immediate confirmation.

Live specimen

Loading demo…

Guidance

When to use

Next to API keys, install commands, links, or code snippets.
Icon-only copy controls in dense rows, with an accessible label.
Any copy action that should confirm Copied or Could not copy in place.

When not to use

Use split-button when copying has alternatives, such as Copy link and Copy as Markdown.
Use code-block for full code samples, which include their own copy control.

Installation

pnpm dlx shadcn-svelte@latest add @arcui/copy-button

Usage

<script lang="ts">
  import { CopyButton } from '$lib/components/copy-button';
</script>

<CopyButton value={apiKey} label="Copy key" iconOnly />

Variants & Examples

Default

Standard appearance and configuration.

<CopyButton value={apiKey} label="Copy key" iconOnly />

API Reference

Prop	Type	Default	Description
`value`	`string`	–	(Required) The text to copy.
`label`	`string`	'"Copy"'	Idle label and accessible name.
`iconOnly`	`boolean`	'false'	Hides the text and shows only the icon.
`disabled`	`boolean`	–	Disables the button.
`onCopied`	`() => void`	–	Called after a successful copy.
`className`	`string`	–	Extra class on the button.

Keyboard Interactions

Key	Action
`Enter / Space`	Copies the value.

Accessibility

Native button named by label, including when iconOnly.
A polite role="status" region announces "<label>: Copied" or "<label>: Could not copy".
The label cell reserves the widest of its three states, so the layout never shifts.

Motion

- Icons trade places through a blur on a slow, nearly critically damped spring, and the check draws its stroke in. - Only the changed letters of the label move; the same motion plays in reverse on reset. - Reduced motion swaps icon and text with an instant fade and skips the stroke draw.

Notes for AI

Use next to any copyable value: API keys, install commands, links, code. For a copy action that also has alternatives use split-button.
Named export only; there is no default export.
Clipboard state and reset timing come from lib/use-copy-feedback, so copy that file along with the component.

Source of truth: registry/components/copy-button/copy-button.tsx