- Guidelines
- React API Reference
Alert Dialogs are modal overlays that demand immediate user attention and action. They interrupt the user’s workflow to communicate critical information or confirm destructive actions.
Guidance
| Aspect | Best Practice |
|---|---|
| Usage | Use for critical confirmations, destructive actions, or urgent system messages that require immediate attention. |
| Content | Keep messaging concise and action-oriented. Clearly explain consequences and provide clear action buttons. |
| Behavior | Block interaction with underlying content. Focus trap within dialog. Close only through explicit user action. |
| States | Provide clear visual hierarchy between primary and secondary actions. Ensure keyboard navigation and screen reader support. |
| Feedback | Use appropriate button styling to indicate destructive vs. safe actions. Provide loading states for async operations. |
| Examples | Delete confirmations, unsaved changes warnings, error messages requiring acknowledgment, or irreversible action confirmations. |
Best Practices
- Clear Intent: Use descriptive titles and explanatory text that clearly communicate what will happen.
- Action Clarity: Label buttons with specific actions (e.g., “Delete Account” instead of “OK”).
- Visual Hierarchy: Make destructive actions visually distinct from safe actions.
- Escape Routes: Always provide a clear way to cancel or dismiss the dialog.
- Focus Management: Automatically focus the most appropriate action based on context.
Do’s and Don’ts
Do
- Use for destructive or irreversible actions. * Provide clear, specific action labels. * Focus the most contextually appropriate button. * Include descriptive text explaining consequences.
Don't
- Overuse for non-critical interactions. * Use generic button labels like “OK” or “Yes”. * Allow dismissal by clicking outside the dialog. * Chain multiple alert dialogs together.
Additional Guidance
- Psychological Impact:
- Interruption: Alert dialogs create cognitive interruption, so use sparingly.
- Decision Fatigue: Too many confirmations can lead users to dismiss them without reading.
- Trust: Proper use builds user confidence in the system’s reliability.