Spinner

Anatomy

Import and assemble the component:

1import { Spinner } from "@raystack/apsara";
2
3<Spinner />

Usage

How big the spinner is, and what color it turns.

Size

Six steps, 1 through 6. Pick the one that matches the text or control it sits beside.

The Spinner component offers different size options. You can customize the size of the spinner using the size prop. The available size options are:

1<Flex gap={5} align="center">
2  <Spinner size={1} />
3  <Spinner size={2} />
4  <Spinner size={3} />
5  <Spinner size={4} />
6  <Spinner size={5} />
7  <Spinner size={6} />
8</Flex>

Color

default inherits currentColor, so the spinner takes the color of the text around it. The other five carry meaning — accent, danger, success, attention, neutral.

The Spinner component offers 6 color values. default prop sets the color to currentColor mainly helpful if we want to render the Spinner inside another component like Button. Spinner (with color="default") inherits the foreground color of button text.

1<Flex gap={9} align="center">
2  <Spinner size={4} color="default" />
3  <Spinner size={4} color="neutral" />
4  <Spinner size={4} color="accent" />
5  <Spinner size={4} color="danger" />
6  <Spinner size={4} color="success" />
7  <Spinner size={4} color="attention" />
8</Flex>

API Reference

Renders a loading spinner animation.

Slots

Every rendered part carries a stable data-slot attribute for styling and testing:

Accessibility

The Spinner component includes appropriate ARIA attributes for accessibility:

• role="status" and aria-live="polite": assistive tech announces the spinner as a polite live region when it appears.
• aria-label: announced label, defaults to "Loading". Pass aria-label="…" to override with context-specific text like "Saving changes".
• Pass aria-hidden="true" for purely decorative spinners (e.g. inside a button that already has aria-busy). The status role and label are removed automatically so the two attributes don't conflict.
• Respects motion preferences: spinner rotation is enabled only when prefers-reduced-motion: no-preference.