Components
LoadingOverlay
Scoped loading overlay that dims or blurs a panel, form, or table while busy.
LoadingOverlay covers a contained region — a panel, form, or table — with a
centred spinner and optional label while an async action runs. Toggle it with
visible; choose to dim or blur the content behind it and size the spinner
with spinnerSize. Wrap your content as children to overlay it in place (the
overlay reports aria-busy and role="status"), or render it standalone inside
a positioned parent. It does not trap focus or block the page.
Example
Preview
- Plan
- Growth
- Seats
- 12 of 25
import { LoadingOverlay } from '@officina/ui';
<LoadingOverlay visible={isSaving} label="Saving…" blur>
<form>{/* fields */}</form>
</LoadingOverlay>;API
| Prop | Type | Default | Description |
|---|---|---|---|
| visible* | boolean | — | Whether the overlay is shown. |
| blur | boolean | — | Blur the underlying content instead of dimming it. |
| children | ReactNode | — | When provided, wraps the children in a positioned container and overlays them. When omitted, renders only the overlay (parent must be `relative`). |
| label | ReactNode | — | Optional text shown beneath the spinner. |
| spinnerSize | enum | md | Spinner size. Defaults to `'md'`. |