CopyButton
A reactive island component that writes a value to the clipboard when clicked, then briefly shows a "copied" state before resetting. The labels and timeout are fully configurable.
Basic
import CopyButton from '@davaux/ui/CopyButton'
<CopyButton value="Hello, world!" />Custom labels
<CopyButton
value="npm install @davaux/ui"
label="Copy install command"
copiedLabel="Copied!"
/>Short timeout
<CopyButton value="quick" timeout={500} copiedLabel="✓" />Multiple copy buttons
npm install @davaux/uipnpm add @davaux/ui<Group gap="sm" align="center">
<code>npm install @davaux/ui</code>
<CopyButton value="npm install @davaux/ui" />
</Group>Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | — | Text written to the clipboard (required) |
timeout | number | 2000 | Milliseconds to show the copied state before resetting |
label | string | 'Copy' | Button label in the default (not-yet-copied) state |
copiedLabel | string | 'Copied' | Button label shown after a successful copy |
class | string | — | Additional CSS class names on the button |