USER INTERFACE · OVERLAYS

Modals

The component reference — sizes, anatomy and behaviour. For 18 ready scenarios see Modal examples →
THEME
DENSITY
01

Playground

Configure, then open the real thing
PREVIEWstatic frame · press Open for the real one3 differences
CancelCreate
560 px · Drawer right
Settings
SIZE
default: M · 520 px
POSITION
default: Center
FOOTER
default: Buttons right
ANIMATION
default: Scale
DIFF FROM DEFAULT
~ size: L · 680 px~ pos: Drawer right~ icon: no icon
02

Anatomy

Backdrop, header, body, footer
BACKDROP · 60 % + blur 3
+New projectIt appears on the dashboard right away.✕
CancelCreate
Backdroprgba(6,7,11,.6) + blur 3 px · click closes
Headericon 42 · title 19/700 · subtitle 13.5 · ✕ 36
Bodypadding 16/20 · scrolls on its own
Footerborder-top · Cancel + primary · right
Panelradius 22 · 1px w10 · shadow 0 30 80
WidthS 400 · M 520 · L 680 · XL 880
Max heightcalc(100vh − 40px)
03

Sizes

S · M · L · XL · Full — click to open
04

Behaviour

Scroll, focus, dirty state, nesting
Long contentheader & footer stay, body scrolls
Twelve sections. The header and footer stay put; only the body scrolls.
Focus trapTab stays inside
Tab and Shift+Tab cycle through the fields and buttons — never the page behind.
Unsaved changesasks before closing
Edit the name, then try ✕, Esc or the backdrop — you’ll be asked to keep or discard.
Modal on modalwhy not — and what instead
See why stacking modals hurts, and the better alternative.
Static backdropno close on outside click
Backdrop click and Esc are ignored — use for flows that must be finished.
05

Scenarios

18 ready modals on Modal examples
Destructive confirmConfirm↗Unsaved changesConfirm↗Session expiringConfirm↗SuccessConfirm↗Invite teammatesForms↗Quick createForms↗Edit recordForms↗FeedbackForms↗LightboxMedia↗UploadMedia↗Share linkMedia↗Multi-step dialogFlows↗Command paletteFlows↗Onboarding tourFlows↗Side drawerSheets↗Bottom sheetSheets↗Popover menuSheets↗Toast with undoFeedback↗
Open Modal Examples →
06

Rules & a11y

Attributes, focus, mobile
Attributes
Dialogrole="dialog" aria-modal="true"
Namearia-labelledby="title-id"
Descriptionaria-describedby="sub-id"
Confirmrole="alertdialog" for destructive questions
Close<button aria-label="Close">
Inert pageinert on the app root while open
Focus & scroll
✓Focus the first field (or the primary button) on open
✓Trap Tab inside the dialog
✓Esc closes — unless the flow must be finished
✓Return focus to the trigger on close
✓Lock page scroll underneath
Open any modal and close it — focus comes back here.
On mobile → bottom sheet
New projectProject nameCreate project
ModalStops the page for one decision or a short task.Delete, rename, invite
DrawerDetails next to the list you’re in.Record details, filters
PopoverSmall content tied to a trigger.Date, colour, menu
PageLong or multi-part work.Create deal, edit invoice
DO✓Use a clear title that says what will happen✓One primary action, on the right✓Keep it short — move long tasks to a page✓Ask before discarding unsaved changes✓Return focus to the trigger
DON’T✕Open a modal on page load✕Stack a modal on a modal✕Hide the close button and disable Esc without reason✕Put a whole wizard in a modal✕Let the page scroll behind it