Spinner

A spinner indicates that a part of the product is currently performing a task of unknown duration.

Props

size?

What the Spinner's diameter should be.

Defaults to md.
children?

The children of the component.

className?

The CSS className for the element.

style?

The inline style for the element.

id?

The element's unique identifier. See MDN.

aria-label?

Defines a string value that labels the current element.

aria-labelledby?

Identifies the element (or elements) that labels the current element.

aria-describedby?

Identifies the element (or elements) that describes the object.

aria-details?

Identifies the element (or elements) that provide a detailed, extended description for the object.

slot?

A slot name for the component. Slots allow the component to receive props from a parent component. An explicit null value indicates that the local props completely override all props received from a parent.

Examples

Sizes

A spinner can vary in size.

Label

A spinner can have a label on its side.

Over Background

You can change a spinner style when over a background by setting a color property on the spinner.

Migration Notes

Coming from Orbiter, you should be aware of the following changes:

  • The color props will only affect the spinner's text color and not the color of the tracks.
  • Use the variant prop to change the color of the tracks, which offers default, white and black options.