Skip to content

No results for

↑ ↓ navigate ↵ open Esc close 
php artisan aura:add clipboard-button

Copies the component source into resources/views/components/aura/. Run php artisan aura:init first if you haven't already. See the CLI guide for all options.

composer require bluestarsystem/aura-ui
php artisan aura:install

Full installation instructions in the Installation guide.

Overview

<x-aura::clipboard-button> copies a string — an API key, a licence, a command — and confirms it both visibly and to a screen reader.

Basic Usage

<x-aura::clipboard-button text="AURA-SKWM-XL0K-CHYF" />
<x-aura::clipboard-button :text="$licence->key" />

Sizes and variants

<div class="flex flex-wrap items-center gap-3">
    <x-aura::clipboard-button text="sm" size="sm" />
    <x-aura::clipboard-button text="md" />
    <x-aura::clipboard-button text="lg" size="lg" />
    <x-aura::clipboard-button text="primary" variant="primary" />
    <x-aura::clipboard-button text="ghost" variant="ghost" />
</div>

Icon only

Beside a field that already says what the value is, the label is redundant on screen — but never to a screen reader, so it moves to aria-label.

sk_live_51H… 
<div class="flex items-center gap-2">
    <code class="rounded border border-aura-surface-200 bg-aura-surface-50 px-2 py-1 font-mono text-xs">sk_live_51H…</code>
    <x-aura::clipboard-button text="sk_live_51H" icon-only size="sm" />
</div>

Props

Prop Type Default Description
text string '' The value to copy.
label string|null null Defaults to the translated "Copy".
copiedLabel string|null null Defaults to the translated "Copied".
variant string 'secondary' secondary, primary, ghost.
size string 'md' sm, md, lg.
iconOnly bool false Drops the visible label and moves it to aria-label.

Accessibility

  • Copying updates a polite live region. The icon changing to a tick is invisible to a screen reader; without the live region the action appears to do nothing.
  • The label is never removed, only moved: an icon-only button still has a name.
  • Where the clipboard API is unavailable — any http:// origin, and older browsers — it falls back to a hidden textarea instead of failing silently.