Alert Dialog

A modal dialog that interrupts the flow and demands an explicit answer.

Installation

Shadwire follows shadcn/ui's open code model: the component's source is copied into your application and becomes yours. Install it with the CLI:

shadwire add alert-dialog --yes

The alert-dialog registry item installs these files:

app/components/ui_component.rb
app/components/ui/alert_dialog_component.rb
app/components/ui/alert_dialog/trigger_component.rb
app/components/ui/alert_dialog/content_component.rb
app/components/ui/alert_dialog/header_component.rb
app/components/ui/alert_dialog/footer_component.rb
app/components/ui/alert_dialog/title_component.rb
app/components/ui/alert_dialog/description_component.rb
app/components/ui/alert_dialog/action_component.rb
app/components/ui/alert_dialog/cancel_component.rb
app/components/ui/button_component.rb
app/helpers/ui/alert_dialog_helper.rb
app/helpers/ui/button_helper.rb
app/javascript/controllers/ui_dialog_controller.js
vendor/shadwire/shadwire.css

This component uses Stimulus, so the application needs importmap-rails and stimulus-rails with automatic controller loading.

Haven't installed the CLI yet? gem install shadwire, then shadwire init.

Usage

Shares the ui-dialog controller with Dialog, but with backdrop dismissal and Esc turned off and role="alertdialog". ui_alert_dialog_action only closes the dialog, so attach the real action (a form, Turbo, Stimulus) to the button yourself.

<%= ui_alert_dialog do %>
  <%= ui_alert_dialog_trigger(variant: :destructive) { "Delete" } %>
  <%= ui_alert_dialog_content do %>
    <%= ui_alert_dialog_header do %>
      <%= ui_alert_dialog_title { "Are you sure?" } %>
      <%= ui_alert_dialog_description { "This action cannot be undone." } %>
    <% end %>
    <%= ui_alert_dialog_footer do %>

<%= ui_alert_dialog do %>
  <%= ui_alert_dialog_trigger(variant: :destructive) { "Delete" } %>
  <%= ui_alert_dialog_content do %>
    <%= ui_alert_dialog_header do %>
      <%= ui_alert_dialog_title { "Are you sure?" } %>
      <%= ui_alert_dialog_description { "This action cannot be undone." } %>
    <% end %>
    <%= ui_alert_dialog_footer do %>
      <%= ui_alert_dialog_cancel { "Cancel" } %>
      <%= ui_alert_dialog_action { "Continue" } %>
    <% end %>
  <% end %>
<% end %>

Or render the components directly:

<%= render Ui::AlertDialogComponent.new do %>
  <%= render Ui::AlertDialog::TriggerComponent.new do %>
    Delete
  <% end %>
  <%= render Ui::AlertDialog::ContentComponent.new do %>
    <%= render Ui::AlertDialog::TitleComponent.new do %>
      Are you sure?
    <% end %>

<%= render Ui::AlertDialogComponent.new do %>
  <%= render Ui::AlertDialog::TriggerComponent.new do %>
    Delete
  <% end %>
  <%= render Ui::AlertDialog::ContentComponent.new do %>
    <%= render Ui::AlertDialog::TitleComponent.new do %>
      Are you sure?
    <% end %>
  <% end %>
<% end %>

Composition

AlertDialog (ui-dialog with backdrop and Esc dismissal off)
|-- AlertDialog::Trigger (Button)
`-- AlertDialog::Content (<dialog role="alertdialog">, no X)
    |-- AlertDialog::Header > AlertDialog::Title + AlertDialog::Description
    `-- AlertDialog::Footer > AlertDialog::Cancel + AlertDialog::Action

Examples

Delete confirmation

Neither the backdrop nor Esc closes it: the user has to pick Cancel or Continue.

<%= ui_alert_dialog do %>
  <%= ui_alert_dialog_trigger(variant: :destructive) { "Delete account" } %>
  <%= ui_alert_dialog_content do %>
    <%= ui_alert_dialog_header do %>
      <%= ui_alert_dialog_title { "Are you absolutely sure?" } %>
      <%= ui_alert_dialog_description do %>
        This action cannot be undone. Your account and your data will be permanently
        removed from our servers.

<%= ui_alert_dialog do %>
  <%= ui_alert_dialog_trigger(variant: :destructive) { "Delete account" } %>
  <%= ui_alert_dialog_content do %>
    <%= ui_alert_dialog_header do %>
      <%= ui_alert_dialog_title { "Are you absolutely sure?" } %>
      <%= ui_alert_dialog_description do %>
        This action cannot be undone. Your account and your data will be permanently
        removed from our servers.
      <% end %>
    <% end %>
    <%= ui_alert_dialog_footer do %>
      <%= ui_alert_dialog_cancel { "Cancel" } %>
      <%= ui_alert_dialog_action { "Continue" } %>
    <% end %>
  <% end %>
<% end %>

API reference

Every part accepts class / class_name and **attrs.

Component	Argument	Default	Description
`AlertDialog`	—	—	Always sets `close_on_backdrop: false` and `close_on_escape: false`.
`AlertDialog::Trigger`	`variant`, `size`	`:outline`, `:default`	The Button that opens the dialog.
`AlertDialog::Action`	`variant`, `size`	`:default`	The confirming Button; closes the dialog after your action runs.
`AlertDialog::Cancel`	`variant`, `size`	`:outline`	The Button that dismisses the dialog.