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.

React props
Name	Type	Default	Description
title	`string`	Loading…	Accessible title for the Spinner; used as the native tooltip.
width	`stringnumber`	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();