Clipboard - Rails UI Components

Usage

# <% Copy a direct value %>
<%= ui.clipboard "Copy", as: :btn, value: "Text to copy", variant: :secondary %>

# <% Copy from an element by ID %>
<input id="my_input" type="text" value="Copy this!" readonly>
<%= ui.clipboard "Copy", as: :btn, source_id: "my_input", variant: :outline %>

# <% With tooltip feedback %>
<%= ui.clipboard "Copy", source_id: "text_element", tooltip: "Click to copy", success_text: "Copied!" %>

Block contentText or HTML. Alternative to passing text as first argument.

Props

Prop	Type	Default	Description
`as`	`Symbol`	`nil`	Render as another UI component (e.g., :btn). When nil, renders as a span.
`value`	`String`	`nil`	The text content to copy. Use this OR source_id.
`source_id`	`String`	`nil`	ID of the element whose text content should be copied. Use this OR value.
`success_text`	`String`	`"Copied!"`	Text shown after successful copy (replaces button text or tooltip).
`tooltip`	`String`	`nil`	Tooltip text shown on hover. Enables tooltip functionality when set.
`tooltip_success`	`String`	`nil`	Tooltip text shown after successful copy. Defaults to success_text if not provided.
`tooltip_placement`	`String`	`"top"`	Position of the tooltip relative to the element.

Also accepts any HTML attributes via **options (e.g., id:, data:, aria:). class: is also supported for custom styling.

Examples

Copy from input field

<%= ui.group do %>
  <input id="clipboard_input" type="text" class="form__field form__field-readonly" value="Copy this!" readonly>
  <%= ui.clipboard "Copy", as: :btn, source_id: "clipboard_input", variant: :outline, class: "min-w-32" %>
<% end %>

Copy with tooltip

Any content to copy Copy

<div class="flex items-baseline gap-1">
  <span id="clipboard_text">Any content to copy</span>
  <%= ui.clipboard "Copy", class: "link", source_id: "clipboard_text", tooltip: "Click to copy", success_text: "Content copied!" %>
</div>

Icon button with direct value

<div class="flex items-baseline gap-1">
  <%= ui.clipboard ui.icon("clipboard"), as: :btn, size: :icon_xs, variant: :secondary, value: "https://example.com", success_text: "URL copied!", tooltip: "Copy URL" %>
  <%= ui.clipboard ui.icon("clipboard"), as: :btn, size: :icon_sm, variant: :secondary, value: "https://example.com", success_text: "URL copied!", tooltip: "Copy URL" %>
  <%= ui.clipboard ui.icon("clipboard"), as: :btn, size: :icon_md, variant: :secondary, value: "https://example.com", success_text: "URL copied!", tooltip: "Copy URL" %>
  <%= ui.clipboard ui.icon("clipboard"), as: :btn, size: :icon_lg, variant: :secondary, value: "https://example.com", success_text: "URL copied!", tooltip: "Copy URL" %>
</div>