Toast
A confirmation after an action.
Kit parts
Dialog
A decision that must be made now: a native dialog with a question, one sentence of consequence, a way back and the act.
Seats open in 11 days. Want one email that morning?
Anatomy
The browser’s own dialog, dressed.
Variants
- Destructive
States
- Open
- Destructive
- Focus on the act
Props and options
| Name | Kind | Description |
|---|---|---|
| showModal() · close() | method | Opens modally with a backdrop, traps focus, returns it on close. |
| returnValue | property | The value of the key that closed it. |
| close · cancel | event | After it closes; cancel on Escape. |
| Escape | keyboard | Closes it, as native. |
Usage notes
Open it. Escape or “Keep it” closes it; focus returns to the key.
Accessibility
- Put the flat key first, so the safe choice is reached first.
- Keyboard: Escape closes a modal dialog, and Tab and Shift+Tab stay on what is inside it, because the page behind is inert. Enter or Space presses the focused key.
