Modal - Rails UI Components

To use async Modal component, you need to have a <turbo-frame id='modal'> in your layout

<%= turbo_frame_tag :modal %>

And wrap response content with the modal component:

<%= render Ui::Modal::Component.new(title: "Title HERE") do %>
  ...
<% end %>

Example

Preview

Code

<div>
  <%= link_to "Async Modal", privacy_path, data: { turbo_frame: :modal }, class: "btn btn-primary" %>
</div>

<div>
  <h3 class="mt-6 mb-3 h4">Sync Modals</h3>

  <div class="flex gap-2">
    <%= render Ui::Btn::Component.new(variant: :primary, data: { action: "click->modals#show", id: "dialog1" }).with_content "One modal" %>
    <%= render Ui::Btn::Component.new(variant: :secondary, data: { action: "click->modals#show", id: "dialog2" }).with_content "Another modal" %>
  </div>

  <%= render Ui::Modal::Component.new(title: "Modal Title", subtitle: "Modal Subtitle", id: "dialog1") do %>
    <p class="p-4">Dialog content</p>
  <% end %>

  <%= render Ui::Modal::Component.new(title: "Another Modal", subtitle: "Another Subtitle", id: "dialog2") do %>
    <p class="p-4">Dialog content 2</p>
  <% end %>
</div>