Dialog

Anatomy

Modal dialog using native <dialog> element with focus trap, ESC/backdrop close, and size variants.

maud_ui::primitives::dialog

Props

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

Prop	Type	Default	Description
`id`	`String`	`"dialog"`	Unique identifier for the dialog (used by trigger to open it)
`title`	`String`	`"Dialog"`	Dialog title
`description`	`Option<String>`	`None`	Optional description text displayed below title
`children`	`Markup`	`PreEscaped("")`	Markup content displayed in dialog body
`footer`	`Option<Markup>`	`None`	Optional footer markup (buttons/actions, rendered right-aligned)
`open`	`bool`	`false`	Initial open state (default false; if true renders with open attribute for SSR)
`show_close_button`	`bool`	`true`	Whether to render the close button in the top-right (default true)
`size`	`Size`	`Default`	Dialog size variant (default Default)

Examples

Usage and composition

Import

use maud_ui::primitives::dialog::{self, Props, Size};

Example

use maud::html;
use maud_ui::primitives::dialog;

html! {
    (dialog::trigger("demo-dlg", "Open Dialog"))
    (dialog::render(dialog::Props {
        id: "demo-dlg".to_string(),
        title: "Confirm".to_string(),
        description: Some("Are you sure?".to_string()),
        children: html! { p { "This action cannot be undone." } },
        footer: Some(html! {
            button class="mui-btn mui-btn--secondary" data-mui-close { "Cancel" }
            button class="mui-btn mui-btn--primary" { "Delete" }
        }),
        show_close_button: true,
        size: dialog::Size::Default,
        ..Default::default()
    }))
}

Size Enum

Variant	Description
`Default`	Default size (max-width 32rem, padded)
`Sm`	Compact size (max-width 28rem, reduced padding)

Helper Functions

`trigger(target_id, label) → Markup`

Renders a button with data-mui="dialog-trigger" and data-target attributes. JS wires opening.

`close_button(label) → Markup`

Renders a × close button with data-mui-close attribute. Positioned absolute in header via CSS.

Features

Native <dialog> element: Uses built-in browser modal behavior; ESC and backdrop click close
ARIA attributes: aria-labelledby (title), aria-describedby (description), aria-modal="true"
ID linking: Title ID auto-derived as {id}-title; description ID as {id}-desc
Automatic footer layout: Footer content rendered right-aligned in footer slot

Shadcn reference

https://ui.shadcn.com/docs/components/dialog

Small screens and long content

Headers and footer actions remain visible while the body scrolls within the dynamic viewport. Close has a 44px target; long titles wrap without overlapping it. Sheet footers include bottom safe-area padding. Motion respects prefers-reduced-motion. The showcase includes long content and a long-title review dialog.

Accessibility

Dialog has aria-modal="true"
Title and description linked via aria-labelledby and aria-describedby
Close button has aria-label="Close"
Semantic <h2> for title, <p> for description

Anatomy

Props

Examples

Edit Profile

Quick Action

Review the arrival instructions before sharing with your guests

Arrival detail 1

Arrival detail 2

Arrival detail 3

Arrival detail 4

Arrival detail 5

Arrival detail 6

Arrival detail 7

Arrival detail 8

Arrival detail 9

Arrival detail 10

Arrival detail 11

Arrival detail 12

Delete the shared document and its comments?