Alert Dialog

Anatomy

Modal dialog with role="alertdialog" that cannot be dismissed via ESC or backdrop click; user must choose an explicit action.

maud_ui::primitives::alert_dialog

Props

Generated from public Rust fields. Defaults are evaluated from the implementation.

Prop	Type	Default	Description
`id`	`String`	`"alert-dialog"`	Unique identifier for the alert dialog
`title`	`String`	`"Confirm"`	Alert dialog title
`description`	`Option<String>`	`None`	Optional description text displayed below title
`media`	`Option<Markup>`	`None`	Optional media slot (icon/image) rendered above the header. Matches shadcn's `AlertDialogMedia`.
`children`	`Markup`	`PreEscaped("")`	Markup content displayed in alert dialog body (optional extra content)
`footer`	`Option<Markup>`	`None`	Footer markup — action buttons (Cancel + destructive action)
`open`	`bool`	`false`	Initial open state (default false)
`size`	`Size`	`Default`	Size variant — `Default` (32rem) or `Sm` (24rem, compact).

Examples

Usage and composition

Import

use maud_ui::primitives::alert_dialog::{self, Size, Props};
use maud_ui::primitives::button::Variant as ButtonVariant;

Example

use maud::html;
use maud_ui::primitives::alert_dialog;

html! {
    (alert_dialog::trigger("delete-dialog", "Delete", "danger"))
    (alert_dialog::render(alert_dialog::Props {
        id: "delete-dialog".to_string(),
        title: "Delete account?".to_string(),
        description: Some("This cannot be undone.".to_string()),
        children: html! {},
        footer: Some(html! {
            (alert_dialog::cancel("Cancel"))
            (alert_dialog::action("Delete", alert_dialog::ButtonVariant::Danger))
        }),
        ..Default::default()
    }))
}

Size Variants

Size	Max-Width	Use Case
Default	32rem	Standard alert dialogs.
Sm	24rem	Compact confirmations.

Helper Functions

alert_dialog::trigger(target_id: &str, label: &str, variant: &str) -> Markup — Renders a button that opens the dialog with the given target_id and button variant class.
alert_dialog::media(children: Markup) -> Markup — Wraps an icon or image in the media slot container.
alert_dialog::action(label: &str, variant: ButtonVariant) -> Markup — Renders a primary action button that closes the dialog; use ButtonVariant::Danger for destructive actions.
alert_dialog::cancel(label: &str) -> Markup — Renders a secondary cancel button (always Ghost variant).

Shadcn reference

https://ui.shadcn.com/docs/components/base/alert-dialog

Accessibility

Emits role="alertdialog" for assistive technology.
Title and description IDs linked via aria-labelledby and aria-describedby.
No backdrop dismiss or ESC handler — user must choose a button.
Action buttons emit data-mui-close to signal dialog dismissal to JavaScript controller.

Anatomy

Props

Examples

Delete Account

Discard Changes

Revoke session?