# `PhiaUi.Components.CopyButton`
[🔗](https://github.com/charlenopires/PhiaUI/blob/v0.1.17/lib/phia_ui/components/buttons/copy_button.ex#L1)

Copy-to-clipboard button component powered by the `PhiaCopyButton` vanilla JS hook.

Renders an icon-only button that copies the given `value` to the user's
clipboard on click. After a successful copy, the copy icon is swapped for a
check icon for the duration of `timeout` milliseconds, providing clear visual
feedback. A hidden `aria-live` span announces "Copied!" to screen readers.

The hook uses the `navigator.clipboard.writeText` API where available, with a
`textarea` + `execCommand("copy")` fallback for older browsers.

## Usage

    <%!-- Minimal: copies an npm install command --%>
    <.copy_button id="copy-npm" value="npm install phia_ui" />

    <%!-- With a custom label and extended feedback timeout --%>
    <.copy_button id="copy-api-key" value={@api_key} label="Copy API key" timeout={3000} />

## Setup

1. Ensure `PhiaCopyButton` is registered in your LiveSocket hooks:

       import PhiaCopyButton from "./hooks/copy_button"
       let liveSocket = new LiveSocket("/live", Socket, {
         hooks: { PhiaCopyButton }
       })

2. Add the `id` attribute — `phx-hook` requires a unique DOM `id`.

## Accessibility

- `aria-label` on the button announces the action to screen readers.
- `aria-live="polite"` on a visually hidden `<span>` announces "Copied!" to
  screen readers after a successful copy without interrupting ongoing
  announcements.
- Both icons are `aria-hidden="true"` to avoid redundant announcements.

## Theme tokens

The button uses PhiaUI semantic Tailwind v4 tokens so it adapts automatically
to dark mode and custom colour presets:

- `bg-background` / `border-border` — matches card and input surfaces
- `text-muted-foreground` — de-emphasised icon colour at rest
- `hover:bg-accent hover:text-foreground` — standard hover state
- `focus-visible:ring-ring` — accessible keyboard focus ring

# `copy_button`

Renders a copy-to-clipboard icon button.

The button shows a clipboard icon at rest and a check icon briefly after the
user clicks it to confirm the copy succeeded. The hook handles both the
Clipboard API and an `execCommand` fallback.

## Examples

    <%!-- Copy a code snippet --%>
    <.copy_button id="copy-snippet" value="mix phia.add Button" />

    <%!-- Copy an API key with a longer feedback window --%>
    <.copy_button id="copy-key" value={@api_key} label="Copy API key" timeout={3000} />

    <%!-- Override button sizing --%>
    <.copy_button id="copy-sm" value={@value} class="h-6 w-6" />

## Attributes

* `id` (`:string`) (required) - Unique DOM ID for the button element. Required because `phx-hook` targets
  elements by ID. Use a stable, page-unique string like `"copy-api-key"`.

* `value` (`:string`) (required) - The text string to copy to the clipboard when the button is clicked.
* `label` (`:string`) - Accessible label for the button, used as `aria-label`. Defaults to `"Copy"`. Defaults to `"Copy"`.
* `timeout` (`:integer`) - Duration in milliseconds to show the check icon after a successful copy.
  After this period the button reverts to the copy icon. Defaults to `2000`.

  Defaults to `2000`.
* `class` (`:string`) - Additional CSS classes merged via `cn/1`. Last-wins conflict resolution applies. Defaults to `nil`.
* Global attributes are accepted. HTML attributes forwarded to the `<button>` element (e.g. `data-*`, `phx-*`).

---

*Consult [api-reference.md](api-reference.md) for complete listing*