Spinner

Preview

Local preview. It doesn't affect real accounts, environments, or run data.

Usage

Indicate short processing of unknown length. On its own, describe the task with label. Inside a region that already announces the status, set decorative.

Don't show a spinner indefinitely. Report failures, delays, and cancellation separately. Announce loading from one live region, not several.

Size: SizeProvider size="small" resizes the whole composition, including portals. The default size is Default. Size guidance and comparisons

Anatomy

span(status) → decorative SVG + visually hidden label

Keyboard and accessibility

By default, Spinner has role=status and visually hidden text. The decorative prop removes it from the accessibility tree. With reduced motion, rotation stops, but the static indicator and label remain.

Give each control a name that describes its purpose. Connect error messages to their controls, and signal state with more than color. Automated checks don't replace manual keyboard and assistive technology testing.

Example code

Shared components take their styles from design tokens. Each example sets its own composition and accessibility attributes. The calling screen defines callbacks, refs, and product data.

import { Spinner } from '@surflane/ui'

<Spinner label='Syncing environments' />
<button disabled>
  <Spinner decorative size='small' /> Saving
</button>

Key API

The table lists the common wrapper's main props. See the package type declarations for the full types.

Related tokens