import {Spinner} from '@primer/react-brand'Examples
Default
Sizes
Use a named size or a number of CSS pixels for a custom size.
Custom accessible label
Use a concise label that describes the pending operation. Set accessibleLabel to null only when a parent component already communicates the loading state to assistive technologies.
Accessibility
Spinner is non-interactive, and its SVG is hidden from assistive technologies. Use accessibleLabel to provide equivalent visually hidden loading text.
Do not rely on Spinner alone to communicate loading. It should be used as part of a broader loading state UI, which announces progress through a persistent role="status" or aria-live region.
When available, prefer a component’s built-in loading behavior. Components such as ToggleSwitch and IconButton already provide the appropriate semantics and announcements.
Component Props
| Name | Type | Default | Description |
|---|---|---|---|
size | 'small' | 'medium' | 'large' | number | 'medium' | Named size or custom dimensions in CSS pixels. |
accessibleLabel | string | null | 'Loading' | Visually hidden loading text. Use null when loading is communicated elsewhere. |
className | string | Class applied to the animated SVG. |