Spinner

UsageCopy Anchor Link

import { Spinner } from "@azmr/ui/spinner";

import { Spinner } from "@azmr/ui/spinner";

export default function SpinnerBasic() {
  return (
    <div className="flex items-center gap-6">
      {/* Decorative: the surrounding control already says it is busy. */}
      <Spinner />
      <Spinner className="size-6" />
      {/* Announced as a status. */}
      <Spinner className="size-8 text-primary" label="Loading customers" />
    </div>
  );
}

Spinner is a Server Component (no hooks, no "use client"), so it works in loading.tsx and Suspense fallbacks without a client boundary. size runs from xs to xl (default sm, 1rem), or inherit for 1em; a size-* class still overrides it. Colour follows currentColor, or set tone. delay keeps it invisible for that many milliseconds, then fades it in (pure CSS).

For a visible message, your logo inside the spinner, a page or section loader, an overlay or a top-of-page bar, see Loading.

Decorative or announcedCopy Anchor Link

A spinner inside a control that already says it is busy (such as Button loading) should be decorative: it is aria-hidden by default. A spinner on its own needs a label, which makes it a role="status" that screen readers announce.

Reduced motionCopy Anchor Link

Most motion in @azmr/ui stops under prefers-reduced-motion. A spinner does not: a frozen spinner reads as a hung page, which is worse than motion the user asked to avoid. It is marked data-motion="essential" to opt out of the reduced-motion rule.

PropsCopy Anchor Link

Any SVG attribute passes through, and ref is the <svg>. className is merged last: size-8 text-primary.

AccessibilityCopy Anchor Link

• Decorative by default, announced only when you give it a label.
• No keyboard interaction; it is not focusable.