Default
Loading
Show the codeHide the code
Default, code
<Spinner />Spinner
An indeterminate wait, announced politely with its label.
- Free core, MIT
- Version 2.0.0-rc.1
- APG pattern: Status
Examples
These are the real React components. Use them with a mouse, touch or keyboard, and switch the theme and density for every example at once.
With a visible label
Loading invoices
Show the codeHide the code
With a visible label, code
<Spinner label="Loading invoices" showLabel />Tokens
The 3 design tokens Spinner reads, with the value each has in the theme and density chosen above. Change a token and the component follows, in Figma and in code.
Show all 3 tokens
| Token | Value now | CSS variable |
|---|---|---|
| color.icon.default | … | --sd-color-icon-default |
| color.text.secondary | … | --sd-color-text-secondary |
| spacing.gap.sm | … | --sd-spacing-gap-sm |
Install
The npm package isn’t published yet. When it is, this is the install line; until then, this page runs the same build of the package (from commit fa3abf8).
Install
npm i @superduperui/react @superduperui/tokensImport
import { Spinner } from "@superduperui/react"Props
Spinner also takes the props of the React Aria component it’s built on.
| Prop | Type | What it does |
|---|---|---|
label | stringDefault 'Loading' | What is loading, read once by screen readers ("Loading invoices"). Default "Loading". |
size | IconSizeDefault 'md' | sm 16px, md 20px (default), lg 24px. |
showLabel | booleanDefault false | Show the label next to the spinner as well. Default false (screen readers only). |
className | string |
When to use it
Use it for
- Short waits inside a button or panel
- Loading a list
Use something else for
- Waits with known progress: use ProgressBar
- Whole pages loading: use Skeleton
Accessibility
Screen readers announce "Loading invoices" (status).
WCAG 2.2 AAA criteria the component meets in Comfortable density: 1.4.6, 1.4.9, 2.3.2, 2.3.3.
Not interactive: density changes spacing only.
What your product still has to do
- Say what is loading in the label
Shared patterns it ships with: 2.3.2 (well under 3 Hz; 1.5 s loop under reduced motion).
This release’s test results
| axe-core (WCAG A, AA, AAA and best practice) | 60 runs across every story, theme, density and width: 0 violations |
|---|---|
| Rendered text contrast | 55 text runs: 0 below 7:1, lowest 11.42:1 |
| Target size | 0 targets: 0 under 44px in Comfortable |
| Focus appearance (2.4.13) | 0 focus stops in 0 browser engines: all pass |
Manual passes with VoiceOver and NVDA haven’t been done yet.
In Figma
The Figma component is Spinner, with Size (Small, Medium, Large). The Figma library isn’t published yet.
Figma to code: Size → size (Small = "sm", Medium = "md", Large = "lg"); Show label → showLabel; Label → label.