Default

What you get out of the box with this component is a pretty basic loading spinner:

Editable example
<Spinner />
<Spinner />

Best practices

1. When loading content, use a spinner for cases where the size of the loaded content is undetermined beforehand.
2. For the Button specifically, rather than implementing a bespoke spinner, set the buttonState prop to ButtonState.Waiting.

Sizes

The Spinner comes in three sizes: small, medium and large.

Editable example
<Spinner size="s" />
<Spinner size="m" />
<Spinner size="l" />
<Spinner size="s" />
<Spinner size="m" />
<Spinner size="l" />

Adding a message

You can add a message or explainer above the spinner with the message prop; by default no message is set.

Editable example
<Spinner message="Loading" size="l" />
<Spinner message="Loading" size="l" />

Primary

To draw attention to a spinner, you can add the primary property, which will indicate that this is the primary loader blocking any actions on a page.

Editable example
<Spinner primary size="l" />
<Spinner primary size="l" />