Spinner
An indeterminate wait, where the duration and the resulting layout are both unknown.
import Spinner from '@/components/ui/Spinner';Source: src/components/ui/Spinner.tsx
Examples
Sized with utilities
It inherits colour and takes its size from the classes you give it.
Props
<Spinner> props
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | '' | — |
Accessibility
- Decorative on its own. The region it sits in should be aria-busy, and the accompanying text is what actually gets announced.
Usage
Do
- Pair it with text — “Checking…” — so the wait has a reason.
Don’t
- Don’t use it where the shape of the result is known; a Skeleton avoids the layout jump.
- Don’t use it for a determinate operation; that is Progress.