Spinner

Sizes

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

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

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

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.

Progress: Measurable progress.
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