# 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.