Mushilu-San UI Dialog
A modal window for focused tasks, built on the native <dialog> element.
Selector: mui-dialog
import { Dialog } from '@mushilu-san/ui/feedback';Loading example…
Overview
<dialog> opened with showModal(). The browser makes the rest of the page inert and, when the dialog closes, returns focus to the element that had it before.
open model. Bind it with [(open)] and close the dialog from your own actions by setting it to false. The opened and closed outputs fire on each transition, and close() closes it imperatively.
closeOnBackdrop and closeOnEscape.
When to use
A short, focused task that must be finished or cancelled before continuing, such as editing a record. Content that needs the user’s full attention but not a separate page.
When not to use
Long or multi-step flows. Use a page. Non-blocking confirmations. Show a toast instead.
Examples
Sizes
Loading example…
Controlling dismissal
closeOnBackdrop and closeOnEscape when closing by accident would lose work.
Loading example…
Guidelines
Do
Always set a heading. It becomes the dialog’s accessible name.Put actions in the slot="footer"area, with the primary action last.Keep the content short enough to scan without scrolling on a phone.
Don't
Do not open a dialog on page load. Do not stack dialogs on top of each other. Do not give users no way to finish. Keep at least one visible action in the footer.
Accessibility
Roles and attributes
| Element | Role | Notes |
|---|---|---|
dialog | dialog (native, modal) | aria-labelledby points at the heading when heading is set; otherwise the dialog has no accessible name. |
close button | button | aria-hidden. |
Keyboard
| Keys | Action |
|---|---|
| TabShiftTab | |
| Escape | closeOnEscape is false. |
Focus moves into the dialog on open (the browser picks the first focusable element, usually the close button) and returns to the element that opened it on close. The page behind the dialog is inert while it is open. This is native showModal()behaviour.A click on the backdrop closes the dialog unless closeOnBackdropis false. This is a pointer shortcut only; keyboard users close with Escape or the close button.
API
Dialog
| Name | Type | Default | Description |
|---|---|---|---|
heading | string | undefined | — | Bold heading; wires up aria-labelledby when present. |
size | 'sm' | 'md' | 'lg' | 'md' | Width of the dialog: `sm`, `md` or `lg`. Default `md`. |
closeOnBackdrop | boolean | true | Closes the dialog when the backdrop is clicked. Default `true`. Accepts attribute presence, e.g. <… closeOnBackdrop>. |
closeOnEscape | boolean | true | Closes the dialog on Escape. Default `true`. Accepts attribute presence, e.g. <… closeOnEscape>. |
| Name | Type | Default | Description |
|---|---|---|---|
open | boolean | false | Two-way open state. |
| Name | Type | Description |
|---|---|---|
opened | void | Emits when the dialog opens. |
closed | void | Emits when the dialog closes, however it was closed. |
CSS parts
::part(body)::part(close)::part(footer)::part(panel)::part(root)::part(title)
Tokens
--mui-color-surface-raised--mui-color-overlay--mui-radius-lg--mui-shadow-5--mui-z-modal