Skip to main content
  • Location: sabo/src/components/ui/spinner.tsx

​
When to use

  • Show short, indeterminate loading states for buttons, cards, or page sections.
  • Prefer skeletons for full‑content placeholders; use Spinner for small inline waits.

​
Usage

sabo/src/components/ui/spinner.tsx
import { Spinner } from "@/components/ui/spinner";

export function Example() {
  return (
    <div className="flex items-center gap-3">
      <Spinner className="size-4" />
      <span>Loading…</span>
    </div>
  );
}

​
Key props

​
className
string
Tailwind classes for size or color (e.g., size-4, text-muted-foreground).

​
Styling tip

  • Adjust size with Tailwind size utilities (size-3, size-5).
  • In a button, align via inline-flex items-center gap-2.

​
Accessibility

  • Spinner sets role=“status” and an aria-label=“Loading”.
  • Provide adjacent text for context when possible (e.g., “Saving settings…”).