Web Components · Global
<mmm-dialog>
Accessible modal dialog primitive.
What it is
A low-level modal that other components are built on. Handles focus trap, ESC to close, scroll lock, and ARIA wiring.
When to use
- Login modal
- Confirmation dialogs
- Quick-view modals from product cards
Attributes
AttributeTypeDefaultDescription
data-openbooleanfalseWhether the dialog is open.data-sizestringmdsm, md, lg, or full.idstring—Unique element identifier.classstring—Custom CSS class list.hiddenbooleanfalseHide the element without removing it from the DOM.Examples
Default
Toggle open by setting data-open or dispatching dialog:open.
<mmm-dialog id="my-dialog">
<p>Hello!</p>
</mmm-dialog>