Spinner

Spinner é um indicador circular que gira enquanto uma operação sem tempo conhecido acontece. Use dentro de botões, ao lado de rótulos ou como fallback em regiões que ainda não tem dados. Para operações com porcentagem conhecida, prefira Progress.

import { Spinner } from '@uranus-workspace/design-system';

export default function SpinnerDefault() {
  return (
    <div className="flex items-center gap-4">
      <Spinner />
      <Spinner className="size-6" />
      <Spinner className="size-8 text-primary" />
    </div>
  );
}

Uso

import { Spinner } from '@uranus-workspace/design-system';

<Spinner />
<Spinner className="size-6 text-primary" />

O Spinner é um SVG do Lucide (Loader2) com animate-spin aplicado. Controle o tamanho e a cor com classes Tailwind (size-*, text-*). O tamanho padrão é size-4 para casar com ícones dentro de Button.

Dentro de um botão

Combine disabled com Spinner para indicar que uma ação assíncrona está em andamento — este padrão também é mostrado em Button.

<Button disabled>
  <Spinner />
  Salvando
</Button>

Faça

• Use spinner para esperas curtas (~200ms a 3s). Para esperas longas, use Skeleton ou Progress.
• Mantenha o rótulo do botão durante o loading — não troque por "Carregando…".
• Centralize o spinner verticalmente em relação ao texto acompanhante.

Não faça

• Não use spinner como placeholder de conteúdo com layout conhecido. Skeleton é melhor.
• Não encha uma tela inteira com um único spinner — sinaliza falha de design de carga.

Acessibilidade

• O componente já expõe role="status" e aria-label="Loading". Para localizar a mensagem, sobrescreva o aria-label em pt-BR:

<Spinner aria-label="Carregando" />

• A animação usa animate-spin do Tailwind, que é desativada automaticamente em prefers-reduced-motion.