PhiaUi.Components.CopyButton (phia_ui v0.1.17)

Copy Markdown View Source

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

Summary

Functions

copy_button(assigns)

Renders a copy-to-clipboard icon button.

Functions

copy_button(assigns)

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-*).