Components

Copy Button

A button that copies text to the clipboard, with a copied state and a live announcement.

php artisan blatui:add copy-button

composer require anousss007/blatui

<div class="flex items-center gap-2">
    <code class="bg-muted rounded px-2 py-1 font-mono text-sm">composer require anousss007/blatui</code>
    <x-ui.copy-button value="composer require anousss007/blatui" />
</div>

With Label

<x-ui.copy-button value="https://blatui.remix-it.com" class="border">Copy link</x-ui.copy-button>

API Reference

Props, slots and exposed methods for <x-ui.copy-button>.

Props

Prop	Type	Default	Description
`value`	`string`	`''`	The string written to the clipboard when the button is clicked.
`label`	`string`	`__('Copy')`	Accessible label for the button. It becomes "Copied" for 1.5s after a successful copy.

Slots

Slot	Description
`default`	Optional visible text label rendered next to the copy/check icon. Omit it for an icon-only button.

Methods

Available on the component's Alpine scope — call them from markup in the slot (e.g. @click="…").

Method	Description
`copy()`	Writes value to the clipboard, flips the icon to a check, and resets after 1.5 seconds.