LoadingOverlay

LoadingOverlay covers a positioned container while async work runs. Place it inside a Card, which provides a positioned container, so the overlay stays within that surface.

#Default usage

<Card>
  <CardHeader><CardTitle>Workspace settings</CardTitle></CardHeader>
  <CardContent><Text>Saving the workspace name and notification preferences.</Text></CardContent>
  <LoadingOverlay label="Saving" open />
</Card>

#Non-blocking refresh

Set blocking={false} to let pointer events reach the content beneath the overlay. Blocking controls pointer interaction only; disable form controls separately if keyboard interaction must also be prevented during saving.

<Card>
  <CardContent><HStack gap={8}><Checkbox aria-label="Email notifications" defaultChecked /><Text>Email notifications</Text></HStack></CardContent>
  <LoadingOverlay label="Refreshing" open blocking={false} />
</Card>

The SolidJS version reacts to open changes, so pass a signal accessor value: <LoadingOverlay open={saving()} label="Saving" />.

#Import

import { Card, CardContent, CardHeader, CardTitle, Checkbox, HStack, LoadingOverlay, Text } from "@froggdesign/enter-ui-react";

#Accessibility

Renders with aria-busy="true" and aria-live="polite" so screen readers announce the loading state. Avoid stacking multiple overlays on the same surface.

#API

• open: required. Returns null when false.
• label: text rendered next to the spinner (default "Loading").
• blocking: when true (default), the overlay blocks pointer events and applies a small backdrop blur. When false, the overlay passes pointer events through to the content.

#Styling

Every exported component accepts className. EnterUI styles use .eui-* classes and --eui-* variables mapped from FroggDesign theme tokens.