Overlay
@stellaria/nebula-webOverlayPropsPreview
Props
8| Prop | Type | Default |
|---|---|---|
blur Blurs what is behind, on top of the tint. This component tints first and blurs as an extra; `BlurOverlay` is the other way round, and is the one to reach for when the blur is the point. | OverlayBlur | "none" |
center Centres the content. Passing `children` turns it on anyway, so this only decides anything for an overlay that carries none. | boolean | false |
children What rides on top of the veil — a loader, a message. Passing anything also takes the layer out of `aria-hidden`: empty, the scrim is invisible to assistive tech, which is what a plain scrim should be. | ReactNode | — |
className | string | — |
color The tint. Naming one of the theme's scales takes its 600 step; a role path or a hex is used as written. Black is the neutral that does not push the content behind it towards a hue. | ColorExtended | "black" |
fixed Covers the viewport instead of the nearest positioned ancestor. Without it the overlay 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 the whole difference between a scrim that dismisses a modal and a veil that dims a card, so it moves with the job: past roughly 0.8 nothing behind is readable any more. | number | 0.6 |
zIndex | number | — |
Also accepts
On top of its own props, this component forwards these groups.