Feedback

Spinner

An indeterminate loading indicator.

Server-renderable1 export

Inherits `currentColor`, so it adopts the text colour of whatever it sits inside. Under `prefers-reduced-motion` it degrades to a static ring rather than disappearing — the user still needs to know something is busy.

Import

import { Spinner } from "@abbainitiative/ui";

Also available from the subpath entry @abbainitiative/ui/spinner.

This component has no state and no event handlers, so it renders inside a Server Component without a client boundary of your own.

Examples

Sizes

<Inline gap={4}>
  <Spinner size="sm" />
  <Spinner size="md" />
  <Spinner size="lg" />
</Inline>

Props

Spinner props. All native attributes of the underlying element are also accepted and forwarded.
Prop	Type	Default	Description
size	`"sm" \| "md" \| "lg"`	`"md"`	Diameter.
label	`string \| null`	`"Loading"`	Accessible label. Pass null inside a control that already announces its busy state.

Accessibility

Announced as `role="status"` with a label by default.
Passing `label={null}` removes it from the accessibility tree, avoiding a double announcement inside an `aria-busy` button.
Honours `prefers-reduced-motion` by stopping the animation, not by hiding.