Dialog

When to use this component

Use modal dialogs when:

• Displaying critical information that requires immediate attention
• Requesting information necessary to continue the current workflow
• Preventing or addressing critical errors
• Breaking complex workflows into simpler steps
• Confirming destructive actions that cannot be easily undone

Use non-modal dialogs when:

• Providing supplementary information that doesn’t interrupt workflow
• Displaying content that enhances but isn’t critical to the main task
• The information is optional and users can continue their work

How to use this component

• Include a clear title that explains the dialog’s purpose
• Keep content focused on a single task or message
• Provide action buttons with descriptive labels
• Add a backdrop that dims the main content for modal dialogs
• Implement proper keyboard navigation and focus management
• Include a clear way to dismiss the dialog (close button or cancel option)
• Size and position dialogs appropriately for different screens
• Trap keyboard focus within modal dialogs until dismissed
• Use a header, content area, and optional footer with action buttons