um unmagic

Copy button

A button that copies text to the clipboard, showing a check for a moment once it has, and announcing it to screen readers.

Copy from an element

from: copies the text of the element (or the value of the input) with that id, at the moment of the click, so the text isn't duplicated into an attribute.

bundle add unmagic-components

<div class="flex flex-wrap items-center gap-3">
  <code id="install_command" class="rounded-md bg-neutral-100 px-2 py-1 text-sm dark:bg-neutral-800">bundle add unmagic-components</code>
  <%= copy_button from: "install_command" %>
</div>

With a label

A block replaces the icon button with your own content.

<%= copy_button "deploy-key-preview-0000", class: button_classes(:default, size: :small) do %>
  Copy key
<% end %>

Copy button

Copy from an element

With a label

Couldn’t load

Are you sure?