Skip to content

Spinner

A small loading indicator in the current text colour.

alphaSource

Installation

pnpm add @syntara/react @syntara/tokens
import { Spinner } from '@syntara/react';

Usage

import { Spinner } from '@syntara/react';

export function Loading() {
  return <Spinner size="sm" label="Loading claims" />;
}

Examples

With text

Beside a short status line.

Accessibility

No keyboard interaction of its own.

  • Renders role="status" with visually hidden label text, so the loading state is announced politely.
  • The SVG is aria-hidden. It uses currentColor — make sure the parent colour has 3:1 contrast with the background.
  • Nothing rotates: eight spokes fade in turn (opacity only). With reduced motion the fade runs at half speed, and a frozen frame still reads as a spinner.

Guidelines

Do

  • Give the label the task: "Loading claims", not just "Loading".
  • Use it inside small areas (a button, a table cell); use Skeleton for whole layouts.

Don’t

  • Don't show several spinners for one task.
  • Don't put a Spinner in a Button — use Button's isPending.

API reference

Spinner

size
  • sm
  • mddefault
  • lg

16, 24 or 32px.

label
string

Announced to screen readers through role="status"; not shown.

Default 'Loading'

Tokens

The semantic tokens this component reads, grouped by what they control. Swatches show this site’s theme; change a tenant’s brand and the component follows with no code change.

Space and size3
space.4space.6space.8
Motion1
motion.duration.normal