PineUiPhoenix.Components.CopyToClipboard (Pine UI v0.2.1)

Copy Markdown View Source

A click-to-copy control with confirmation feedback.

A port of Pines copy to clipboard.

<.copy_to_clipboard text="npm install pines" />

Summary

Forms

Renders a copy-to-clipboard control.

Forms

copy_to_clipboard(assigns)

Renders a copy-to-clipboard control.

Examples

<.copy_to_clipboard text={@api_key} variant="inline" />
<.copy_to_clipboard text={@share_url} variant="icon" />

Browser support

Uses the async Clipboard API, which browsers only expose in secure contexts (HTTPS, or localhost). The component falls back to a hidden <textarea> plus document.execCommand when navigator.clipboard is unavailable, so it still works over plain HTTP on an internal network.

Accessibility

The confirmation is announced through an aria-live="polite" region, so screen-reader users are told the copy succeeded rather than only seeing the label change.

Attributes

  • id (:string) - Defaults to nil.
  • text (:string) (required) - The text placed on the clipboard.
  • variant (:string) - inline shows the text alongside a copy affordance; icon is the button alone. Defaults to "button". Must be one of "button", "icon", or "inline".
  • label (:string) - Defaults to "Copy".
  • copied_label (:string) - Defaults to "Copied!".
  • timeout (:integer) - How long the confirmation stays visible, in ms. Defaults to 2000.
  • class (:string) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block - Overrides the displayed text for the inline variant.