shadcn-rails

Alert Dialog

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

Requires JavaScript

Installation

Add the component to your project:

rails generate shadcn:component alert_dialog

Usage

<%= render Shadcn::AlertDialogComponent.new do |dialog| %>
  <% dialog.with_trigger do %>
    <%= render Shadcn::ButtonComponent.new(variant: :outline) do %>Show Dialog<% end %>
  <% end %>
  <% dialog.with_body do |body| %>
    <% body.with_header do |header| %>
      <% header.with_title { "Are you absolutely sure?" } %>
      <% header.with_description { "This action cannot be undone. This will permanently delete your account and remove your data from our servers." } %>
    <% end %>
    <% body.with_footer do |footer| %>
      <% footer.with_cancel { "Cancel" } %>
      <% footer.with_action { "Continue" } %>
    <% end %>
  <% end %>
<% end %>

Examples

Basic Confirmation

A simple alert dialog for confirming an action.

<%= render Shadcn::AlertDialogComponent.new do |dialog| %>
  <% dialog.with_trigger do %>
    <%= render Shadcn::ButtonComponent.new(variant: :outline) do %>Open<% end %>
  <% end %>
  <% dialog.with_body do |body| %>
    <% body.with_header do |header| %>
      <% header.with_title { "Confirm Action" } %>
      <% header.with_description { "Are you sure you want to proceed?" } %>
    <% end %>
    <% body.with_footer do |footer| %>
      <% footer.with_cancel { "Cancel" } %>
      <% footer.with_action { "Confirm" } %>
    <% end %>
  <% end %>
<% end %>

Destructive Action

Use for critical actions like deletions. Style the action button with destructive colors by passing class_name to customize its appearance. 

<%= render Shadcn::AlertDialogComponent.new do |dialog| %>
  <% dialog.with_trigger do %>
    <%= render Shadcn::ButtonComponent.new(variant: :destructive) do %>Delete Account<% end %>
  <% end %>
  <% dialog.with_body do |body| %>
    <% body.with_header do |header| %>
      <% header.with_title { "Are you absolutely sure?" } %>
      <% header.with_description { "This action cannot be undone. This will permanently delete your account and remove all your data from our servers." } %>
    <% end %>
    <% body.with_footer do |footer| %>
      <% footer.with_cancel { "Cancel" } %>
      <% footer.with_action(class_name: "bg-destructive text-destructive-foreground hover:bg-destructive/90") { "Yes, delete account" } %>
    <% end %>
  <% end %>
<% end %>

Custom Content

Add custom content between the header and footer by including additional markup inside the with_body block. 

<%= render Shadcn::AlertDialogComponent.new do |dialog| %>
  <% dialog.with_trigger do %>
    <%= render Shadcn::ButtonComponent.new(variant: :outline) do %>Publish Post<% end %>
  <% end %>
  <% dialog.with_body do |body| %>
    <% body.with_header do |header| %>
      <% header.with_title { "Ready to publish?" } %>
      <% header.with_description { "Your post will be visible to all subscribers." } %>
    <% end %>
    <div class="py-4">
      <p class="text-sm text-muted-foreground">This action will notify all your followers.</p>
    </div>
    <% body.with_footer do |footer| %>
      <% footer.with_cancel { "Save as Draft" } %>
      <% footer.with_action { "Publish Now" } %>
    <% end %>
  <% end %>
<% end %>

API Reference

AlertDialogComponent

API Reference

Prop Type Default Description
open Boolean false Whether the dialog starts in open state

Slots

Slot Description
with_trigger The element that opens the dialog (usually a button)
with_body The dialog content container (yields AlertDialogContentComponent)

AlertDialogContentComponent Slots

Slot Description
with_header Header section (yields with_title and with_description slots)
with_footer Footer section (yields with_cancel and with_action slots)

AlertDialogHeaderComponent Slots

Slot Description
with_title Alert dialog title text (rendered as h2)
with_description Alert dialog description text

AlertDialogFooterComponent Slots

Slot Props Description
with_cancel class_name: Cancel button (styled as outline variant)
with_action class_name: Primary action button (styled as primary variant)

Stimulus Controller

This component requires JavaScript. The Stimulus controller shadcn--dialog provides interactivity.

Alert Dialog reuses the Dialog controller to manage open/close state, focus trapping, keyboard navigation, and accessibility.

Installation

Add to your config/importmap.rb:

pin "shadcn-rails", to: "shadcn/index.js"

Then in your app/javascript/controllers/index.js:

import { Application } from "@hotwired/stimulus"
import { registerShadcnControllers } from "shadcn-rails"

const application = Application.start()
registerShadcnControllers(application)

Or import just this controller:

import DialogController from "shadcn-rails/controllers/dialog_controller"

application.register("shadcn--dialog", DialogController)

Targets

Name Description
trigger The element that triggers the alert dialog to open
template Template containing the alert dialog content (for portal rendering)
overlay The backdrop overlay element
content The alert dialog content container

Values

Name Type Default Description
open Boolean false Current open/closed state
modal Boolean true Always true for alert dialogs (requires user action)

Actions

Action Description
open Opens the alert dialog
close Closes the alert dialog

TypeScript

Type definitions are included. Import types as needed: 

import type { DialogController } from "shadcn-rails"

Accessibility

  • Uses role="alertdialog" for proper screen reader announcement
  • Sets aria-modal="true" to indicate modal behavior
  • Important: Alert dialogs are always modal and require user action. Unlike regular dialogs, they cannot be dismissed by clicking the overlay or pressing Escape.
  • Traps focus within the dialog when open
  • Returns focus to trigger element when closed via action buttons
  • Title and description are properly linked via ARIA attributes for screen reader context
  • Cancel and action buttons are clearly distinguished for keyboard navigation

Alert Dialog vs Dialog

Use Alert Dialog when the user must make a decision or acknowledge important information before continuing. Use regular Dialog for less critical interactions where the user can dismiss by clicking outside or pressing Escape.