Spinner
React indeterminate loading spinner that follows the current text size and color, with sizes, tones, and an accessible label by default.
Spinner shows work with no known duration. By default it is 1em and follows currentColor, so it scales with the text around it.
When to use
Use Spinner while something loads and the duration is unknown: fetching a list, submitting a request, checking a status. Inside a Button, use the loading prop instead, which places the spinner for you.
When the duration or progress is known, use Progress. For content placeholders, use Skeleton.
Examples
Props
Props declared by Spinner. Native attributes of the underlying element pass through.
| Prop | Type | Default | Description |
|---|---|---|---|
size | "sm" | "md" | "lg" | "xl" | ||
tone | "primary" | "onColor" | "neutral" | ||
aria-label | string | Defines a string value that labels the current element.
Accessible label announced by screen readers. Defaults to "Loading".
Pass aria-hidden="true" (e.g. inside a Button that already has its
own label) to suppress. |
Accessibility
Spinner announces "Loading" by default through aria-label; pass your own label to say what is loading. Inside a control that already has a label, pass aria-hidden="true" to avoid a double announcement.
Pair the spinner with aria-busy="true" on the region that is loading so the state is exposed to assistive technology.