Dialog

A modal overlay that requires user interaction. Traps focus, blocks background content, and closes on Escape.

Primitive: DialogARIA: role="dialog"Keyboard: Escape, Tab trap

Delete project?

This will permanently delete "Project Alpha" and all of its data. This action cannot be undone.

dialog.rs

use stratum_leptos::*;

let (show, set_show) = create_signal(false);

view! {
    <Button on_click=move |_| set_show(true)>
        "Open Dialog"
    </Button>
    <Dialog open=show on_open_change=set_show>
        <DialogTitle>"Delete project?"</DialogTitle>
        <DialogDescription>
            "This action cannot be undone."
        </DialogDescription>
        <Button variant=ButtonVariant::Outline
            on_click=move |_| set_show(false)>
            "Cancel"
        </Button>
        <Button variant=ButtonVariant::Destructive>
            "Delete"
        </Button>
    </Dialog>
}

Installation

stratum add dialog

Props

Prop	Type	Default	Description
open	Option<bool>	None	Controlled open state
default_open	bool	false	Initial state for uncontrolled usage
modal	bool	true	Whether to trap focus and show backdrop
on_open_change	Option<Callback<bool>>	None	Fires when open state changes

Accessibility

Renders with role="dialog" and aria-modal="true".
aria-labelledby points to the DialogTitle, aria-describedby to DialogDescription.
Escape closes the dialog.
Focus is trapped within the dialog. On close, focus returns to the trigger element.
Tab and Shift+Tab cycle through focusable children.

Source

Primitive: dialog.rs
Styled: dialog.rs