Modal
Edit this pageModals are overlaid windows that focus user attention on specific tasks or information while preserving the context of the underlying page. They require user interaction to dismiss.
Focus ManagementKeyboard AccessibleARIA CompliantResponsiveCustomizable
Primary Purpose of Modals
Understanding when and why to use modals in your interface design.
Core Purpose
- • Focus Attention: Direct user attention to critical information
- • Confirm Actions: Get explicit user confirmation for important actions
- • Collect Input: Gather information without leaving the current context
- • Display Content: Show additional details or media
Modal vs Other Components
Use Modal When:
- • Requiring immediate user decision
- • Critical information to display
- • Quick form input needed
Use Drawer/Sidebar When:
- • Lengthy content or forms
- • Secondary navigation
- • Non-blocking interactions
Modal Usage Examples
Information Modal: Display additional details or content
Form Modal: Collect user input without navigation
Alert Dialog: Get user confirmation for actions
References & Further Reading
Essential references for modal component implementation and accessibility best practices.