1---2name: modal-dialog-patterns3description: Modal dialogs, drawers, sheets, confirmation patterns, and overlay best practices.4---56# Modal Dialog Patterns78## When to Use What910| Pattern | When | Why |11|---------|------|-----|12| Modal dialog | Confirmation, short forms, critical alerts | Blocks interaction, forces decision |13| Drawer/Sheet | Detailed content, filters, secondary forms | Slides in, partial page context |14| Toast/Snackbar | Success confirmation, minor notifications | Non-blocking, auto-dismisses |15| Inline expansion | Progressive disclosure, details | No context switch |16| Full-page | Complex forms, multi-step flows | Full context, no overlay |1718## Modal Rules191. **One primary action per modal.** If you need two, use a full page.202. **Always include a close mechanism:** X button, overlay click, Escape key.213. **Don't stack modals.** A modal opening a modal is a UX failure.224. **Trap focus inside.** Tab should cycle within the modal, not escape to background.235. **Prevent background scroll** when modal is open.246. **Size:** As small as possible. Don't use a modal when an inline confirmation works.2526## Confirmation Dialogs27- **Destructive actions only.** Don't confirm saves, non-destructive actions, or navigation.28- Button labels: specific verbs, not "Yes/No." "Delete Project" / "Keep Project."29- Red/destructive styling on the destructive action.30- Never auto-focus the destructive button.3132## Bottom Sheets (Mobile)33- Swipe to dismiss. Don't just rely on X button.34- Snap points: collapsed (peek), half-screen, full-screen.35- Handle indicator at top (the little bar).36- Background should dim but remain partially visible for context.
dragoon0x