Popover
A small panel of content behind a trigger: a form to rename something, a card about a person. In the top layer, placed against the trigger, with light dismiss; a sheet along the bottom on a narrow screen.
A form in a popover
The label is the trigger; title: heads the panel and names it; footer holds the submit.
Rename this scene
<%= popover "Rename", title: "Rename this scene" do |popover| %>
<%= form_with model: @profile, url: "#", builder: Unmagic::Components::FormBuilder do |form| %>
<%= form.field :name, "Name" %>
<% popover.footer { form.submit "Rename", size: :small } %>
<% end %>
<% end %>A trigger of your own
popover.trigger { … } puts an avatar in place of the text button. placement: :top opens upward when there's room.
Ada Lovelace
Engineer · joined 2021
<%= popover "Ada Lovelace", placement: :top, align: :center do |popover| %>
<% popover.trigger { avatar "Ada Lovelace", size: :large } %>
<div class="flex items-center gap-3">
<%= avatar "Ada Lovelace", size: :large %>
<div>
<div class="font-medium">Ada Lovelace</div>
<div class="text-xs text-neutral-500">Engineer · joined 2021</div>
</div>
</div>
<% popover.footer { button "View profile", href: "#", size: :small } %>
<% end %>