A dialog is a modal window that appears in front of app content to provide critical information or ask for a decision. It disables the rest of the interface until it’s addressed.
Figma
The Figma reference for Dialog will appear here once the design link is added.
Storybook
Interactive examples for Dialog will render here once the Storybook link is wired in.
Best practices
- Use a dialog for a focused task or an important decision that needs immediate attention.
- Give it a clear title and keep the content to a single purpose.
- Place the primary action button consistently and clearly distinguish it from secondary actions.
- Confirm destructive actions in a dialog before they run.
- Provide an obvious way to close or cancel.
Do’s and don’ts
Do
Interrupt with a dialog only for decisions that truly require immediate attention.
Don’t
Use a dialog for routine, non-blocking messages — use an alert or snackbar instead.
Accessibility
- Move focus into the dialog when it opens and trap focus within it while it’s open.
- Return focus to the triggering control when the dialog closes.
- Support closing with the Escape key.