Anatomy

Import and assemble the component:

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

API Reference

Renders a loading spinner animation.

Slots

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

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". 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.