Backdrop

Open in Playground

A dimmed layer over the page that blocks interaction behind it, with optional children centered on it: a Loader while something saves, an image to preview. Give it onClose and clicking the dimmed area (not the children) or pressing Escape closes it. invisible keeps it transparent but still click-blocking, and fullScreen={false} covers only the nearest positioned parent.

It does not trap focus or lock scrolling: for dialogs use Dialog (Modal).

Props

openboolean
Show the layer.
onClose() => void
Called on a click on the dimmed area and on Escape.
invisibleboolean
Default: false
Keep it transparent but click-blocking.
fullScreenboolean
Default: true
Cover the viewport; false covers the nearest positioned parent.
onClick(event) => void
Click handler of the layer.
classNamestring
Default: ''
Extra classes for the root element.
childrenReactNode
Content.
...rest
Any other props are passed to the underlying element.

Backdrop props
Prop	Type	Default	Description
`open`	boolean	–	Show the layer.
`onClose`	() => void	–	Called on a click on the dimmed area and on Escape.
`invisible`	boolean	`false`	Keep it transparent but click-blocking.
`fullScreen`	boolean	`true`	Cover the viewport; false covers the nearest positioned parent.
`onClick`	(event) => void	–	Click handler of the layer.
`className`	string	`''`	Extra classes for the root element.
`children`	ReactNode	–	Content.
`...rest`		–	Any other props are passed to the underlying element.