Display
- Alert dialogues appear centred on the screen
- The overlay darkens the underlying content to focus attention
- The dialogue blocks all interaction with the underlying content
- Alert dialogues should be appropriately sized for their content
Dismissal
Critical difference: Alert dialogues cannot be dismissed without making a choice.
Users must:
- Select an action button — Choose one of the presented options
- Opt Out — Close via Escape key or overlay click
This forced interaction ensures that users engage with critical decisions rather than habitually dismissing them. Cancel buttons aren’t present, but the overlay and keyboard controls exist as a fail-safe.
Reserve this pattern for genuinely important choices to maintain its impact.
Focus management
- When an alert dialogue opens, focus should move to the primary action button or first focusable element
- Focus should be trapped within the alert dialogue — users cannot Tab to elements behind it
- When the alert dialogue closes (after a decision), focus should return to the element that triggered it
Button placement
- Place the primary (recommended or safe) action on the left or top, depending on the layout
- Place the secondary (alternative or destructive) action on the right or bottom, depending on the layout