Dialogs

Temporary overlays that interrupt the user’s flow to request input, display important information, or confirm actions. They help ensure key interactions are acknowledged before proceeding.

A well-designed dialog should be focused, concise, and purposeful, guiding users toward a decision without causing unnecessary friction.

When to use

✅ Confirming critical actions
✅ Requesting user input
✅ Providing important alerts
✅ Displaying additional details

When not to use

⛔️ For minor notifications
⛔️ To replace standard navigation
⛔️ If users need background context

Best practices for usability

• Keep it concise – Users should be able to understand the message in seconds.
• Use clear action buttons – The primary action (e.g., “Confirm”) should be distinct, while secondary actions (“Cancel”) should be more subtle.
• Prevent background interaction – Users should not be able to interact with elements outside the dialog.
• Ensure easy dismissal – Users should be able to close dialogs using:
  • The Escape key
  • A close button
  • Clicking outside the dialog (for non-critical dialogs)

Accessibility considerations

• Keyboard Support – Users should navigate using the Tab key and close the dialog with Escape.
• Focus Management – When a dialog opens, focus should move to the first interactive element inside.
• ARIA Attributes – Use role="dialog" and aria-labelledby for screen reader support.