Clipboard Button

The <x-wirekit::clipboard-button> component copies a value to the clipboard on click and temporarily shows a "Copied!" confirmation. It uses the Clipboard API and announces the copy action to screen readers via a live region.

Usage

<x-wirekit::clipboard-button value="https://wirekit.app">
    Copy Link
</x-wirekit::clipboard-button>

Inline with a code snippet:

<div class="flex items-center justify-between rounded-lg px-3 py-2" style="background: var(--color-wk-bg-muted);">
    <code class="text-sm">composer require pushery/wirekit</code>
    <x-wirekit::clipboard-button value="composer require pushery/wirekit">
        Copy
    </x-wirekit::clipboard-button>
</div>

Custom Confirmation Text

Change the text shown after copying:

<x-wirekit::clipboard-button value="npm install wirekit" copiedText="Done!">
    Copy Command
</x-wirekit::clipboard-button>

Custom Duration

Control how long the "Copied!" state persists (in milliseconds):

<x-wirekit::clipboard-button value="secret-token-123" :duration="5000">
    Copy Token
</x-wirekit::clipboard-button>

Copying Dynamic Values

Use Blade expressions to copy dynamic content:

<x-wirekit::clipboard-button :value="$user->api_key">
    Copy API Key
</x-wirekit::clipboard-button>

Code Block with Copy

Combine with other components to create a copyable code snippet:

<x-wirekit::row justify="between" style="background: var(--color-wk-bg-muted); border-radius: 0.5rem; padding: 0.5rem;">
    <code style="font-family: var(--font-wk-mono); font-size: 0.875rem;">
        composer require pushery/wirekit
    </code>
    <x-wirekit::clipboard-button value="composer require pushery/wirekit">
        Copy
    </x-wirekit::clipboard-button>
</x-wirekit::row>

Visual Behavior

1. Default state — shows a clipboard icon + your slot content (e.g., "Copy Link")
2. After click — icon swaps to a green checkmark, label changes to copiedText
3. After duration — reverts to the default state automatically

The icon swap is handled by Alpine's x-show directives. The checkmark icon uses --color-wk-success-text for the green color.

Requirements

The clipboard button uses the Clipboard API (navigator.clipboard.writeText()), which requires:

• HTTPS or localhost — the Clipboard API is only available in secure contexts
• User gesture — the copy happens inside a click handler, which satisfies the browser's user activation requirement

If neither condition is met, the copy will silently fail. All modern browsers (Chrome, Firefox, Safari, Edge) support the Clipboard API.

Props

Accessibility

• The button is a native <button type="button"> — fully keyboard-accessible
• Icons: aria-hidden="true" on both SVGs (decorative — the text label is the accessible name)
• Live region: role="status" + aria-live="polite" announces "Copied to clipboard" to screen readers when the copy succeeds
• Focus ring visible via focus-visible:ring

Keyboard Interaction

Pitfalls

• Don't bind wire:click on the button — use the component's built-in :value prop. The Alpine handler writes via the Clipboard API; a wire:click server roundtrip would race the clipboard write.

Design Tokens

Personalization

Override classes globally via WireKit::personalize():

use Pushery\WireKit\WireKit;

WireKit::personalize('clipboard-button', [
    'base' => 'inline-flex items-center gap-2 px-4 py-2 text-sm bg-blue-600 text-white rounded-md',
]);

Further Reading

• MDN: Clipboard API — the browser API used for copying
• MDN: navigator.clipboard.writeText() — the specific method called
• MDN: role="status" — live region role for the copy announcement
• Can I Use: Clipboard API — browser support table