Spinners help indicate that a surface's content or portion of content is currently loading.

Props

Name
Type
Default
accessibilityLabel
Required
string
-

String that clients such as VoiceOver will read to describe the element. Always localize the label.

show
Required
boolean
false
delay
boolean
true

Whether or not to render with a 300ms delay. The delay is for perceived performance so you should rarely need to remove it.

size
"sm" | "md"
"md"

sm: 32px, md: 40px

Usage guidelines

When to Use
  • When loading or updating content on a surface.
When Not to Use
  • To communicate that a UI element, such as a button, is performing an action that takes a perceptible amount of time. Contact us if this is needed.

Example

Spinners indicate when a user has to wait for something else to occur. They delay showing for 300ms to improve perceived performance.

The label on a spinner is for accessibility. You should pick labels that relate to the specific part of the product it's being used in ("Loading homefeed" for instance).