Rocket Copy Button Pro

Rocket is currently in alpha – available with Datastar Pro.

A simple, reusable copy-to-clipboard button component with visual feedback.

Demo

Explanation #

The component outputs a copy button that uses the Clipboard API to copy the text in the code attribute to the clipboard. It provides visual feedback that auto-resets after 2 seconds.

Usage Example #

1<rocket-copy data-attr:code="$myCode"></rocket-copy>

Rocket Component #

 1<template data-rocket:rocket-copy
 2          data-props:code="string|="
 3>
 4    <script>
 5        $$copied = false
 6    </script>
 7    <button data-on:click="navigator.clipboard.writeText($$code); $$copied = true"
 8            data-on:click__delay.2s="$$copied = false"
 9    >
10        <iconify-icon data-attr:icon="'pixelarticons:' + ($$copied ? 'section-copy' : 'copy')" />
11    </button>
12    <span data-if="$$copied">Copied!</span>
13</template>