Componentes
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.
Exemplos#
Confirmando sua autorização
Estamos confirmando a autorização da consulta da sua margem consignável. Isso leva só um instante.
Por favor, não feche esta janela.
Esperando · a coruja trabalha e a tela vira aria-busy
Pagamento aprovado
Sua contratação foi aprovada. Você será redirecionado para a loja em instantes.
Não foi possível aprovar
Sua margem consignável disponível hoje é menor que o valor do pedido.
Aprovado e recusado · sempre com documento e caminho de volta
Importar#
import { StatusView } from "@hiboupay/react";
import type { StatusViewProps, StatusTone } from "@hiboupay/react";Quando usar#
Use quando
- Espera de resultado que a pessoa não controla: análise, assinatura, liquidação.
- Fim de fluxo: aprovado ou recusado.
- Área sem dado (via EmptyState).
Não use quando
- Aviso dentro de uma tela cheia: Notice.
- Confirmação efêmera: Toast.
- Carregar um pedaço da tela: Skeleton.
Variantes#
neutral
Vazio. A coruja vigia. É o EmptyState.
working
Esperando. A coruja trabalha e a tela vira aria-busy.
success
Aprovado.
danger
Recusado ou falhou.
Anatomia#
- 01Tile de papel com a coruja ou ícone de tom
- 02Título Sora 15
- 03Descrição
- 04Ação
- 05Rodapé: barra de progresso, aviso, link de contrato
Estados#
API#
Props documentadas no registro. * indica obrigatória.
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| tone | "neutral" | "working" | "success" | "danger" | "neutral" | Troca halo e ícone; working marca aria-busy. |
| title* | string | O que está acontecendo, em uma frase. | |
| description | string | Por quê, ou o que fazer agora. | |
| action | ReactNode | Próximo passo. Tela sem saída é bug. | |
| footer | ReactNode | Progress, aviso de não fechar a janela, link do contrato. | |
| compact | boolean | false | Menos respiro, para dentro de cartão ou tabela. |
Acessibilidade#
Teclado
Leitor de tela
- —role=status. working adiciona aria-busy para a espera ser anunciada.
Boas práticas#
Faça
- Na espera, diga quanto tempo leva e o que não fazer.
- No fim, ofereça o documento e o caminho de volta.
Evite
- Espera sem saída nenhuma.
- "Erro inesperado" sem causa nem próximo passo.
Conteúdo#
- —"Confirmando sua autorização. Isso leva só um instante." Aviso de não fechar a janela vai no rodapé.
Tokens#
Os tokens que desenham este componente. Clique para ver valor, variável e classe.
Relacionados#
Estado
EmptyState
Vazio: a coruja vigia até ter o que mostrar. Sem ilustração genérica. Sempre que puder, um próximo passo. É o StatusView no tom neutro.
Estado
Progress
Trilha wash. Com número, o corpo é Graffiti e a ponta é Vivid Blue. Indeterminado: a coruja trabalha e a barra desliza.
Estado
Notice
Aviso preso ao conteúdo, nos quatro tons. Tom aparece como preenchimento e tinta — nunca como faixa colorida no topo do cartão.
Estado
Stepper
Onde a pessoa está numa jornada de poucos passos. Concluído vira check e nunca volta a ser número. No horizontal estreito cabe só o número; no vertical a descrição fica.