Backdrop

Backdrop is a faded out layer used to emphasize on a specific element on the page.
Works with any type of content
Automatically traps focus when opened
Can be controlled and uncontrolled
Closes on Esc key press
Similar components:
Modal


Usage

Backdrop 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 Backdrop is active – it will prevent scrolling of the whole page and will just support scrolling for the content displayed inside the Backdrop.

Note: It's safe to keep Backdrop in your render all the time. Backdrop will be rendered in the DOM only if it is active. Rendering Backdrop optionally will prevent its animation from working.

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

To make it easier controlling the state, we're providing a useToggle hook that you can use together with Backdrop or other components that toggle states.

Accessibility

  • Backdrop traps focus inside its root element, which means that using any type of keyboard navigation will keep the focus inside the Backdrop while it's opened.
  • Backdrop triggers its onClose handler on Esc key press.

Properties

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