A modal alert dialog for destructive or otherwise consequential confirmations.
This is the Dialog's stricter sibling: it renders with role="alertdialog"
and deliberately offers no dismissal affordances other than an explicit
choice. There is no X close button and clicking the overlay does not
close it — the user must pick the action or cancel. Escape is still honored
via phx-window-keydown so keyboard users are never trapped.
Like Dialog, it is portal-free and fully client-driven: show_alert_dialog/1
and hide_alert_dialog/1 are Phoenix.LiveView.JS command builders that toggle
the overlay and content panel (with transitions) and dispatch
shadix:alert-dialog-open / shadix:alert-dialog-close events. The
ShadixAlertDialog hook (assets/ts/alert_dialog.ts) listens for those events to
lock body scroll and manage focus. Focus is trapped with Phoenix's built-in
<.focus_wrap>.
The trigger and content live side by side under a *-root wrapper carrying the
hook; ids are derived from the required :id so titles/descriptions wire up to
aria-labelledby / aria-describedby stably.
Summary
Functions
Renders a modal alert dialog with a :trigger slot and arbitrary content.
The primary (often destructive) action button.
The cancel button: an outline-styled <button> that closes the alert dialog.
Alert dialog description. :id is the dialog's id; renders with
"#{id}-description" so it matches the content panel's aria-describedby.
Footer region of an alert dialog; right-aligns the cancel/action controls on larger screens.
Header region of an alert dialog; stacks title/description with sensible spacing.
Alert dialog title. :id is the dialog's id; the title renders with
"#{id}-title" so it matches the content panel's aria-labelledby.
Returns the Phoenix.LiveView.JS command that closes the alert dialog with id.
Returns the Phoenix.LiveView.JS command that opens the alert dialog with id.
Functions
Renders a modal alert dialog with a :trigger slot and arbitrary content.
The trigger is wrapped in a display: contents span wired to
show_alert_dialog/1, so the caller's own button/element opens the dialog
without extra markup. The overlay is intentionally not clickable and no close
button is rendered; only Escape and the explicit action/cancel controls
dismiss it.
Attributes
id(:string) (required)class(:string) - Defaults tonil.
Slots
trigger(required)inner_block(required)
The primary (often destructive) action button.
Renders a plain primary <button> carrying data-slot="alert-dialog-action".
The caller is expected to wire it with phx-click (and may pass any other
attributes via the global :rest) to perform the confirmed operation; it does
not close the dialog on its own.
Attributes
class(:string) - Defaults tonil.type(:string) - Defaults to"button".- Global attributes are accepted.
Slots
inner_block(required)
The cancel button: an outline-styled <button> that closes the alert dialog.
:id is the dialog's id so the button can call hide_alert_dialog/1 on the
correct panel. Carries data-slot="alert-dialog-cancel".
Attributes
id(:string) (required)class(:string) - Defaults tonil.type(:string) - Defaults to"button".- Global attributes are accepted.
Slots
inner_block(required)
Alert dialog description. :id is the dialog's id; renders with
"#{id}-description" so it matches the content panel's aria-describedby.
Attributes
id(:string) (required)class(:string) - Defaults tonil.- Global attributes are accepted.
Slots
inner_block(required)
Header region of an alert dialog; stacks title/description with sensible spacing.
Attributes
class(:string) - Defaults tonil.- Global attributes are accepted.
Slots
inner_block(required)
Alert dialog title. :id is the dialog's id; the title renders with
"#{id}-title" so it matches the content panel's aria-labelledby.
Attributes
id(:string) (required)class(:string) - Defaults tonil.- Global attributes are accepted.
Slots
inner_block(required)
Returns the Phoenix.LiveView.JS command that closes the alert dialog with id.
Hides the overlay and content panel with leave transitions and dispatches
shadix:alert-dialog-close on the *-root element for the ShadixAlertDialog
hook.
Returns the Phoenix.LiveView.JS command that opens the alert dialog with id.
Shows the overlay and content panel with enter transitions and dispatches
shadix:alert-dialog-open on the *-root element for the ShadixAlertDialog
hook.