Spinner

A compact loading indicator for pending or indeterminate work. Spinner renders with `role="status"` and an accessible name so assistive technologies can announce loading state without exposing the decorative visual.

Examples

Default

<Spinner />

With Label

Loading...

<Spinner label="Loading..." />

With Description

Uploading filesThis may take a few moments

<Spinner label="Uploading files" description="This may take a few moments" />

Large With Description

Uploading filesThis may take a few moments

<Spinner
  size={36}
  label="Uploading files"
  description="This may take a few moments"
/>

Sizes

<div style={{display: 'flex', alignItems: 'center', gap: '1rem'}}>
  <Spinner size="sm" />
  <Spinner size="md" />
  <Spinner size="lg" />
  <Spinner size={28} />
  <Spinner size={32} />
  <Spinner size={36} />
</div>

Sizes With Labels

SmallMediumLarge28px32px36px

<div style={{display: 'flex', alignItems: 'flex-start', gap: '1rem'}}>
  <Spinner label="Small" size="sm" />
  <Spinner label="Medium" size="md" />
  <Spinner label="Large" size="lg" />
  <Spinner label="28px" size={28} />
  <Spinner label="32px" size={32} />
  <Spinner label="36px" size={36} />
</div>

On Media

<div style={{display: 'inline-flex', padding: '1rem', background: '#111'}}>
  <Spinner variant="onMedia" />
</div>

On Media With Label

Loading media

<div style={{display: 'inline-flex', padding: '1rem', background: '#111'}}>
  <Spinner label="Loading media" variant="onMedia" />
</div>

On Media With Description

Loading mediaStreaming from the server

<div style={{display: 'inline-flex', padding: '1rem', background: '#111'}}>
  <Spinner
    description="Streaming from the server"
    label="Loading media"
    variant="onMedia"
  />
</div>

API

Spinner

A compact loading indicator for pending or indeterminate work. Spinner renders with `role="status"` and an accessible name so assistive technologies can announce loading state without exposing the decorative visual.

Prop	Type	Default	Description
aria-label	string	—	Accessible label for the loading status. Defaults to a string label when provided, otherwise "Loading".
className	string	—	Optionally adjust rendering by setting the className.
data-testid	string	—	Test id applied to the root element.
description	string	—	Optional secondary text shown below the label to give more context about the pending work.
label	string	—	Optional visible label shown below the spinner.
ref	Ref<HTMLSpanElement>	—	Ref forwarded to the root span element.
size	"sm" | "md" | "lg" | 32 | 36 | 28	—	Visual size of the spinner. sm/md/lg use design-system icon size tokens; the numeric sizes (28/32/36) are bespoke pixel values for larger standalone loading states. Default is md.
style	CSSProperties	—	Inline styles applied to the root element.
variant	"default" | "onMedia"	—	Visual style variant for the spinner. Default is default.