Overlay
Renders a full-area <div> overlay that fills its positioned parent. Use it to dim content, show loading states, or create modal backdrops. Supports configurable background color, opacity, backdrop blur, and z-index.
Default (semi-transparent)
Content behind overlay
<div style="position:relative;height:120px">
<p>Content behind overlay</p>
<Overlay backgroundOpacity={0.5} />
</div>Custom color and opacity
Hidden content
<Overlay color="var(--dv-color-violet-filled)" backgroundOpacity={0.7} />With centered content
<div style="position:relative;height:120px">
<Overlay backgroundOpacity={0.6} center>
<Text c="white" fw={700}>Loading…</Text>
</Overlay>
</div>With blur
Blurred overlay
<Overlay blur={4} backgroundOpacity={0.2} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
color | string | — | Background fill color — any CSS color value |
backgroundOpacity | number | — | Opacity of the background fill (0–1) |
blur | number|string | — | Backdrop blur in pixels or CSS blur value |
fixed | boolean | — | Positions overlay fixed to the viewport |
zIndex | number | — | CSS z-index stacking order |
center | boolean | — | Centers child content with flexbox |
class | string | — | Additional CSS class names |
style | object | — | Inline styles |
children | ReactNode | — | Content rendered inside the overlay |