InlineLoading
Compact inline status indicator that pairs a label with a loading, success, or error state
Category: feedback · WCAG 2.2-AA · loading, status, progress, feedback, spinner
States
- inactive
- active
- finished
- error
Props
| Prop | Type | Default | Description |
|---|---|---|---|
status | 'inactive' | 'active' | 'finished' | 'error' | — | Status state. |
label | ReactNode | — | Text label for the control. |
labels | { active?: string; finished?: string; error?: string } | — | Overrides for the component’s user-visible strings (i18n). |
Design tokens
--cascivo-color-text--cascivo-color-text-muted--cascivo-color-success--cascivo-color-destructive--cascivo-motion-enter
When to use
- Showing the progress of a single inline action — a Save button that becomes "Saving… / Saved / Failed"
- Communicating async status next to a control without occupying its own block or modal
- Reflecting a terminal success or error state that should be announced to assistive tech
When not to use
- Page- or section-level loading where layout space is reserved — use Skeleton or Spinner
- Persistent, multi-line messages with recovery actions — use Alert or Notification
- Determinate progress with a known percentage — use a progress bar
How to build an accessible InlineLoading in React →
Examples
Active
<InlineLoading status="active" />Finished
<InlineLoading status="finished" label="Saved" />Error
<InlineLoading status="error" label="Save failed" />