Clipboard

RzClipboard is an SSR-first primitive for one-click copy actions. Compose it with ClipboardTrigger and ClipboardFeedback to keep idle and copied states independent while preserving layout stability.

Under the Hood

Interactivity is powered by Alpine via x-data="rzClipboard". The component first attempts navigator.clipboard.writeText and can optionally fall back to document.execCommand('copy') for broader compatibility in constrained environments.

Buttons

Equivalent patterns for icon-only and text buttons with center-aligned, equally sized feedback content.

Source

<RzClipboard Value="Icon button clicked!" AriaLabel="Copy icon button text" AsChild>
    <RzButton Variant=ThemeVariant.Secondary Outline Size=Size.Small class="w-10 justify-center">
        <ClipboardTrigger>
            <span class="inline-flex size-5 items-center justify-center"><Blazicon Svg="
" aria-hidden="true" /></span>
            <span class="sr-only">Copy</span>
        </ClipboardTrigger>
        <ClipboardFeedback>
            <span class="inline-flex size-5 items-center justify-center text-success"><Blazicon Svg="
" aria-hidden="true" /></span>
            <span class="sr-only">Copied</span>
        </ClipboardFeedback>
    </RzButton>
</RzClipboard>

<RzClipboard Value="Hello, World!" AsChild>
    <RzButton Variant=ThemeVariant.Primary Outline class="w-44 justify-center">
        <ClipboardTrigger>
            <span class="inline-flex w-28 items-center justify-center gap-2"><Blazicon Svg="
" aria-hidden="true" />Copy Content</span>
        </ClipboardTrigger>
        <ClipboardFeedback>
            <span class="inline-flex w-28 items-center justify-center gap-2"><Blazicon Svg="
" aria-hidden="true" />Copied!</span>
        </ClipboardFeedback>
    </RzButton>
</RzClipboard>

Code Block

Attach copy behavior to a compact command block action.

Source

<div class="relative rounded-lg border border-zinc-200/75 bg-zinc-50">
    <div class="flex items-center justify-between">
        <code class="grow p-4 text-sm">npm install alpinejs</code>
        <RzClipboard Value="npm install alpinejs" AriaLabel="Copy npm command" AsChild>
            <RzButton Variant=ThemeVariant.Ghost Size=Size.Small class="mx-2 w-10 justify-center">
                <ClipboardTrigger>
                    <span class="inline-flex size-5 items-center justify-center"><Blazicon Svg="
" aria-hidden="true" /></span>
                    <span class="sr-only">Copy code</span>
                </ClipboardTrigger>
                <ClipboardFeedback>
                    <span class="inline-flex size-5 items-center justify-center text-success"><Blazicon Svg="
" aria-hidden="true" /></span>
                    <span class="sr-only">Copied code</span>
                </ClipboardFeedback>
            </RzButton>
        </RzClipboard>
    </div>
</div>

Input

Use TargetSelector to copy from an input value.

Source

<input id="website-url" value="https://rizzyui.jalex.io/" readonly />
<RzClipboard TargetSelector="#website-url" AriaLabel="Copy website URL" AsChild>
    <RzButton Variant=ThemeVariant.Secondary Outline Size=Size.Small class="w-20 justify-center">
        <ClipboardTrigger><span class="inline-flex w-12 justify-center">Copy</span></ClipboardTrigger>
        <ClipboardFeedback><span class="inline-flex w-12 justify-center text-success">Copied!</span></ClipboardFeedback>
    </RzButton>
</RzClipboard>

API Key

Copy sensitive-looking tokens from compact list rows.

Source

<RzClipboard Value="db_1234567890abcdefghijklmnopqrstuvwxyz" AriaLabel="Copy API key" AsChild>
    <RzButton Variant=ThemeVariant.Secondary Outline Size=Size.Small class="w-10 justify-center">
        <ClipboardTrigger>
            <span class="inline-flex size-5 items-center justify-center"><Blazicon Svg="
" aria-hidden="true" /></span>
            <span class="sr-only">Copy API key</span>
        </ClipboardTrigger>
        <ClipboardFeedback>
            <span class="inline-flex size-5 items-center justify-center text-success"><Blazicon Svg="
" aria-hidden="true" /></span>
            <span class="sr-only">Copied API key</span>
        </ClipboardFeedback>
    </RzButton>
</RzClipboard>

Component API

The following tables document the complete parameter surface for the clipboard component family.

RzClipboard

Property	Description	Type	Default
`ChildContent`	Composition content containing `ClipboardTrigger` and `ClipboardFeedback`.	`RenderFragment`	Required
`Value`	Direct text source for the clipboard operation.	`string?`	`null`
`TargetSelector`	CSS selector used to resolve copy text from another DOM element.	`string?`	`null`
`PreferValue`	When both `Value` and `TargetSelector` are set, chooses `Value` first.	`bool`	`false`
`FeedbackDuration`	How long (ms) the copied state remains visible before reset.	`int`	`1200`
`Disabled`	Prevents copy behavior and applies disabled accessibility state.	`bool`	`false`
`UseFallback`	Enables fallback copy using `document.execCommand('copy')`.	`bool`	`true`
`AriaLabel`	Accessible name used by assistive technology for icon-only hosts.	`string?`	`"Copy to clipboard"`
`AsChild`	Merges behavior and classes onto a supplied child host (recommended for button styling).	`bool`	`false`

ClipboardTrigger

Property	Description	Type	Default
`ChildContent`	Content shown when `copied == false`.	`RenderFragment`	Required

ClipboardFeedback

Property	Description	Type	Default
`ChildContent`	Content shown when `copied == true`. Uses `aria-live="polite"`.	`RenderFragment`	Required

Alpine API

The underlying Alpine data component is rzClipboard. This is useful when integrating with HTMX or custom event listeners.

State and Configuration

Member	Type	Description
`value`	`string \| null`	Resolved from `data-copy-value`.
`targetSelector`	`string \| null`	Resolved from `data-target-selector`.
`preferValue`	`bool`	Uses `value` first when both sources exist.
`feedbackDuration`	`int`	Controls copied-state timeout.
`useFallback`	`bool`	Enables execCommand fallback path.
`disabled`	`bool`	Prevents copy action when true.
`copied`	`bool`	Current visual state used by trigger/feedback.
`notCopied`	`getter`	Convenience inverse of `copied`.

Methods

Method	Signature	Description
`init`	`()`	Reads data attributes and initializes runtime state.
`getTextToCopy`	`() => string?`	Resolves text using `PreferValue`, `TargetSelector`, then `Value`.
`copy`	`()`	Performs copy and dispatches success/failure events.
`onSuccess`	`(text)`	Sets copied state, dispatches event, schedules reset timer.
`fallbackCopy`	`(text) => bool`	Attempts legacy `execCommand('copy')` flow.
`dispatchFailed`	`(reason, error?)`	Dispatches `rz:copy-failed` with reason payload.

Events

Event	Payload	Description
`rz:copy`	`{ id, text }`	Fired after a successful clipboard write.
`rz:copy-failed`	`{ id, reason, error }`	Fired when copy fails (empty text, unavailable clipboard, permission denied).

Styling hooks are available through data-slot="clipboard", data-slot="clipboard-trigger", and data-slot="clipboard-feedback". For polished layouts, keep trigger and feedback content centered with equal width/height classes.