# Spinner

> Native Solid 2 fork. Original documentation and designs © WorkOS; historical posts retain their original context.

```jsx
<Spinner />
```

## API Reference

This component is based on the `span` element and supports [common margin props](/themes/docs/overview/layout#margin-props).

| Prop                                                                   | Type                            | Default |
| ---------------------------------------------------------------------- | ------------------------------- | ------- |
| `size`                                                                 | `Responsive<"1" \| "2" \| "3">` | `"2"`   |
| `loading`Toggles whether to hide the children and display the spinner. | `boolean`                       | `true`  |

## Examples

### Size

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

```jsx
<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.

```jsx
<Flex gap="4">

	<Spinner loading={true}>

		<Switch defaultChecked />

	</Spinner>



	<Spinner loading={false}>

		<Switch defaultChecked />

	</Spinner>

</Flex>
```

### With buttons

[Buttons](/themes/docs/components/button) have their own `loading` prop that automatically composes a spinner.

```jsx
<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.

```jsx
<Button disabled>

	<Spinner loading>

		<BookmarkIcon />

	</Spinner>

	Bookmark

</Button>
```