PatternFly

Backdrop

A backdrop is used to screen the main content of a page when a modal overlay is opened. It prevents the user from doing other work on the page until the modal is dismissed.

Examples

Basic

Basic screenshot

Props

Backdrop

*required
NameTypeDefaultDescription
childrenReact.ReactNodenullContent rendered inside the backdrop
classNamestring''Additional classes added to the backdrop

CSS variables

Expand or collapse columnSelectorVariableValue
.pf-v5-c-backdrop--pf-v5-c-backdrop--Position
fixed
.pf-v5-c-backdrop--pf-v5-c-backdrop--ZIndex
400
.pf-v5-c-backdrop--pf-v5-c-backdrop--BackgroundColor
rgba(#030303, .62)

View source on GitHub