Actions
CopyButton
Copies arbitrary text or the content of another element with accessible success and failure feedback.
01
See it and copy it
Framework example
Choose Astro, React, or Elements to compare native usage against the shared visual output. Each example assumes the framework-level setup is already complete.
View CopyButton code
Framework usage
Switch targets to compare the adapter code. This live preview runs the Astro example. React and Elements use their own behavior APIs; complete the matching framework setup before copying an example.---
import { CopyButton } from '@santi020k/lumen-astro'
---
<div class="grid gap-3">
<p id="share-message">Join the Lumen workspace at https://lumen.santi020k.com</p>
<div class="flex flex-wrap gap-2">
<CopyButton target="#share-message">Copy message</CopyButton>
<CopyButton value="https://lumen.santi020k.com" variant="default" size="sm" toast>
Copy link
<span slot="copied">Link copied</span>
<span slot="error">Copy failed</span>
</CopyButton>
</div>
</div>import { CopyButton } from '@santi020k/lumen-react'
export const Example = () => (
<>
<div className="grid gap-3">
<p id="share-message">Join the Lumen workspace at https://lumen.santi020k.com</p>
<div className="flex flex-wrap gap-2">
<CopyButton target="#share-message">Copy message</CopyButton>
<CopyButton value="https://lumen.santi020k.com" variant="default" size="sm" toast>
Copy link
<span slot="copied">Link copied</span>
<span slot="error">Copy failed</span>
</CopyButton>
</div>
</div>
</>
)<script type="module">
import { defineLumenElements } from '@santi020k/lumen-elements/define'
defineLumenElements()
</script>
<div class="grid gap-3">
<p id="share-message">Join the Lumen workspace at https://lumen.santi020k.com</p>
<div class="flex flex-wrap gap-2">
<lumen-copy-button target="#share-message">Copy message</lumen-copy-button>
<lumen-copy-button value="https://lumen.santi020k.com" variant="default" size="sm" toast>
Copy link
<span slot="copied">Link copied</span>
<span slot="error">Copy failed</span>
</lumen-copy-button>
</div>
</div>02
Choose your target
Add this component
Choose the package for your runtime. All adapters share the Lumen stylesheet. Use the matching registry command when you want a local wrapper for that framework.
pnpm add @santi020k/lumen-astropnpm add @santi020k/lumen-astrolumen add CopyButtonlumen add CopyButtonpnpm add @santi020k/lumen-reactpnpm add @santi020k/lumen-reactlumen add CopyButton --target reactlumen add CopyButton --target reactpnpm add @santi020k/lumen-elementspnpm add @santi020k/lumen-elementslumen add CopyButton --target elementslumen add CopyButton --target elementsAPI reference
Lumen-specific props and runtime attributes for the Astro primitive. Use the framework differences above and the copyable examples for React composition and Elements attributes; the public adapter types define their supported contracts.
| Attribute | Values | Default | Description |
|---|---|---|---|
| value | string | - | Copies the supplied arbitrary text without requiring code semantics. |
| target | CSS selector | - | Copies text content or a form control value from the referenced element. |
| label, copiedLabel, errorLabel | string | localized defaults | Sets the accessible idle, success, and failure feedback. |
| resetAfter | number | 2000 | Sets how long the copied or error state remains active in milliseconds. |
| toast | boolean | false | Also dispatches a Lumen Toast notification for copy success or failure. |
| variant | Button variant | "outline" | Uses the same default, destructive, ghost, link, outline, and secondary treatments as Button. |
| size | "default" | "sm" | "lg" | "icon" | "default" | Uses the shared Button sizing and touch-target contract. |
| copiedContent, errorContent | ReactNode | localized labels | Customizes visible React feedback while label props remain the accessible announcement. |
| class, className | string | "" | Merges custom classes with the generated ui-* root classes. |
| ...native attributes | HTML attributes | - | Forwards standard attributes to the root element unless the component consumes them. |
Runtime events
CustomEvents dispatched by the Astro UIPrimitives runtime for this component.
| Event | Target | Detail | When |
|---|---|---|---|
| ui:copy-success | CopyButton | { value: string } | Fires after arbitrary text is written to the clipboard. |
| ui:copy-error | CopyButton | { error: unknown } | Fires when the Clipboard API is unavailable or rejects the write. |