# Spinner

- Page: <https://kznlabs.github.io/labsUI/components/spinner>

## Spinner (`spinner`, component)

Server-safe activity indicator: eight spokes in currentColor, three sizes, its own status label (or silent inside a parent that announces). Holds still under reduced motion.

- Install: `npx @kznlabs/labsui add spinner`
- Docs: <https://kznlabs.github.io/labsUI/components/spinner>
- Brings: utils
- npm: clsx@^2.1.1, tailwind-merge@^3.7.0

### API

- `<Spinner>` (+ <span> props): Activity indicator: eight spokes in `currentColor`. Under reduced motion it holds still.
  - `label?: string` = `"Loading"`: Accessible name. Pass "" when a parent already announces the busy state.
  - `size?: "sm" | "default" | "lg"` = `"default"`: Diameter.

### Usage

```tsx
<Spinner size="sm" label="Loading members" />
```

### Example: syncing.tsx

```tsx
import { Spinner } from "@/components/ui/spinner";

export function Syncing() {
  // label="" silences the spinner; the text next to it is the status.
  return (
    <div className="flex items-center gap-2 text-sm">
      <Spinner label="" />
      <span role="status">Syncing 3 servers…</span>
    </div>
  );
}
```