Actions

CopyButton

Button that writes plain text plus optional rich HTML/image clipboard representations and flips to a confirmation state after success.

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>

<div style="display: flex; align-items: center; gap: 0.5rem;">
  <code
    style="padding: 0.25rem 0.5rem; background-color: var(--cinder-surface-inset); color: var(--cinder-text-default); border-radius: 4px;"
    >npx cinder install</code
  >
  <CopyButton value="npx cinder install" label="Copy install command" />
</div>
Live preview
npx cinder install
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
Description
value required text Text to copy to the clipboard.
html text Optional HTML representation written alongside text/plain through ClipboardItem.
image text Optional image blob or URL written alongside text and HTML when supported.
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.
onError () => void Called when the clipboard write fails (permission denied, insecure context, or the legacy execCommand fallback also failing).