Actions

CopyButton

Button that writes a string value to the clipboard and flips to a confirmation state for a short window after a successful copy.

import { CopyButton } from '@lostgradient/cinder/copy-button';
actionclipboard
01

Overview

Button that copies a given text value to the clipboard with visual feedback.

Usage

svelte 
<script lang="ts">
  import CopyButton from '@lostgradient/cinder/copy-button';
</script>

<CopyButton />
Live preview
02

When to use

Use when
  • Offering one-click copy of a token, snippet, share link, or code sample.
  • Pairing with code-block so readers can grab the rendered source.
Avoid when
  • Triggering a generic non-clipboard action — use button instead.
  • Copying long-form rich content that needs format preservation — handle clipboard logic directly.
03

Examples

Basic copy button

Click to copy. The button enters a confirmation state for a brief moment.

04

Props

Props for copy-button
Name Type Default Required Bindable Description
value text req Text to copy to the clipboard.
confirmDuration number 1500 Duration in ms to show the confirmation state. Default 1500.
label text Accessible label for the idle state. Defaults to "Copy to clipboard".
copiedLabel text Accessible label for the copied state — what aria-live="polite" announces when the copy succeeds. Defaults to "Copied". Override this when label is customized so the live-region announcement reflects what just happened (e.g. label="Copy code" + copiedLabel="Code copied").
iconOnly boolean false Render the button with only an icon and a visually hidden label. When true, defaults to a Copy icon (idle) and a Check icon (copied).
children snippet Default content (idle state).
confirmation snippet Content rendered while in the "copied" state.