Copy to Clipboard — Vanilla

Copy button with vanilla HTML + JS. Ensure Rizzo CSS is loaded.

Copy to Clipboard

Button that copies text to the clipboard. Add your own copy/check icons inside the icon spans; the JS below wires up the click behavior.

Live example

HTML

html html 
<span class="tooltip-host" data-tooltip="Copy to clipboard">
  <button type="button" class="copy-to-clipboard" data-copy-value="pnpm add rizzo-css" aria-label="Copy to clipboard">
    <span class="copy-to-clipboard__text">pnpm add rizzo-css</span>
    <span class="copy-to-clipboard__icon copy-to-clipboard__icon--copy" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2h8c1.1 0 2 .9 2 2"/></svg></span>
    <span class="copy-to-clipboard__icon copy-to-clipboard__icon--check copy-to-clipboard__icon--hidden" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6L9 17l-5-5"/></svg></span>
    <span class="copy-to-clipboard__feedback" aria-live="polite"></span>
  </button>
</span>

JavaScript

javascript javascript 
document.querySelectorAll('.copy-to-clipboard').forEach(function(btn) {
  var host = btn.closest('.tooltip-host');
  var defaultTooltip = host ? (host.getAttribute('data-tooltip') || 'Copy to clipboard') : 'Copy to clipboard';
  if (host) host.setAttribute('data-copy-default-tooltip', defaultTooltip);
  btn.addEventListener('click', async function() {
    var value = btn.getAttribute('data-copy-value') || '';
    try {
      await navigator.clipboard.writeText(value);
      var copyIcon = btn.querySelector('.copy-to-clipboard__icon--copy');
      var checkIcon = btn.querySelector('.copy-to-clipboard__icon--check');
      var feedback = btn.querySelector('.copy-to-clipboard__feedback');
      if (copyIcon) copyIcon.classList.add('copy-to-clipboard__icon--hidden');
      if (checkIcon) checkIcon.classList.remove('copy-to-clipboard__icon--hidden');
      if (feedback) feedback.textContent = 'Copied!';
      if (host) { host.setAttribute('data-tooltip', 'Copied!'); }
      btn.setAttribute('aria-label', 'Copied!');
      setTimeout(function() {
        if (copyIcon) copyIcon.classList.remove('copy-to-clipboard__icon--hidden');
        if (checkIcon) checkIcon.classList.add('copy-to-clipboard__icon--hidden');
        if (feedback) feedback.textContent = '';
        if (host) host.setAttribute('data-tooltip', host.getAttribute('data-copy-default-tooltip') || defaultTooltip);
        btn.setAttribute('aria-label', 'Copy to clipboard');
      }, 2000);
    } catch (_) {}
  });
});

Astro / Svelte: Astro · Svelte