modal-dialog-patterns
Installation
SKILL.md
Modal Dialog Patterns
When to Use What
| Pattern | When | Why |
|---|---|---|
| Modal dialog | Confirmation, short forms, critical alerts | Blocks interaction, forces decision |
| Drawer/Sheet | Detailed content, filters, secondary forms | Slides in, partial page context |
| Toast/Snackbar | Success confirmation, minor notifications | Non-blocking, auto-dismisses |
| Inline expansion | Progressive disclosure, details | No context switch |
| Full-page | Complex forms, multi-step flows | Full context, no overlay |
Modal Rules
- One primary action per modal. If you need two, use a full page.
- Always include a close mechanism: X button, overlay click, Escape key.
- Don't stack modals. A modal opening a modal is a UX failure.
- Trap focus inside. Tab should cycle within the modal, not escape to background.
- Prevent background scroll when modal is open.
- Size: As small as possible. Don't use a modal when an inline confirmation works.