Modal
A low-level, accessible overlay primitive. Portals its content, dims the page with a Backdrop, traps focus, locks body scroll, and closes on Escape (top modal only) or backdrop click. Higher-level overlays - such as Drawer - are built on top of it.
Stacking, scroll-lock (with scrollbar-width compensation), and background aria-hidden are coordinated by a shared modal manager, so multiple overlays behave correctly. The root layers at theme.zOrder.modal by default, configurable via the layer prop (e.g. Drawer renders on the lower drawer layer).
Examples
Default
const args: Partial<ModalProps> = {
scroll: 'paper',
hasBackdrop: true,
shouldUsePortal: true,
shouldKeepMounted: false,
shouldLockScroll: true,
shouldAutoFocus: true,
shouldTrapFocus: true,
shouldEnforceFocus: true,
shouldRestoreFocus: true,
}
<DefaultDemo {...args} />
Nested
const args: Partial<ModalProps> = {
scroll: 'paper',
hasBackdrop: true,
shouldUsePortal: true,
shouldKeepMounted: false,
shouldLockScroll: true,
shouldAutoFocus: true,
shouldTrapFocus: true,
shouldEnforceFocus: true,
shouldRestoreFocus: true,
}
<NestedDemo {...args} />
Scroll Paper
Background line 1 - background scroll is locked while the modal is open.
Background line 2 - background scroll is locked while the modal is open.
Background line 3 - background scroll is locked while the modal is open.
Background line 4 - background scroll is locked while the modal is open.
Background line 5 - background scroll is locked while the modal is open.
Background line 6 - background scroll is locked while the modal is open.
Background line 7 - background scroll is locked while the modal is open.
Background line 8 - background scroll is locked while the modal is open.
Background line 9 - background scroll is locked while the modal is open.
Background line 10 - background scroll is locked while the modal is open.
Background line 11 - background scroll is locked while the modal is open.
Background line 12 - background scroll is locked while the modal is open.
Background line 13 - background scroll is locked while the modal is open.
Background line 14 - background scroll is locked while the modal is open.
Background line 15 - background scroll is locked while the modal is open.
Background line 16 - background scroll is locked while the modal is open.
Background line 17 - background scroll is locked while the modal is open.
Background line 18 - background scroll is locked while the modal is open.
Background line 19 - background scroll is locked while the modal is open.
Background line 20 - background scroll is locked while the modal is open.
Background line 21 - background scroll is locked while the modal is open.
Background line 22 - background scroll is locked while the modal is open.
Background line 23 - background scroll is locked while the modal is open.
Background line 24 - background scroll is locked while the modal is open.
Background line 25 - background scroll is locked while the modal is open.
Background line 26 - background scroll is locked while the modal is open.
Background line 27 - background scroll is locked while the modal is open.
Background line 28 - background scroll is locked while the modal is open.
Background line 29 - background scroll is locked while the modal is open.
Background line 30 - background scroll is locked while the modal is open.
const args: Partial<ModalProps> = {
scroll: 'paper',
hasBackdrop: true,
shouldUsePortal: true,
shouldKeepMounted: false,
shouldLockScroll: true,
shouldAutoFocus: true,
shouldTrapFocus: true,
shouldEnforceFocus: true,
shouldRestoreFocus: true,
}
<ScrollPaperDemo {...args} />
Scroll Body
const args: Partial<ModalProps> = {
scroll: 'body',
hasBackdrop: true,
shouldUsePortal: true,
shouldKeepMounted: false,
shouldLockScroll: true,
shouldAutoFocus: true,
shouldTrapFocus: true,
shouldEnforceFocus: true,
shouldRestoreFocus: true,
}
<ScrollBodyDemo {...args} />
Form
const args: Partial<ModalProps> = {
scroll: 'paper',
hasBackdrop: true,
shouldUsePortal: true,
shouldKeepMounted: false,
shouldLockScroll: true,
shouldAutoFocus: true,
shouldTrapFocus: true,
shouldEnforceFocus: true,
shouldRestoreFocus: true,
}
<FormDemo {...args} />