Modals interrupt the user for focused tasks — confirmations, forms, or detailed views. Use sparingly.
| Element | Description |
|---|
| Overlay | Semi-transparent backdrop, blocks interaction |
| Container | Centered card, max-width 560px |
| Header | Title + optional close button |
| Body | Scrollable content area |
| Footer | Action buttons (Cancel + Confirm) |
| Size | Width | Use |
|---|
| Small | 400px | Confirmations, alerts |
| Medium | 560px | Forms, dialogs |
| Large | 800px | Detailed views, wizards |
| Fullscreen | 100vw | Complex workflows |
- Escape closes — pressing ESC should close the modal
- Focus trap — Tab stays within modal
- One action — modals should complete one task
- Don’t stack — never open a modal from another modal