Modals & drawers
Centered dialogs, forms, confirmations, and side panels.
Centered modals
Shared DialogConfirmation modal
Request confirmation before applying an important change.
Destructive modal
Use clear danger styling for irreversible actions.
Form modal
Collect focused input without leaving the current page.
Right drawer
640px
Left drawer
Navigation
Bottom drawer
Responsive
Details drawer
Data view
Modal sizes
Feedback modal
Success state
Communicate a completed action clearly.
Interaction guidance
1
Escape to close
Keyboard dismissal is supported.
2
Backdrop behavior
Modal focus stays within the overlay.
3
Body scroll lock
The page remains fixed while open.