# InlineLoading
- **Category:** Feedback (`feedback`)
- **Slug:** `feedback/inline-loading`
- **Status:** stable
- **Platforms:** web
- **Import:** `import { InlineLoading } from "@protocore/pds";`
- **Docs:** https://pds.protocore.io/components/feedback/inline-loading
> An inline spinner + label that resolves to a success check or an error cross, driven by a state prop.
## 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.
## Props
| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `className` | `string` | no | — | — |
| `label` | `ReactNode` | no | — | The text shown beside the indicator. |
| `state` | `enum` | no | `loading` | Which phase to render. |
| `style` | `CSSProperties` | no | — | — |
## Examples
### 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.
```tsx
import { InlineLoading } from "@protocore/pds";
export default function InlineLoadingStates() {
return (
);
}
```
### 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.
```tsx
import * as React from "react";
import { InlineLoading, Button, type InlineLoadingState } from "@protocore/pds";
const LABEL: Record = {
idle: "",
loading: "Saving…",
success: "Saved",
error: "Failed — try again",
};
export default function InlineLoadingFlow() {
const [state, setState] = React.useState("idle");
const run = () => {
setState("loading");
window.setTimeout(() => setState("success"), 1400);
window.setTimeout(() => setState("idle"), 3400);
};
return (