Alert Dialog Edit

<%= render_alert_dialog do %>
  <%= alert_dialog_trigger do %>
    <%= render_button("Open Dialog", variant: :outline) %>
  <% end %>

  <%= alert_dialog_content do %>
  <div class="flex flex-col space-y-2 text-center sm:text-left">
    <h2 class="text-lg font-semibold">Are you absolutely sure?</h2>
    <p class="text-sm text-muted-foreground">
      This action cannot be undone. This will permanently delete your account and remove your data from our servers.
    </p>
  </div>
  <% end %>

  <%= alert_dialog_cancel do %>
    <%= render_button("Cancel", variant: :outline) %>
  <% end %>

  <%= alert_dialog_continue do %>
    <%= render_button("Continue") %>
  <% end %>
<% end %>

Installation

rails generate shadcn-ui alert-dialog

Usage

<%= render_alert_dialog do %>
  <%= alert_dialog_trigger do %>
  <% end %>

  <%= alert_dialog_content do %>
  <% end %>

  <%= alert_dialog_cancel do %>
  <% end %>

  <%= alert_dialog_continue do %>
  <% end %>
<% end %>

The Alert Dialog component introduces:

• app/helpers/components/alert_dialog_helper.rb
• app/views/components/ui/_alert_dialog.html.erb

The method render_alert_dialog defined in app/helpers/components/alert_dialog_helper.rb accepts a block for the inner components of the dialog. It renders the partial app/views/components/ui/_alert_dialog.html.erb which contains the model structure and and the 2 actions buttons of continue and cancel.

The modal is composed of 4 components with corresponding helper methods, alert_dialog_trigger, which accepts a block for the element that will trigger the modal, and alert_dialog_content, which accepts a block for the body of the modal and the two actions for the modal, alert_dialog_cancel for the element that you would like to cancel the dialog interaction, for example a button, and alert_dialog_continue for the element you would like to use to continue to interaction. Note, you should feel free to bind your own data actions to these buttons as they are enclosed in an element that will handle closing the modal on click.

See Dialog for more context as this component inherits functionality from that one.