Copy Button

A click-to-copy button component for Laravel applications. Copies text to clipboard with visual feedback. Works with Livewire and Vue 3.

Installation

composer require mrshanebarron/copy-button

Livewire Usage

Basic Usage

<livewire:sb-copy-button text="Text to copy" />

Custom Label

<livewire:sb-copy-button text="npm install package" label="Copy command" />

With Code Block

<div class="flex items-center gap-2 bg-gray-100 p-3 rounded">
    <code class="flex-1">npm install mrshanebarron/button</code>
    <livewire:sb-copy-button text="npm install mrshanebarron/button" />
</div>

Livewire Props

Vue 3 Usage

Setup

import { SbCopyButton } from './vendor/sb-copy-button';
app.component('SbCopyButton', SbCopyButton);

Basic Usage

<template>
  <SbCopyButton text="Hello, World!" />
</template>

With Code Block

<template>
  <div class="flex items-center gap-2 bg-gray-100 p-3 rounded font-mono">
    <code class="flex-1 text-sm">{{ command }}</code>
    <SbCopyButton :text="command" />
  </div>
</template>

<script setup>
const command = 'npm install @package/name';
</script>

Custom Labels

<template>
  <SbCopyButton
    :text="apiKey"
    label="Copy API Key"
    copied-label="Copied to clipboard!"
  />
</template>

Share Link

<template>
  <div class="flex items-center gap-2">
    <input
      :value="shareUrl"
      readonly
      class="flex-1 border rounded px-3 py-2"
    />
    <SbCopyButton :text="shareUrl" label="Copy Link" />
  </div>
</template>

<script setup>
const shareUrl = 'https://example.com/share/abc123';
</script>

Vue Props

Events

Features

• One-click Copy: Uses Clipboard API
• Visual Feedback: Changes label when copied
• Reset: Returns to original label after delay
• Accessible: Button with clear purpose

Styling

Uses Tailwind CSS:

• Gray button style
• Hover and focus states
• Icon (clipboard) included
• Success feedback

Requirements

• PHP 8.1+
• Laravel 10, 11, or 12
• Modern browser with Clipboard API

License

MIT License