How to build an accessible InlineLoading in React
role="status" with aria-live="polite" announces the label when the status changes; the icon is decorative (aria-hidden) so meaning is carried by the text and color is never the sole signal
When to use a InlineLoading
- 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 it
- 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
Accessibility
Role status, verified at WCAG 2.2-AA.
Common mistakes
Avoid: <Spinner /> with separate manually-managed success and error markup
Prefer: <InlineLoading status={status} /> driving icon and color from one status prop
A single status keeps the icon, color, and announced label in sync and prevents mismatched states
Example
<InlineLoading status="active" />