Spinner

Status: stableAccessibility reviewedtenet-ui@0.4.0

import { Spinner } from 'tenet-ui';

Also accepts every prop of HTMLAttributes<HTMLSpanElement>.

Source: src/components/Spinner/Spinner.tsx

Usage guidelines

When to use: an indeterminate wait where you can’t show progress (loading a panel, submitting). If you know the proportion done, use a progress bar instead; for content placeholders, prefer a skeleton.

Rules

It renders role="status" with a visually-hidden label — keep the label meaningful (“Loading repositories”) so screen-reader users hear what’s pending.
It inherits currentColor, so place it inside text of the right color (e.g. inside a Button it picks up the button text color) rather than restyling it.
Don’t block the whole screen with a bare spinner for long waits — pair it with context or a skeleton.

Do / Don’t

✅ <Spinner label="Loading repositories" />
✅ inside a button: <Button disabled><Spinner size="small" /> Saving…</Button>
❌ A spinning <div> with no role/label — invisible to assistive tech.

See also: Skeleton and ProgressBar; system guideline data-display (loading rules).

Examples

3 stories for Spinner — open in Storybook

Default components-spinner--default
Small components-spinner--small
Large components-spinner--large

The full matrix (all args, controls, accessibility panel) is in Storybook.

Props

Prop	Type	Default	Description
`size`	`'small' \| 'medium' \| 'large'` SpinnerSize	`medium`	Size from the scale.
`label`	`string`	`Loading`	Accessible label announced to assistive tech (visually hidden).