Loading Overlay

Preview

Place the overlay inside a position: relative container; its absolute backdrop fills the parent.

<div style="position: relative; min-height: 180px;">
  <p>Underlying content being covered.</p>
  <LoadingOverlay active={true} message="Loading data…" />
</div>

States

A transparent backdrop lets the content show through faintly. When active is false the overlay renders nothing.

<LoadingOverlay active={true} transparent={true} message="Saving…" />
<LoadingOverlay active={false} />

API

Accessibility

• The backdrop is a single named graphic — role="img" with message as its accessible name, plus aria-busy — and the visual content inside it is aria-hidden so the name is not read twice. It is not a role="status" live region: this page said so until 2026-08-18 and the source had already moved off it, because a region created in the same tick as its text does not announce.
• The backdrop sits at z-index: 10 over the parent and intercepts pointer interaction while active.
• It does not stop the keyboard, and it cannot. The overlay is position: absolute, scoped to its nearest positioned ancestor — so a keyboard user can still Tab into controls sitting under an opaque backdrop, and the component cannot make that region inert because it does not own it. Making the covered region inert while loading is the call site's job.
• For long operations, consider moving focus or announcing the busy state at the call site.

Theming surface

Every public token this component reads, extracted from its source at build time, split by blast radius: the hooks that belong to this component, then the shared and system tokens it consumes alongside everything else. The Resolves to column walks each token's real lineage — component → semantic → primitive → raw value — so you can see exactly where re-pointing it lands. A spoke re-skins by overriding these in its theme-<slug>.css; component internals are never edited. No hook for what you need? File it with /request-lego.

Type roles it names

This component does not set a size, weight, face or tracking of its own — it names a composite, and the composite carries all five. A composite is a class rather than a token, so none of it appears in the tables below; re-theme text by re-pointing the token family, not by editing the component.

Wired to this component

None. This component has no hooks of its own — it themes entirely through the shared tokens below, so every override here also moves its siblings.

Shared tokens it reads

Owned by a family or by the semantic layer. Still overridable — but scope the override (esa-foo { --form-border-color: … }) unless you mean to move everything that reads it. Reach says what else that is.