# Spinner

> An indeterminate loading indicator with an accessible status label.

Category: Feedback · Status: stable · Package: @bindshq/stance-react@0.1.1 · Docs: https://stanceui.com/components/spinner

Use Spinner for short waits of unknown length, such as loading a list or saving. For longer operations with known progress use Progress, and for loading page structure use Skeleton. Buttons have a built-in `loading` state, so don’t put a Spinner inside a Button.

## Import

```tsx
import { Spinner } from '@bindshq/stance-react';
```

Styles are imported once per app: `@bindshq/stance-tokens/css` and `@bindshq/stance-react/styles.css`.

## Examples

### Basic

```tsx
import { Spinner } from '@bindshq/stance-react';

export function Basic() {
  return <Spinner />;
}
```

### Sizes

```tsx
import { Spinner } from '@bindshq/stance-react';

export function Sizes() {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
      <Spinner size="xs" />
      <Spinner size="sm" />
      <Spinner size="md" />
      <Spinner size="lg" />
    </div>
  );
}
```

### With text

When visible text explains the wait, silence the spinner’s own label.

```tsx
import { Spinner, Text } from '@bindshq/stance-react';

export function WithText() {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }} role="status">
      <Spinner size="sm" label={null} />
      <Text size="sm" as="span" tone="muted">
        Syncing users from Microsoft 365…
      </Text>
    </div>
  );
}
```

### Loading buttons

```tsx
import { Button } from '@bindshq/stance-react';

export function InButton() {
  return (
    <Button loading loadingText="Deploying…">
      Deploy
    </Button>
  );
}
```

## API reference

| Component | Prop | Type | Default | Description |
| --- | --- | --- | --- | --- |
| Spinner | `size` | `'xs' \| 'sm' \| 'md' \| 'lg'` | `'md'` | 12, 16, 20 or 32px. |
| Spinner | `label` | `string \| null` | `'Loading'` | Status text announced; null when a parent announces state. |

## Accessibility

- Exposes role="status" with an accessible label by default.
- Pass label={null} to hide it when nearby text already describes the wait.
- Rotation slows down, rather than stopping, under prefers-reduced-motion, so it still reads as loading.

## Guidelines

**Do**

- Explain what is loading if it takes more than a second.

**Don’t**

- Show several spinners at once.

## Related

- https://stanceui.com/components/progress
- https://stanceui.com/components/skeleton
- https://stanceui.com/components/loading-overlay