Spinner

Standalone loading indicator — same language as the button busy spinner, usable inline.

Preview

Live

Refreshing… 
<span class="spinner spinner--sm" role="status" aria-label="Loading"></span>
<span class="spinner spinner--md" role="status" aria-label="Loading"></span>

Variants

Small

.spinner--sm — dense toolbars and inline copy.

Medium

.spinner--md — default standalone size.

Inline with copy

Pair with muted text for status lines.

Refreshing…

Accessibility

  • Use role="status" and always provide aria-label (or React label).
  • React requires either label or aria-label — no silent unnamed spinner.
  • Do not nest interactive controls inside the spinner element.
  • Prefer Progress when you can report a percentage.
  • Reduced motion softens the spin animation.

API

HTML classes

Class Description
.spinner Base spinner ring.
.spinner--sm Small size (0.85rem).
.spinner--md Medium size (1.25rem) — default.

React props

From src/core/Spinner.tsx — requires label or aria-label.

Prop Type Default Description
size 'sm' | 'md' 'md' Visual size modifier.
label string — Accessible name (alternative to aria-label).
aria-label string — Accessible name when label is omitted.
className string — Merged onto the root.