Phara UI v2.x
Login

Copy to Clipboard

Interactive component with visual feedback for copying text to clipboard.

Basic

Default copy to clipboard component with icon style.

Blade 
<x-ui::copy-to-clipboard text="Text to copy" style="icon" />
Styles

Choose between icon-only or button style with text.

Blade 
<x-ui::copy-to-clipboard text="Copy this">Copy</x-ui::copy-to-clipboard>
Variants

Use the variant prop to change the visual style of the button.

Blade 
<x-ui::copy-to-clipboard text="Copy this" variant="primary">Copy</x-ui::copy-to-clipboard>
Sizes

The default size works great for most cases, but here are some additional size options for unique situations.

Blade 
<x-ui::copy-to-clipboard text="Copy this" size="lg">Large</x-ui::copy-to-clipboard>
Custom Icons

Customize the copy and success icons for specific use cases.

Blade 
<x-ui::copy-to-clipboard text="Copy this" icon="document-duplicate" successIcon="check-circle">Copy Document</x-ui::copy-to-clipboard>
Practical Examples

Real-world use cases for copy to clipboard functionality.

sk_live_abc123xyz456def789 
npm install phara/ui-kit
https://example.com/share/abc123
Blade 
<x-ui::copy-to-clipboard text="sk_live_abc123xyz456def789" style="icon" variant="primary" successMessage="API Key Copied!" />