Spinner

<Spinner />

API Reference

This component is based on the span element and supports common margin props.

Examples

Size

Use the size prop to control the size of the spinner.

<Flex align="center" gap="4">
  <Spinner size="1" />
  <Spinner size="2" />
  <Spinner size="3" />
</Flex>

With children

Use the loading prop to control whether the spinner or its children are displayed. Spinner preserves the dimensions of children when they are hidden and disables interactive elements.

<Flex gap="4">
  <Spinner loading={true}>
    <Switch defaultChecked />
  </Spinner>

  <Spinner loading={false}>
    <Switch defaultChecked />
  </Spinner>
</Flex>

With buttons

Buttons have their own loading prop that automatically composes a spinner.

<Button loading>Bookmark</Button>

If you have an icon inside the button, you can use the button’s disabled state and wrap the icon in a standalone <Spinner> to achieve a more sophisticated design.

<Button disabled>
  <Spinner loading>
    <BookmarkIcon />
  </Spinner>
  Bookmark
</Button>