Alert Dialog

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

Requires JS

This component requires the alert_dialog stimulus controller.

Caveats

When using as_child: true, it sanitizes the output of the child element's children with Rails sanitize helper.

To allow more tags or attributes, edit Base#sanitize_as_child according to your preference.

Anatomy

AlertDialog do |a|
  a.trigger
  
  a.content do
    a.header do
      a.title
      a.description
    end

    a.footer do
      a.cancel
      a.action
    end
  end
end

API Reference

AlertDialog

Name	Type	Default
`open:`	`boolean`	`false`
Controls whether the dialog is initially open when rendered. When true, the dialog will be visible on page load.
`attributes`	`keyword arguments`

AlertDialog#trigger

Name	Type	Default
`as_child:`	`boolean`	`false`
When true, merges the trigger functionality with the child element instead of wrapping it in a div.
`attributes`	`keyword arguments`

AlertDialog#content

Name	Type
`attributes`	`keyword arguments`

AlertDialog#header

Name	Type
`attributes`	`keyword arguments`

AlertDialog#title

Name	Type
`attributes`	`keyword arguments`

AlertDialog#description

Name	Type
`attributes`	`keyword arguments`

AlertDialog#footer

Name	Type
`attributes`	`keyword arguments`

AlertDialog#cancel

Name	Type	Default
`variant:`	`symbol`	`:outline`
Button style variant. Options: `:default \| :destructive \| :outline \| :secondary \| :ghost \| :link`
`size:`	`symbol`	`:default`
Button size. Options: `:default \| :sm \| :lg \| icon`.
`attributes`	`keyword arguments`

AlertDialog#action

Name	Type	Default
`variant:`	`symbol`	`:default`
Button style variant. Options: `:default \| :destructive \| :outline \| :secondary \| :ghost \| :link`.
`size:`	`symbol`	`:default`
Button size. Options: `:default :sm \| :lg \| :icon`.
`as_child:`	`boolean`	`false`
When true, merges the action functionality with the child element instead of rendering a button.
`attributes`	`keyword arguments`

AlertDialog#action_to

Rails button_to helper that submits a form.

Name	Type	Default
`name`	`string`	`nil`
The button text or form URL (depending on usage pattern).
`options`	`hash`	`nil`
Rails button_to options hash.
`html_options`	`hash`	`nil`
HTML attributes. Also supports `variant:` and `size:` for button styling.

Keyboard Interactions

Key	Description
Space	Opens/closes the dialog.
Enter	Opens/closes the dialog.
Tab	Moves focus to the next focusable element.
Shift+Tab	Moves focus to the previous focusable element.
Esc	Closes the dialog and moves focus to trigger.

Examples

On This Page

Anatomy
API Reference
Keyboard Interactions
Examples

Getting Started

Components