Display
- Modals appear centred on the screen
- The overlay darkens the underlying content to focus attention on the modal
- On wider breakpoints, the modal has a fixed maximum width of 520px
- The modal content should not exceed the viewport height — if it does, use an overlay dialogue instead
Dismissal
Users can dismiss modals through:
- Close button — Click the icon button in the top-right corner
- Escape key — Press Escape to close the modal
- Cancel button — Click a cancel or dismiss action button (if present)
- Overlay click — Allow clicking the overlay to dismiss, though this should be used cautiously for critical decisions
Focus management
- When a modal opens, focus should move to the first focusable element inside the modal (typically the close button or first action button)
- Focus should be trapped within the modal — users cannot Tab to elements behind the modal
- When the modal closes, focus should return to the element that triggered it
Stacking
- Avoid stacking modals on top of each other
- Use the correct elevation for modals
- If absolutely necessary, ensure each modal layer maintains proper focus management and dismissal behaviour
- Consider whether a multi-step process would be better served by a single modal with progressive disclosure or a dedicated page