Skip to main content

MCDS

Dialog

A modal dialog component for displaying content that requires user attention.

Impossible Mission

Good morning, Mike. Your mission, should you decide to accept it, is to build a better web. As always, should you or any member of your IM Force be caught or killed, the Secretary will disavow any knowledge of your actions. This webpage will self-destruct in five seconds. Good luck.

Code

<!-- Trigger button -->
<button type="button" data-dialog="info-dialog">View Information</button>

<!-- Dialog example -->
<Dialog id="info-dialog" title="Information">
  <p>This dialog contains important information for the user.</p>
  <p>It can contain more complex UI elements or longer content.</p>
  <form method="dialog">
    <p>
      <button type="submit">OK</button>
    </p>
  </form>
</Dialog>

Props

Name Type Required Description
id string Yes Unique identifier for the dialog
title string Yes Title text displayed in the dialog header

Usage

✅ Do’s

  • Use for important information requiring user attention
  • Keep dialogs simple and focused on a single task
  • Provide clear actions (confirm, cancel, etc.)
  • Use descriptive titles that summarize the purpose
  • Allow keyboard navigation within the dialog

❌ Don’t’s

  • Don’t use for non-critical information
  • Don’t nest dialogs within dialogs
  • Don’t use for complex multi-step processes
  • Don’t use for content that should be part of the main page
  • Don’t make dialogs too large or overloaded with content

Accessibility

Keyboard Navigation

Screen Reader Support