Spinner

Usage

The Spinner component provides a way to show a spinner.

import { Spinner } from "@raystack/apsara/v1";
 
<Spinner size={3} />;

Spinner Props

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:

<Flex gap="medium" align="center">
  <Spinner size={1} />
  <Spinner size={2} />
  <Spinner size={3} />
  <Spinner size={4} />
  <Spinner size={5} />
  <Spinner size={6} />
</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.

<Flex gap="large" align="center">
  <Spinner size={4} color="default" />
  <Spinner size={4} color="neutral" />
  <Spinner size={4} color="accent" />
  <Spinner size={4} color="danger" />
  <Spinner size={4} color="success" />
  <Spinner size={4} color="attention" />
</Flex>

Accessibility

The Spinner component includes appropriate ARIA attributes for accessibility:

• role="status": Indicates that the element is a status indicator.
• aria-hidden="true": Hides the spinner from screen readers, as it's a visual indicator only.