# Spinner

> A small brand-tinted spinner for in-flight work inside buttons, fields and panels.

Category: Feedback. Docs page: https://rime.mjsons.net/components/spinner

## Installation

```bash
npx shadcn@latest add KezLahd/rime/spinner
```

Spinner is decorative unless given a label. Buttons and IconButtons show it themselves when loading.

## Usage

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

<Spinner label="Loading invoices" />
```

## Props: Spinner

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `size` | `number` | `16` | Pixel size. 14 inside buttons, 16–20 inline, 24 for a panel. |
| `tone` | `"brand" \| "current"` | `"brand"` | brand = accent on light surfaces; current = inherits text colour (buttons). |
| `label` | `string` |  | Announced to screen readers. Omit when the parent already says it is busy. |
| `className` | `string` |  |  |

## Examples

### Sizes

```tsx
<Spinner size={14} />
<Spinner size={20} label="Loading" />
```

## Theme tokens

System tokens it reads: `--brand`.

## Accessibility

- With label it is wrapped in role="status" with the label as text; without, it is decorative.

## Do

- Prefer skeletons for content that is loading.

## Don't

- Don't spin a whole page; show its shape.