# Spinner

A turning ring for pending work, in three sizes; it stays still under reduced motion.

Source page: https://sproutboat.com/ikada/components/spinner

## Installation
```sh
npx shadcn@latest add https://sproutboat.com/ikada/r/spinner.json
```
Or from the package: `import { Spinner } from "@sproutboat/ikada";`
## Usage
```tsx
import { Spinner } from "@/components/ikada/spinner";

<Spinner size="lg" />
```
## Examples
### Sizes

```tsx
<Spinner size="sm" />
<Spinner />
<Spinner size="lg" />
```
### Labelled
The label is announced politely. Say what is loading.
```tsx
<Spinner label="Deploying robin" />
```
### Decorative
When the parent already says it, hide the spinner from assistive tech.
```tsx
<div className="flex items-center gap-2 text-sb-sm text-fg-muted">
  <Spinner decorative /> Deploying
</div>
```
### In a button
Button's own loading prop already draws one; this is for custom layouts.
```tsx
<Button disabled aria-busy="true">
  <Spinner decorative size="sm" /> Planting wren
</Button>
```
## Props
### SpinnerProps
Also takes every prop of `Omit<ComponentProps<"span">, "children">, VariantProps<typeof spinnerStyles>`.
| Prop | Type | Description |
| --- | --- | --- |
| label? | `string` | What is loading. Announced politely; pass `decorative` when the parent already says it. Default `Loading`. |
| decorative? | `boolean` | Hide from assistive tech (the button or region it sits in is already `aria-busy`). Default `false`. |
| size? | `"sm" \| "md" \| "lg" \| null` |  |
Source: https://github.com/baronunread/ikada/blob/main/src/components/spinner.tsx