maud-ui64 components

Dialog

Edit Profile

Update your personal information below.

JD

Upload a new avatar from your device.

Share Document

Invite a collaborator by email address.

Quick Action

A compact dialog for short interactions.

This dialog uses the Sm size variant with reduced padding.

Confirm Deletion

This cannot be undone. Make a choice below.

The top-right close button is hidden — the user must use the footer buttons.

Usage

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

// Render the trigger button
let trigger = dialog::trigger("confirm-dlg", "Open dialog");

// Render the dialog itself
let dlg = dialog::render(dialog::Props {
    id: "confirm-dlg".into(),
    title: "Confirm action".into(),
    description: Some("This cannot be undone.".into()),
    children: html! { p { "Are you sure?" } },
    footer: Some(html! {
        button.mui-btn.mui-btn--danger.mui-btn--md { "Confirm" }
    }),
    open: false,
});

Dialog

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

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()
    }))
}

Props

FieldTypeDefaultDescription
idString"dialog"Unique identifier (used by trigger to open)
titleString"Dialog"Dialog title/heading
descriptionOption<String>NoneOptional description below title
childrenMarkup—Body content
footerOption<Markup>NoneOptional footer markup (buttons/actions, right-aligned)
openboolfalseInitial open state (if true, renders with open attribute for SSR)
show_close_buttonbooltrueWhether to render × close button in header
sizeSizeSize::DefaultDialog size variant

Size Enum

VariantDescription
DefaultDefault size (max-width 32rem, padded)
SmCompact 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

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

Related

  • Drawer
  • AlertDialog
  • Command

Shadcn reference

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

← Back to Gallery