Dialog
BetaBatch C. A window on top of the page, for a task that needs focus. ConfirmDialog asks before a risky action.
When to use
Use for a short task or a decision that must happen before people continue.
When not to use
Don't use for long forms or content people need to compare with the page; use a separate page.
Anatomy
Nothing changed yet.
- Backdrop
- Title and optional description
- Close button
- Body, which scrolls when long
- Footer with buttons
Variants
| Variant | Use |
|---|---|
| Dialog | Forms and longer content. Sizes sm (384px), md (512px) and lg (768px). |
| ConfirmDialog | Before a risky action. Announced as an alert dialog. Clicking outside does not close it, and focus starts on Cancel. |
States
Closed, open, and open with a scrolling body. Open states are not shown as pictures: forcing a popup open hides the rest of the page from screen readers. Try them in the live example on the Code tab.