←Back to Docs
Design Patterns
Modal Design
Patterns for crafting accessible, performant modal dialogs that respect user intent and maintain context.
Anatomy
1Overlay — backdrop blur + semi-transparent dark layer
2Container — centered card with max-width and auto-height
3Header — title, optional description, close affordance
4Body — scrollable content region with padding
5Footer — action buttons, right-aligned
States
Enter
Fade in overlay, scale container from 0.95 to 1.0 over 150ms ease-out.
Exit
Reverse animation over 100ms ease-in. Respect reduced-motion preference.
Loading
Disable footer actions, show spinner in primary button.
Error
Inline banner above footer, border shifts to red-500.
Accessibility
- •Trap focus within modal while open. First focusable element receives auto-focus.
- •Escape key dismisses. Click on overlay dismisses. Both respect a prevent-close flag.
- •aria-modal="true", role="dialog", aria-labelledby pointing to title.
- •Return focus to trigger element on close.
Sizing
| Variant | Max Width | Use Case |
|---|---|---|
| sm | 400px | Confirmations, alerts |
| md | 560px | Forms, settings |
| lg | 720px | Multi-step, media |