# Spinner

Giro de espera sem fim previsto.

Quando da para medir, `Progress` diz mais. Quando a espera vai preencher uma tela
inteira, o `Skeleton` mostra o formato do que vem, que assusta menos.

Ele para de girar quando o sistema pede menos movimento, e continua no lugar:
sumir com o aviso deixaria a tela parecendo travada.

## No React Native

Traduz: o `@rivocode/ui-native` exporta `Spinner` - `small` e `large`, os dois tamanhos do `ActivityIndicator`. A API não é a mesma do web (no nativo tudo é controlado), e a [tabela de paridade](/react-native) diz o que muda peça a peça.

## Importação

```tsx
import { Spinner } from '@rivocode/ui'
```

## Exemplos

### Tamanhos

```tsx
import { Button, Spinner } from '@rivocode/ui'

export function Sizes() {
  return (
    <div className="flex items-center gap-4 text-fg">
      <Spinner size="sm" />
      <Spinner />
      <Spinner size="lg" />
    </div>
  )
}
```

### Dentro de botão

```tsx
import { Button, Spinner } from '@rivocode/ui'

export function InsideAButton() {
  return (
    <Button disabled>
      <Spinner size="sm" label="" />
      Emitindo nota
    </Button>
  )
}
```

## Props

| Prop | Tipo | Obrigatória | Desde | O que faz |
| --- | --- | --- | --- | --- |
| `label` | `string` |  | 0.4.0 | O que o leitor de tela anuncia. |
| `size` | `"lg" \| "md" \| "sm" \| null` |  | 0.4.0 |  |

Além dessas: repassa `className`, `style`, `id` e os demais atributos do elemento raiz.

## Ver também

- [Alert](/componentes/alert.md)
- [Badge](/componentes/badge.md)
- [EmptyState](/componentes/empty-state.md)
- [Indicator](/componentes/indicator.md)
- [Kbd](/componentes/kbd.md)
- [Meter](/componentes/meter.md)
- [Convenções da biblioteca](/convencoes.md): Provider, tokens e as regras que valem para toda peça
- [Índice completo](/llms.txt)