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)

<div class="dialog-overlay">
  <div class="dialog">
    <h2>Confirm Action</h2>
    <p>Are you sure you want to delete this item? This action cannot be undone.</p>
    <div class="dialog-actions">
      <button class="button-secondary">Cancel</button>
      <button class="button-primary">Delete</button>
    </div>
  </div>
</div>

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.

<div class="dialog-overlay" role="dialog" aria-labelledby="dialog-title" aria-modal="true">
  <div class="dialog">
    <h2 id="dialog-title">Confirm Action</h2>
    <p>Are you sure you want to delete this item?</p>
    <button>Cancel</button>
    <button>Delete</button>
  </div>
</div>