Modal and Drawer UI Patterns
Modals and drawers are overlay patterns that display supplementary content or actions without navigating away from the current page. Used correctly, they reduce context-switching. Used incorrectly, they interrupt and frustrate users.
Modal Dialogs
A modal is a dialog box that appears over the current content, blocking interaction with the background until dismissed. Use modals for: confirmation of destructive actions ("Are you sure you want to delete?"), short forms that relate to the current context, and alerts requiring immediate attention.
Modal best practices:
- Keep modals small and focused — one task per modal
- Always provide an explicit close option (X button and Escape key)
- Clicking outside the modal should close it (for non-critical content — not for destructive confirmations)
- Keep forms inside modals short — if a form exceeds 5–6 fields, consider a full page instead
- Trap keyboard focus within the modal while it is open (accessibility requirement)
Drawer/Sheet Patterns
A drawer (or sheet) slides in from the edge of the screen. It is less visually disruptive than a modal. Use drawers for: supplementary detail panels (e.g. clicking a list item to see its details in a side panel), extended filtering or settings panels, and mobile navigation.
When Not to Use Overlays
Avoid modals for: complex forms or workflows, content that users need to reference while acting, and non-urgent information that could be displayed inline.