Skip to content
lostcoords / ui

Components

Copy button

Copy text or a live field value with animated confirmation and accessible feedback.

Pass exactly one of value: for supplied text or source: for an element ID. Inputs and textareas copy their current value; other elements copy their text content, including whitespace. Clipboard access requires HTTPS or localhost and browser permission.

The button shows confirmation only after copying succeeds. Failure shows a retry state and announces how to copy manually. reset_after: sets the confirmation time in milliseconds (2000 by default). Customize copied_label: and error_label:, or use the included English, Japanese, and Spanish translations. Use aria: { label: "Copy invite link" } for a contextual accessible name, including on icon-only buttons.

Listen on an ancestor for bubbling lc-copy:copied (event.detail.text) and lc-copy:error (event.detail.error) events. The button keeps focus and reserves room for every label. Reduced motion changes feedback immediately. See Motion to tune the transition.

Usage

After the one-time setup, call the helper directly from ERB. No component import is needed.

<%= lc_copy_button value: "https://ui.lostcoords.com", variant: :primary %>
<%= lc_copy_button "Copy link", value: "https://ui.lostcoords.com", copied_label: "Link copied" %>
<%= lc_copy_button "Copy link", value: "https://ui.lostcoords.com", icon_only: true, variant: :ghost %>
<%= lc_copy_button value: "Unavailable", disabled: true %>

Examples

Labels, icons and disabled controls

<%= lc_copy_button value: "https://ui.lostcoords.com", variant: :primary %>
<%= lc_copy_button "Copy link", value: "https://ui.lostcoords.com", copied_label: "Link copied" %>
<%= lc_copy_button "Copy link", value: "https://ui.lostcoords.com", icon_only: true, variant: :ghost %>
<%= lc_copy_button value: "Unavailable", disabled: true %>

Copy from an element

Edit the link, then copy it. The button reads the current value each time.

<%= lc_stack gap: :related, class: "w-full max-w-md" do %>
  <%= lc_field label: "Share link", id: "example-1-link" do |field| %>
    <%= lc_input value: "https://ui.lostcoords.com", **field %>
  <% end %>
  <%= lc_copy_button "Copy current link", source: "example-1-link", copied_label: "Link copied", class: "w-full" %>
  <%= lc_text "Edit the link, then copy it. The button reads the current value each time.", size: :small, tone: :muted %>
<% end %>

Translated labels

<% I18n.with_locale(:ja) do %>
  <%= lc_copy_button value: "https://ui.lostcoords.com", lang: "ja" %>
<% end %>
<% I18n.with_locale(:es) do %>
  <%= lc_copy_button value: "https://ui.lostcoords.com", lang: "es" %>
<% end %>

API reference

Helpers render semantic HTML and include their interaction wiring. Pass native attributes through class:, data:, aria: and the usual Rails options. Blocks use captured ERB content.

lc_copy_button

lc_copy_button(label = nil, value: nil, source: nil, copied_label: nil, error_label: nil, reset_after: 2000, icon_only: false, variant: :secondary, size: :md, **attributes)
InputDefaultValues
labelnilAccessible name, visible where applicable
valuenil—
sourcenil—
copied_labelnil—
error_labelnil—
reset_after2000—
icon_onlyfalsetrue · false
variant:secondary:primary · :secondary · :outline · :glass · :ghost · :destructive
size:md:sm · :md · :lg
attributes{}Native HTML attributes; class:, data: and aria: merge with defaults

The examples also use lc_stack, lc_field, lc_input, and lc_text. Each is documented on its own page.

Styling and extension

Use class: to merge utilities, native attributes for application behavior, and the theming guide for the shared palette. For custom markup, the advanced class helpers expose the same styles, including glass surfaces and class merging.

API JSON · LLM reference