# Spinner

> Indeterminate activity indicator drawn with the current text color.

Source: https://ui.jcsoftdev.com/docs/components/spinner

Indeterminate activity indicator drawn with the current text color. It spins only when the user
has not asked for reduced motion; otherwise it stays a static ring and the label still says
that work is in progress.

## Import

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

Single-component entry points tree-shake to just this component: `@jcsoftdev/ui/atoms/spinner`.

## Usage

```tsx
<Spinner size="sm" />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `size` | `number \| SpinnerSize` | `"sm"` | Named size, or a pixel size for one-offs. Defaults to `sm`. |
| `label` | `string \| false` |  | Accessible name announced through `role="status"`. Defaults to the localized `loading` UI string. `false` marks the spinner decorative (`aria-hidden`), for use next to its own text. |

`*` marks a required prop.

It also accepts the native props of the element or primitive it renders (for example `className`, `id`, `aria-*` and event handlers).

## Storybook stories

- [Default](/storybook/?path=/story/atoms-spinner--default)
- [Sizes](/storybook/?path=/story/atoms-spinner--sizes)
- [Custom Label](/storybook/?path=/story/atoms-spinner--custom-label)
- [Decorative](/storybook/?path=/story/atoms-spinner--decorative)
- [Spanish](/storybook/?path=/story/atoms-spinner--spanish)

## Source

`packages/ui/src/atoms/spinner/spinner.tsx`