Modal
Modals are overlay windows that focus user attention on essential tasks, enhancing UX by temporarily disabling the background interface.
- Overview
- Specs
- Guidelines
Pattern
Modals are an integral part of modern user interface design, providing a powerful tool for capturing user attention and conveying essential information. As overlay windows that appear on top of the main content, modals serve various purposes, such as confirming actions, displaying alerts, collecting input, or presenting additional details without navigating away from the current page.
By temporarily disabling the background interface, modals create a focused interaction space, encouraging users to engage with important tasks or decisions. However, designing effective modals requires careful consideration of usability and accessibility to ensure they enhance the user experience rather than disrupt it.
- A: Modal Variation;
- B: Dialog Variation;
- 1: Title;
- 2: Close;
- 3: Main Content;
- 4: Action Buttons;
- 5: Accent Icon;
Used for:
Confirm destructive actions
Use modals to confirm critical actions, such as deletions or submissions, where irreversible changes occur.
Focus on critical information
Modals draw attention to essential information or actions that require user acknowledgment or response. By temporarily blocking the background, they ensure the user focuses on the task at hand.
Form input
Modals can be used to collect user input without navigating away from the current page. This is useful for login forms, feedback requests, or any data entry tasks that should be completed within the context of the current workflow.
Onboarding or tutorials
Use modals to guide new users through important features or processes in an application. This can help improve the onboarding experience.
Don’t use for:
Critical navigation
If users need to navigate between different parts of an application quickly, modals can hinder this by blocking access to the rest of the interface.
Non-critical content
Do not use modals for content that isn’t crucial or time-sensitive. Information that can be presented inline or on a separate page is better suited outside of a modal.
Blocking actions
Avoid using modals that prevent users from accessing essential actions or information needed to complete their current task. This can create frustration and disrupt the workflow.
Demo
Access the Figma file and inspect the element using Dev Mode.
Last Update
- Updated button styles;
- Updated iconography;
- Updated typography;
- Updated spacings;
