Skip to content
Feedback

LoadingOverlay

Blocks interaction and shows a spinner over content.

React source Core source

LoadingOverlay

Blocks pointer interaction over its children while async work runs and shows a spinner. Toggle with visible; set label for the spinner’s accessible name.

Examples

Default

A compact content box with the overlay on.

Content behind overlay
Loading
Demo.tsxtsx
import { LoadingOverlay } from '@var-ui/react';

<LoadingOverlay visible label="Loading">
  <div style={{ width: 200, height: 80 }}>Content</div>
</LoadingOverlay>

Visible overlay

Pass visible over a bordered content surface so the backdrop and spinner cover the region being loaded.

Account settings

Display name, email, and notification preferences.

Saving changes
Demo.tsxtsx
import { LoadingOverlay } from '@var-ui/react';

<LoadingOverlay visible label="Saving changes">
  <div style={{ width: 280, minHeight: 120, padding: 16 }}>
    <strong>Account settings</strong>
    <p>Display name, email, and notification preferences.</p>
  </div>
</LoadingOverlay>

Props

Accessibility

When visible, the overlay sets aria-busy="true" and the spinner uses label (default "Loading"). Keep meaningful content as children so the blocked region remains in the document; avoid nesting interactive controls that stay focusable while the overlay is shown.