CopyToClipboard Component — Astro

Reusable component for copying text values to the clipboard with visual feedback

CopyToClipboard Component

A reusable component for copying text values to the clipboard with visual feedback.

Live Example

Click the button below to copy text:

Usage

astro astro 
---
import CopyToClipboard from '../../components/CopyToClipboard.astro';
---

<CopyToClipboard id="copy-example-email" value="example@email.com" format="Email" />
<CopyToClipboard id="copy-css-var" value="var(--accent)" format="CSS Variable" />
<CopyToClipboard id="copy-hex-color" value="#FF5733" format="Hex" />

Props

  • value (string, required) - The text value to copy
  • id (string, optional) - Unique ID for the button. If not provided, a random ID will be generated
  • label (string, optional) - ARIA label for the button
  • format (string, optional) - Format name shown in feedback message
  • class (string, optional) - Additional CSS classes

Features

  • Visual feedback with icon change (copy → checkmark)
  • Accessible with ARIA labels and keyboard support
  • Fallback for older browsers (document.execCommand)
  • Theme-aware styling
  • Auto-reset after 2 seconds

Svelte & Vanilla: Svelte · Vanilla: same HTML and BEM as in Usage above; add minimal JS for copy.