Spinner

An animated loading indicator that communicates an in-progress state.

Overview

Spinner renders an accessible animated loading indicator. It announces a label to screen readers via aria-label and supports semantic color variants to match the surrounding context.

Use Spinner as a standalone loading indicator or pair it with Button's built-in loading prop. Always provide a meaningful label when the loading context is ambiguous — screen readers rely on this text to communicate what is happening.

Accessibility

Renders with role="status" and aria-label so screen readers announce the loading state.
The default label is "Loading". Override it with a context-specific message (e.g., "Saving changes", "Fetching results") for better screen reader experience.
The spinner animation respects the prefers-reduced-motion media query.

Import

import { Spinner } from "@cocso-ui/react";

Size

Three sizes are available: large, medium, and small. The default is medium.

Variant

Seven color variants map to semantic meanings. Use white when displaying the spinner on a dark background.

API Reference

Spinner

Prop	Type	Default	Description
`size`	`"large" \| "medium" \| "small"`	`"medium"`	Controls the diameter of the spinner. Use `small` for inline indicators (e.g., inside buttons) and `large` for full-section loading states.
`variant`	`"primary" \| "secondary" \| "success" \| "error" \| "warning" \| "info" \| "white"`	`"primary"`	Controls the spinner blade color. Use `white` when displaying on a dark background for sufficient contrast.
`label`	`string`	`"Loading"`	Text passed to screen readers via `aria-label`. Defaults to `"Loading"`. Provide a specific message when the loading context is not obvious from surrounding content.