Overlaypolymorphic
Overlays parent element with div element with any color and opacity
Import
Source
Docs
Package
Usage
Overlay
takes 100% of width and height of parent container or viewport if fixed
prop is set.
Set color
and opacity
props to change Overlay
background-color. Note that opacity
prop
does not change CSS opacity property, it changes background-color. For example, if you set
color="#000"
and opacity={0.85}
background-color will be rgba(0, 0, 0, 0.85)
:
Gradient
Set gradient
prop to use background-image instead of background-color. When gradient
prop is set,
color
and opacity
props are ignored.
Blur
Set blur
prop to add backdrop-filter: blur({value})
styles
Note that backdrop-filter
is not supported in all browsers.
Polymorphic component
Overlay is a polymorphic component, set component
prop to change root element:
Overlay component props
Name | Type | Description |
---|---|---|
blur | string | number | Overlay background blur, 0 by default |
center | boolean | Determines whether content inside overlay should be vertically and horizontally centered, false by default |
children | ReactNode | Content rendered inside overlay |
color | BackgroundColor | Overlay background-color, #000 by default |
fixed | boolean | Determines whether overlay should have fixed position instead of absolute, false by default |
gradient | string | Changes overlay to gradient, if set color prop is ignored |
radius | number | "xs" | "sm" | "md" | "lg" | "xl" | Key of theme.radius or any valid CSS value to set border-radius, theme.defaultRadius by default |
zIndex | ZIndex | Overlay z-index, 200 by default |