Componentes
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.
Exemplos#
Nenhuma cobrança com esses filtros
Ajuste ou limpe os filtros.
A coruja vigia · com próximo passo
Nada por aqui ainda.
Novas decisões aparecem aqui.
Compacto com ícone
Importar#
import { EmptyState } from "@hiboupay/react";
import type { EmptyStateProps } from "@hiboupay/react";Quando usar#
Use quando
- Lista ou área sem dados.
- Resultado de filtro vazio.
- Primeiro uso.
Não use quando
- Erro recuperável numa área: ErrorBanner.
- Esperando, aprovado ou recusado: StatusView com o tom certo.
Variantes#
padrão
Área principal.
compact
Dentro de tabela ou cartão.
Anatomia#
- 01Halo azul radial
- 02Tile de papel com a coruja (ou ícone)
- 03Título Sora 15
- 04Descrição
- 05Ação
Estados#
API#
Props documentadas no registro. * indica obrigatória.
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| title* | string | O que está vazio. | |
| description | string | Por quê, ou o que fazer. | |
| action | ReactNode | Próximo passo. | |
| icon | ReactNode | Troca a coruja por um ícone. | |
| compact | boolean | false | Menos respiro. |
Acessibilidade#
Teclado
Leitor de tela
- —role=status: anunciado quando aparece.
Boas práticas#
Faça
- Diga o próximo passo.
Evite
- "Nenhum registro encontrado." sem saída.
Conteúdo#
- —Título: "Nada por aqui ainda." Descrição: o que traz dado para cá.
Tokens#
Os tokens que desenham este componente. Clique para ver valor, variável e classe.
Relacionados#
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.
Estado
ErrorBanner
Erro recuperável com a saída já montada: causa em linguagem humana e "Tentar de novo". É o Notice de perigo com o botão pronto.
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.
Entrada
FileUpload
Zona rebaixada, anel tracejado, coruja vigiando. No arraste ela trabalha. Arquivo vira linha de papel com tamanho mono e X. Sem nuvem genérica.