import { Meta } from '@storybook/addon-docs';

<Meta title="Components/Spinner/Codesandbox" />

# Spinner

Spinners are used to communicate a loading state to the user.
They may be used in buttons, forms, containers, pages,
and anywhere else a loading state is necessary.

```js codesandbox=palmetto-components
import React from 'react';
import { Spinner } from '@palmetto/palmetto-components';

export default () => <Spinner />;
```

## Variants

Set the color variations of the spinner

```js codesandbox=palmetto-components
import React from 'react';
import { Spinner, Box } from '@palmetto/palmetto-components';

export default () => (
  <Box display="block" childGap="md">
      <Box direction="row" gap="sm">
        <Spinner color="body-primary" />
        <div>body-primary</div>
      </Box>
      <Box direction="row" gap="sm">
        <Spinner color="body-secondary" />
        <div>body-secondary</div>
      </Box>
      <Box direction="row" gap="sm">
        <Spinner color="body-tertiary" />
        <div>body-tertiary</div>
      </Box>
      <Box direction="row" gap="sm">
        <Spinner color="contrast" />
        <div>contrast</div>
      </Box>
      <Box direction="row" gap="sm">
        <Spinner color="inverse-primary" />
        <div>inverse-primary</div>
      </Box>
      <Box direction="row" gap="sm">
        <Spinner color="inverse-secondary" />
        <div>inverse-secondary</div>
      </Box>
      <Box direction="row" gap="sm">
        <Spinner color="primary" />
        <div>primary</div>
      </Box>
      <Box direction="row" gap="sm">
        <Spinner color="success" />
        <div>success</div>
      </Box>
      <Box direction="row" gap="sm">
        <Spinner color="info" />
        <div>info</div>
      </Box>
      <Box direction="row" gap="sm">
        <Spinner color="disabled" />
        <div>disabled</div>
      </Box>
    </Box>
);
```

## Sizes

Use the `size` prop on your Spinner based on what's a best fit for your layout

```js codesandbox=palmetto-components
import React from 'react';
import { Spinner, Box } from '@palmetto/palmetto-components';

export default () => (
  <Box direction="row" childGap="md">
    <Box direction="row" childGap="sm">
      <Spinner size="sm" />
      <div>sm</div>
    </Box>
    <Box direction="row" childGap="sm">
      <Spinner size="md" />
      <div>md</div>
    </Box>
    <Box direction="row" childGap="sm">
      <Spinner size="lg" />
      <div>lg</div>
    </Box>
    <Box direction="row" childGap="sm">
      <Spinner size="xl" />
      <div>xl</div>
    </Box>
  </Box>
);
```
