Backdrop

The Backdrop component will render a translucent overlay when open that fills the viewport. It accepts children that will render above the overlay. When active, the Backdrop component will prevent users from interacting with any elements underneath the Backdrop. The Backdrop component may additionally fire dismissal actions on click.

For more information on how to use the features and props for this component, check out the developer documentation.

The Backdrop component accepts an alpha decimal value that defines how much opacity is applied to the overlay. The variant of the Backdrop can be set to either light or dark and is not impacted by any sort of custom dark theme set on the Configuration component. You can also adjust the transitionSpeed that the Backdrop renders in and out with.

If you would like to close the Backdrop component upon any user click interaction, use the onClick prop. There are other callback functions provided that allow for event handling before and after the transitions in and out of the Backdrop.

NameTypeDefaultDescription
alphanumber0.4 Opacity of the Backdrop.
childrenReactNodeAny React Node to be rendered on top of the Backdrop component.
classNamestringAdditional CSS classes.
containerExclude<, boolean>Props passed to Flex container.
onAfterTransitionIn() => voidAccepts a callback that gets invoked after opening Backdrop.
onAfterTransitionOut() => voidAccepts a callback that gets invoked after closing Backdrop
onBeforeTransitionIn() => voidAccepts a callback that gets invoked before opening Backdrop.
onBeforeTransitionOut() => voidAccepts a callback that gets invoked before closing Backdrop.
onClick(e: MouseEvent<HTMLDivElement>) => voidAccepts a callback function for click event on Backdrop.
openbooleanfalse Toggles visibility of Backdrop.
position
'absolute' |'fixed' 
"fixed" The position of the Backdrop.
refRef<HTMLDivElement>Ref for a Backdrop's root div element.
transitionSpeed
'slow' |'medium' |'fast' |'none' 
"medium" Transition speed of Backdrop animation.
variant
'dark' |'light' 
"dark" Determines the color of the Backdrop.