Backdrop

A backdrop is a screen that covers the main content of a page when a modal is opened, to prevent page interaction 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-v6-c-backdrop--pf-v6-c-backdrop--Position
fixed
.pf-v6-c-backdrop--pf-v6-c-backdrop--ZIndex
400
.pf-v6-c-backdrop--pf-v6-c-backdrop--BackgroundColor
(In light theme) rgba(21, 21, 21, 0.2000)
We use cookies on our websites to deliver our online services. Details about how we use cookies and how you may disable them are set out in our Privacy Statement. By using this website you agree to our use of cookies.