Backdrop

Examples

Basic

Props

Backdrop

*required
Name	Type	Default	Description
children	React.ReactNode	null	Content rendered inside the backdrop
className	string	''	Additional classes added to the backdrop
hasAnimations	boolean	true	Flag indicating whether animations are enabled. Animations are enabled by default.
isVisible	boolean	true	Flag to show the backdrop when animations are enabled. Set to false while the backdrop remains mounted to play its exit transition.

CSS variables

Expand or collapse column	Selector	Variable	Value
	.pf-v6-c-backdrop	--pf-v6-c-backdrop--Position	fixed
	.pf-v6-c-backdrop	--pf-v6-c-backdrop--ZIndex	400
--pf-v6-c-backdrop--ZIndex --pf-t--global--z-index--lg --pf-t--global--z-index--400 400
	.pf-v6-c-backdrop	--pf-v6-c-backdrop--BackgroundColor	(In light theme) rgb(21, 21, 21, 0.4000)
--pf-v6-c-backdrop--BackgroundColor --pf-t--global--background--color--backdrop--default --pf-t--global--background--color--500 rgb(21, 21, 21, 0.4000)
	.pf-v6-c-backdrop	--pf-v6-c-backdrop--m-animate--Opacity	0
	.pf-v6-c-backdrop	--pf-v6-c-backdrop--m-animate--TransitionProperty	opacity, visibility
	.pf-v6-c-backdrop	--pf-v6-c-backdrop--m-animate--TransitionTimingFunction	cubic-bezier(.4, 0, .7, .2)
--pf-v6-c-backdrop--m-animate--TransitionTimingFunction --pf-t--global--motion--timing-function--accelerate --pf-t--global--timing-function--100 cubic-bezier(.4, 0, .7, .2)
	.pf-v6-c-backdrop	--pf-v6-c-backdrop--m-animate--TransitionDuration	100ms
--pf-v6-c-backdrop--m-animate--TransitionDuration --pf-t--global--motion--duration--fade--short --pf-t--global--motion--duration--sm --pf-t--global--duration--100 100ms
	.pf-v6-c-backdrop	--pf-v6-c-backdrop--m-animate--m-show--TransitionDuration	200ms, 0s
--pf-v6-c-backdrop--m-animate--m-show--TransitionDuration --pf-t--global--motion--duration--fade--default, 0s --pf-t--global--motion--duration--md, 0s --pf-t--global--duration--200, 0s 200ms, 0s
	.pf-v6-c-backdrop	--pf-v6-c-backdrop--m-animate--m-show--TransitionTimingFunction	cubic-bezier(0, 0, .2, 1)
--pf-v6-c-backdrop--m-animate--m-show--TransitionTimingFunction --pf-t--global--motion--timing-function--decelerate --pf-t--global--timing-function--300 cubic-bezier(0, 0, .2, 1)
	.pf-v6-c-backdrop	--pf-v6-c-backdrop--m-animate--m-show--Opacity	1
	.pf-v6-c-backdrop.pf-m-show	--pf-v6-c-backdrop--m-animate--TransitionDuration	200ms, 0s
--pf-v6-c-backdrop--m-animate--TransitionDuration --pf-v6-c-backdrop--m-animate--m-show--TransitionDuration --pf-t--global--motion--duration--fade--default, 0s --pf-t--global--motion--duration--md, 0s --pf-t--global--duration--200, 0s 200ms, 0s
	.pf-v6-c-backdrop.pf-m-show	--pf-v6-c-backdrop--m-animate--TransitionTimingFunction	cubic-bezier(0, 0, .2, 1)
--pf-v6-c-backdrop--m-animate--TransitionTimingFunction --pf-v6-c-backdrop--m-animate--m-show--TransitionTimingFunction --pf-t--global--motion--timing-function--decelerate --pf-t--global--timing-function--300 cubic-bezier(0, 0, .2, 1)

Edit this page on GitHub