Spinner

An animated loading indicator with role="status" and a visually-hidden accessible label.

Preview

Usage

import { Spinner } from "anexui";

<Spinner />

Sizes

<Spinner size="sm" />
<Spinner size="md" />
<Spinner size="lg" />

Custom label

<Spinner label="Loading dashboard…" />

Inside a button

<Button disabled>
  <Spinner size="sm" label="" />
  Saving…
</Button>

Props

| Prop | Type | Default | Description | |---|---|---|---| | size | "sm" \| "md" \| "lg" | "md" | Size of the spinner SVG | | label | string | "Loading…" | Accessible label announced by screen readers (visually hidden) |

Accessibility

• role="status" with aria-live="polite" announces the label on mount
• Label text is visually hidden using a .sr-only utility — visible only to screen readers
• Pass label="" when the surrounding context already announces loading (e.g., inside a loading button)