Modals
Uses
- Displaying important information: for critical alerts or details that require immediate attention, such as a timeout notification.
- Gathering user input: collecting information, like credit card details or profile information, without redirecting the user to a new page.
- Confirming destructive actions: preventing irreversible mistakes by requiring user confirmation before a significant change or transaction.
- Guiding users: providing a focused space for multi-step processes or tutorials, though care must be taken with complex tasks.
- In summary: Use modals for important alerts and notifications, confirmation of an action or actions, quick tasks, onboarding or tours, data input.
Best Practices
- Contextual relevance: use modals for tasks that are relevant to the current user activity or can streamline a task.
- Clear content and actions: include a descriptive title and clear, action-oriented button labels to tell users exactly what will happen.
- Keyboard accessibility: ensure users can close the modal by pressing the Escape key and trapping focus so the keyboard cannot interact with the background content.
- Avoid unnecessary disruption: do not use modals for non-critical information, such as general pop-ups or simple requests that can be handled in the main interface.
- Focus and accessibility: the modal should demand attention, requiring the user to interact with it before returning to the main page.
- Visual hierarchy: a transparent overlay behind the modal can give users a sense of the main application while keeping the focus on the modal.
Accessibility Notes
- Trap focus within the modal.
- Provide aria-modal=”true”.
- Support Esc to close.
Examples
Default
Responsive views
Can’t find what you’re looking for? Get in touch