Miscellaneous
Small helper components: acun:copy-button copies a text to the clipboard with one click, and acun:kbd shows keyboard keys and shortcuts within text, styled as keys.
Copying text
text is the text written to the clipboard. On click, the button shows a check icon and the word "Copied" for two seconds; the result is also announced to screen readers. If the Clipboard API is not available (plain http, an iframe without permission), it tries again with the older method, and if that fails too, the button says "Could not copy". variant and size set the look; label changes the text.
<div class="flex flex-wrap items-center gap-3">
<span class="font-mono text-sm text-gray-900 dark:text-zinc-100">ORD-2026-004817</span>
<acun:copy-button text="ORD-2026-004817" size="sm" />
<acun:copy-button text="ORD-2026-004817" variant="soft" size="sm" label="Copy order number" />
</div>| Prop | Values |
|---|---|
text | Text to copy |
label | Button text; default "Copy" |
variant | acun:button variants; default white |
size | sm | md | lg | icon |
Copying from an element
target takes a CSS selector. If the target is a form field (input, textarea, select), its value is copied; otherwise its text, with leading and trailing whitespace removed. The value is read at the moment of the click, so changes made in the field and Livewire updates are reflected in the copy too.
<div class="space-y-2">
<p id="delivery-address" class="rounded-sm bg-gray-50 p-3 text-sm dark:bg-zinc-800/60">No. 7, Moda St., Caferağa Neighborhood, Kadıköy / Istanbul</p>
<acun:copy-button target="#delivery-address" size="sm" label="Copy address" />
</div>
<div class="space-y-2">
<acun:textarea id="order-note" label="Order note" rows="2">Please gift-wrap it and email the invoice separately.</acun:textarea>
<acun:copy-button target="#order-note" size="sm" label="Copy note" />
</div>| Prop | Values |
|---|---|
target | CSS selector, e.g. #delivery-address |
Inside an input group
size="icon" shows only the icon; in that case label becomes the button's screen reader name and the tooltip that appears on hover. After a successful copy, the button dispatches the copied event ($event.detail.text); the example uses this event to show a notification. Other attributes (class, disabled, wire:click…) are added directly to the button.
<acun:input-group id="invite-link" label="Invite link" value="https://panel.ornek.test/davet/K7M2-Q9XA" readonly>
<acun:slot:after>
<acun:copy-button
target="#invite-link"
variant="ghost"
size="icon"
label="Copy link"
class="-me-1.5"
x-on:copied="$dispatch('toast', { type: 'success', message: 'Invite link copied to the clipboard.' })"
/>
</acun:slot:after>
</acun:input-group>| Prop | Values |
|---|---|
size="icon" | Icon only; the name comes from label |
x-on:copied | Runs after a successful copy |
Keyboard key
acun:kbd shows a single key from its slot content. It sits within text without breaking the flow of the line; use it to explain shortcuts and in help texts. Symbols such as ⌘, ⇧, and ↵ are read to screen readers as "Command", "Shift", and "Enter".
<div class="space-y-3 text-sm text-gray-600 dark:text-zinc-400">
<p>Press <acun:kbd>Esc</acun:kbd> to close the open window.</p>
<p>Move through the list with <acun:kbd>↑</acun:kbd> and <acun:kbd>↓</acun:kbd>, and press <acun:kbd>↵</acun:kbd> to select.</p>
</div>| Prop | Values |
|---|---|
slot | Name or symbol of the key |
Key combinations
keys takes the keys pressed together as an array and draws each one as a separate key, with separator between them; the default separator is +, and an empty string removes it. size="sm" draws smaller keys for menu rows and button hints.
<div class="space-y-3 text-sm text-gray-600 dark:text-zinc-400">
<p>Open search: <acun:kbd :keys="['⌘', 'K']" /> or <acun:kbd :keys="['Ctrl', 'K']" /></p>
<p>Save your changes: <acun:kbd :keys="['Ctrl', 'Shift', 'S']" /></p>
<div class="flex flex-wrap items-center gap-4">
<acun:kbd :keys="['⌘', '⇧', 'P']" separator="" size="sm" />
<acun:kbd :keys="['Alt', 'F4']" size="sm" />
</div>
</div>| Prop | Values |
|---|---|
keys | Array, e.g. ['⌘', 'K'] |
separator | Mark between the keys; default '+' |
size | sm | md |
Props and slots
The values the component accepts.
| Prop | Default | Description |
|---|---|---|
copy-button: text | null | Text written to the clipboard |
copy-button: target | null | CSS selector used when text is not given: the value of a form field or the text of the element is copied |
copy-button: label | Copy | Button text; with size="icon", the screen reader name and the tooltip |
copy-button: variant | white | One of the acun:button variants (primary, ghost, soft…) |
copy-button: size | md | sm · md · lg · icon (icon only) |
copy-button: timeout | 2000 | How many milliseconds the success or error state stays visible |
copy-button: copied | — | Event dispatched from the button after a successful copy; detail: { text } |
kbd: keys | null | Array of keys pressed together; if omitted, the slot is a single key |
kbd: separator | + | Mark between the keys of a combination; an empty string removes it |
kbd: size | md | sm · md |