InlineLoading

The three states

state drives the indicator: "loading" shows a spinner, "success" a check, "error" a cross — each with its own label. The state is fully controlled by you, so it fits naturally at the end of a save or upload flow.

In a form action

Wire it next to a submit button: flip to loading on click, then to success or error when the request settles. The polite live region announces each transition to assistive tech.

When to use it

InlineLoading is for the small, in-place feedback that belongs beside the control that triggered it — a "Saving… / Saved" beside a form button, a per-row upload state, an inline validation check. It keeps the outcome next to the cause instead of firing a toast across the screen.

For a blocking, full-surface wait use LoadingOverlay; for indeterminate progress with no resolution use Spinner; for a determinate bar use ProgressBar. Keep the success and error states on screen only briefly, then return to idle or remove the component.

Accessibility

• The root is a polite live region (`role="status"`), so state transitions are announced without stealing focus.
• The check and cross are decorative SVGs (`aria-hidden`); the meaning is carried by the text label, never by color alone.