LoadingOverlay

LoadingOverlay covers a positioned container while async work runs. Place inside a position: relative parent so the overlay constrains to that surface, not the whole document.

#Default usage

<div style={{ position: "relative", padding: "24px", border: "1px solid var(--fd-border-subtle)", borderRadius: "10px" }}>
  <LoadingOverlay label="Saving" open />
  <p>Form content</p>
</div>

#Import

import { LoadingOverlay } 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.

#Styling

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