Componentes
Spinner
Arco curto em currentColor, para dentro de um botão ou ao lado de um texto.
Exemplos#
currentColor · papel, noite
Sobre noite
Importar#
import { Spinner } from "@hiboupay/react";
import type { SpinnerProps } from "@hiboupay/react";Quando usar#
Use quando
- Ação curta dentro de botão (automático com loading).
- Indicador pequeno ao lado de texto.
Não use quando
- Carregando lista: Skeleton.
- Agente trabalhando: HibouMark working.
- Espera de tela: StatusView working.
Anatomia#
- 01Trilho 20% de opacidade
- 02Arco de 90°
Estados#
API#
Props documentadas no registro. * indica obrigatória.
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| label | string | Nome acessível quando está sozinho (vira role=status). | |
| className | string | Tamanho e cor (text-*). |
Acessibilidade#
Teclado
Leitor de tela
- —Sem label: aria-hidden.
- —Com label: role=status.
Boas práticas#
Faça
- label quando sozinho.
Evite
- Spinner de página inteira.
Conteúdo#
- —label: "Carregando pagamentos".
Tokens#
Os tokens que desenham este componente. Clique para ver valor, variável e classe.
Relacionados#
Ação
Button
Ação. Uma altura por tamanho, compartilhada com input e chip. Toque afunda 2%. No foco, o anel de 2px chega agora e o halo azul entra depois.
Estado
Skeleton
A forma da peça que ainda não chegou. Raio, altura e etiqueta iguais aos da peça real. Sempre aria-hidden; quem carrega anuncia.
Marca
HibouMark
O símbolo oficial, com o traço exato do imagotipo. Ocioso ele pisca a cada 6 s; trabalhando ganha órbita. É o ícone do agente.
Estado
Progress
Trilha wash. Com número, o corpo é Graffiti e a ponta é Vivid Blue. Indeterminado: a coruja trabalha e a barra desliza.
Estado
StatusView
Tela inteira que só tem um estado para contar: vazio, esperando, aprovado ou falhou. Um desenho para os quatro; o tom troca o ícone no tile branco. EmptyState é o preset neutro.