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>