Overlay
Overlay is a faded out layer used to emphasize on a specific element on the page.

Overlay is a low-level component, while for display content on top of an Overlay you might want to use Modal instead. Modal uses Overlay in its implementation.

Usage

Overlay is a controlled component which means that it has an active property and multiple handlers that you can use to change the value of this property. Once Overlay is active – it will prevent scrolling of the whole page and will just support scrolling for the content displayed inside the Overlay.

Note: It's safe to just keep Overlay in your render. They will be rendered in the DOM only if they're active and that will not conflict with Overlay animation.

Overlay component is animated so if you want your children to be animated together with Overlay, you can use render props pattern from React. With this approach children are treated as a function that returns an active flag. This flag can be used to set the state of the Overlay content.

To make the experience better, we're providing a useToggle hook that you can use together with Overlay or other components that toggle states.

Accessibility

Overlay traps focus inside its root element, which means that using any type of keyboard navigation will keep the focus inside the Overlay while it's opened.

Overlay triggers its onClose handler on Esc key press.

Properties

NameTypeDefaultRequiredComment
activeboolean-false
onOpen() => {}-falseOverlay open handler
onClose() => {}-falseOverlay close handler
childrenReactNode, ({ active }) => ReactNode-false
classNamestring-falseclassName for the root element
attributesobject-falseAttributes for the root element