# Spinner

> A busy indicator rendered as a rotating icon inside a `role="progressbar"` host, colored by a semantic color role and sized by a size variant.

```ts
import { Spinner } from "@sdxc/ui";
```

Renders a busy indicator: a `role="progressbar"` host with no
`aria-valuenow`, so assistive technology reads it as indeterminate. Pair
it with the `spin()` mixin from the animation layer for the rotating loop.

## Examples

```tsx
<Spinner aria-label={t("status.loading")} />
```

```tsx
<Spinner color="danger" size="lg" aria-label={t("status.retrying")} />
```

```tsx
<Spinner mix={[spin()]} aria-label={t("status.loading")} />
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `color?` | `"brand" \| "neutral" \| "success" \| "warning" \| "danger"` | Semantic color role. Defaults to DEFAULT_COLOR. |
| `size?` | `"sm" \| "md" \| "lg"` | Size variant. Defaults to DEFAULT_SIZE. |
| `"aria-label"` | `string` | Accessible label announced by assistive technology for as long as the spinner is on screen. Required — the component ships no built-in copy, so a consumer's own localized string drives it. |

Also accepts everything in `Omit<TagProps<"div">, "aria-label">`.


## Types

| Name | Values | What it decides |
| --- | --- | --- |
| `Color` | `"brand" \| "neutral" \| "success" \| "warning" \| "danger"` | Semantic color role, each mapped to its matching `--ui-*-fg` variable. |
| `Size` | `"sm" \| "md" \| "lg"` | Size variant controlling the rotating icon's rendered dimensions. |