Spinner

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

Usage

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.

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.

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.