Spinner
Spinner
is used to indicate a loading state.
- Spinner is ideal for actions that cannot be performed instantly but will only take a brief amount of time to process
- Due to its compact size, Spinner should not be used for loading a full-page layout
- Consider using a Skeleton instead
- Avoid displaying multiple loaders in the same workflow to help users stay focused
- Use SubmitButton if you need a Spinner within a Button
The basic Spinner is sized 32×32.
We suggest using a large Spinner sized 64×64 for large containers and tables.
It may be helpful to customize the title
to provide screen readers additional context on long-running tasks.
Name | Type | Default | Description |
---|---|---|---|
title | string | Loading… | Accessible title for the Spinner; used as the native tooltip. |
width | string number | 32 | Size of the Spinner. Use 64 for a large Spinner. |
- Keep in mind the color contrast ratio between the Spinner and the background on which it sits
- WCAG 2.1 requires a contrast ratio of at least 3:1 for graphics and user interface components
- The
title
prop defaults to a sensible value, but it can be customized based on product area- e.g. “Please wait while we process your payroll”, “Your report is being generated”
The following testing snippet(s) offer suggestions for testing the component using React Testing Library with occasional help from Jest.
render(<Spinner />);const spinner = screen.getByRole('img', {name: 'Loading…',});expect(spinner).toBeInTheDocument();