BlurOverlay
@stellaria/nebula-webBlurOverlayPropsPreview
Props
8| Prop | Type | Default |
|---|---|---|
blur How far what is behind is blurred. `md` is the operational ceiling; anything above belongs to the occasional full-screen overlay and nowhere else. `"none"` drops the effect and leaves the tint alone. | BlurLevel | "md" |
center Centres the content. Passing `children` turns it on anyway, so this only decides anything for a layer that carries none. | boolean | false |
children What rides on top of the blur. Passing anything also takes the layer out of `aria-hidden`: empty, it is invisible to assistive tech, which is what a bare blur should be. | ReactNode | — |
className | string | — |
color The tint laid over the blur. It defaults to the base surface so the layer reads as the page fading out rather than as a colour arriving. | ColorExtended | "surface.base" |
fixed Covers the viewport instead of the nearest positioned ancestor. Without it the layer only covers a region that is already positioned — over a static parent it will spill. | boolean | false |
opacity How much of the tint lands. It is deliberately low, because here the blur is what hides the content. When the blur cannot run — `blur="none"`, or a theme with glass off — the veil is forced up to 0.94 instead, so the layer never stops concealing what is behind it. | number | 0.35 |
zIndex | number | — |
Slot props
1Each one spreads over an inner element, so you can restyle a region without forking the component.
| Prop | Type | Default |
|---|---|---|
contentProps The box that centres `children`. It does not exist without children, and without them the whole layer becomes `aria-hidden`. The veil has no slot: it is the effect, and `blur`, `color` and `opacity` govern it. | BoxSlotProps | — |
Also accepts
On top of its own props, this component forwards these groups.