Skip to content

Spinner

Spinner is used to indicate a loading state.

Figma logo
  • 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
  • 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
NameTypeDefaultDescription
title  stringLoading…Accessible title for the Spinner; used as the native tooltip.
width  stringnumber32Size 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();