Alert Dialog Edit

A modal dialog that interrupts the user with important content and expects a response.



rails generate shadcn-ui alert-dialog


<%= 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
And relies on app/javascript/controllers/ui/dialog_controller.js.

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.