AppSpinner

Átomos

Indicador circular de carregamento com role="status".

Quando usar: espera curta de uma ação ou região da página (envio de formulário, carregamento de lista).

Quando não usar: dentro de AppButton (use isLoading, que já inclui o spinner); quando o progresso é conhecido (use uma barra de progresso).

Importar

import { AppSpinner } from '@handsondigital/idplugger-ui'

CSS

Para carregar só o CSS deste componente (além do tokens.css), importe o arquivo dele; as dependências vêm por @import:

@import '@handsondigital/idplugger-ui/css/AppSpinner.css';

Com Tailwind 4 e camadas, use a variante em @layer idplugger-ui:

@import '@handsondigital/idplugger-ui/css/layer/AppSpinner.css';

Exemplos

Default

const Default = () => <AppSpinner />;

Custom Label

const CustomLabel = () => <AppSpinner label="Validando nota fiscal..." />;

Sizes

const Sizes = () => (
  <div style={{ display: 'flex', gap: 16, alignItems: 'center' }}>
    <AppSpinner size="sm" />
    <AppSpinner size="md" />
    <AppSpinner size="lg" />
  </div>
);

Props

Prop	Tipo	Padrão	Descrição
`className`	`string`	`—`	Classe CSS adicional.
`label`	`string`	`Carregando...`	Nome acessível anunciado a leitores de tela (`role="status"`). Padrão: `Carregando...`.
`size`	`"sm" \| "md" \| "lg"`	`—`	Tamanho do indicador: `sm`, `md` ou `lg`. Padrão: `md`.