Source: https://monarchui.dev/components/spinner/

Components · Status and feedback

# Spinner

Indeterminate progress.

@rookcom/monarch-react

Component

## Sizes

## Usage examples

The example at the top of the page is the only one for this component.

## Purpose

A small indeterminate progress indicator.

### Use when

- A short wait inside a control or small area (Button uses it while loading).

### Avoid when

- Progress is measurable: use Progress.
- A whole region is loading: use LoadingState.

## Design principles

- Labelled means announced: with `label` it is a status; without, it is decorative.
- Server-component safe: no state or effects.

## API reference

```tsx
import { Spinner } from '@rookcom/monarch-react';
```

| Export | Kind | Rendering | Root class |
| --- | --- | --- | --- |
| `Spinner` | component | server-safe | `.mn-spinner` |

All native `<span>` attributes except children pass through.

Generated from the TypeScript declarations of `packages/react/src/components/feedback/spinner`.

## Properties

### `Spinner`

Indeterminate progress indicator. Server-component safe.

| Prop | Type | Description |
| --- | --- | --- |
| `className` | `string` |  |
| `id` | `string` |  |
| `label` | `string` | Accessible name. With a label the spinner is announced as a status; without one it is decorative (use that inside a busy button). |
| `size` | `"sm" \| "md" \| "lg"` |  |

## Variants

| Prop | Values | Description |
| --- | --- | --- |
| `size` | `'sm'``'md'``'lg'` | 0.875rem, 1rem (default), 1.5rem. Exposed as `data-size`. |

## States

| State | Exposed as | Behaviour |
| --- | --- | --- |
| Spinning | – | Always animating; slower (1.6s) with reduced motion. |

## Interaction behaviour

- None.

## Keyboard support

Not interactive, so there is no keyboard behaviour.

## Accessibility

Role

status when labelled; otherwise aria-hidden

Accessible name

label

becomes

aria-label

.

- Leave `label` off inside a busy button, which sets `aria-busy` itself.

## Responsive behaviour

- Fixed size per `size`; no breakpoints.

## Theme support

- Drawn with `currentColor`, so it takes the surrounding text colour.

## Do and don't

### Do

- Give a standalone spinner a `label` that names what is loading.

### Don't

- Do not label a spinner inside a loading Button; it would be announced twice.

## Related components

- [Progress](https://monarchui.dev/components/progress-bar/): Measurable progress.
- [Button](https://monarchui.dev/components/button/): Shows a spinner while `loading`.

## Dependencies

| Kind | Depends on |
| --- | --- |
| npm packages | None |
| Monarch components | None |

## Testing coverage

- Is a status only when labelled; otherwise aria-hidden.

| Check | Covered |
| --- | --- |
| Axe in jsdom | Yes |
| Server rendering | Yes |
| Browser suites | Visual baselines: /__gallery |

Tests: `packages/react/src/components/feedback/spinner`

## All example code

### Sizes

```tsx
import { Spinner } from '@rookcom/monarch-react';

<Spinner size="sm" label="Loading small" />
<Spinner label="Loading" />
<Spinner size="lg" label="Loading large" />
```