Copy

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.

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.