RealZone22/PenguBlade
Watch
1
0
Fork
You've already forked PenguBlade
 0
Code Issues Pull requests Projects Releases 2 Packages Wiki Activity Actions
Page: Copy
Pages
Accordion Alert Avatar Badge Banner Breadcrumb Button Card Carousel Chat Checkbox Copy Counter Divider Dropdown File Home Input KBD Link Modal Password Progress Radio Range Rating Select Skeleton Spinner Steps Tab Table Textarea Toast Toggle Tooltip
1 Copy
Lenny P. edited this page 2026-10-06 13:37:25 +02:00
Unescape Escape
Table of contents
This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

Copy Component

The Copy component renders a button that copies a given text to the clipboard when clicked. It visually indicates the copy status by toggling between a copy icon and a success icon. Optional tooltip support provides additional user guidance.

Example Usage

<x-copy text="Copy this text" tooltip="Click to copy to clipboard" />

Props

  • copyIcon (string, default: "icon-clipboard")
    CSS class for the icon displayed before copying (default clipboard icon).

  • copiedIcon (string, default: "icon-check")
    CSS class for the icon shown after the text has been successfully copied (default checkmark icon).

  • text (string|null)
    The text content that will be copied to the clipboard when the button is clicked.

  • tooltip (string|null)
    Tooltip text shown on hover over the copy button.

  • hint (string|null)
    Hint text shown under the copy button

Overview

This Copy component provides a simple interactive button to copy specified text to the user’s clipboard. It uses Alpine.js to manage the copy action and state, switching icons to confirm successful copying. The component is accessible and styled with Tailwind CSS, supporting customizable icons and optional tooltips.