Spinner

A visual indicator of a loading or processing state.

Anatomy

Import and assemble the component:

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

3<Spinner />

API Reference

Renders a loading spinner animation.

Prop

Type

Examples

Size

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

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>

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". Override with the ariaLabel prop (or the standard aria-label attribute) for 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.