Componentes
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.
Exemplos#
Com e sem ação
Importar#
import { ErrorBanner } from "@hiboupay/react";
import type { ErrorBannerProps } from "@hiboupay/react";Quando usar#
Use quando
- Falha ao carregar ou salvar uma área.
Não use quando
- Erro de campo: use error no Input.
- Página inteira quebrada: StatusView danger.
- Aviso que não é falha: Notice.
Anatomia#
- 01Ícone de alerta em tile danger
- 02Mensagem
- 03Tentar de novo (opcional)
Estados#
API#
Props documentadas no registro. * indica obrigatória.
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| message* | string | Causa, na língua da pessoa. | |
| onRetry | () => void | Mostra o botão de tentar de novo. | |
| retryLabel | string | "Tentar de novo" | Rótulo do botão. |
Acessibilidade#
Teclado
Leitor de tela
- —role=alert: anunciado na hora.
Boas práticas#
Faça
- Diga a causa.
Evite
- Código técnico sem tradução.
Conteúdo#
- —"A chave foi recusada pelo provedor."
Tokens#
Os tokens que desenham este componente. Clique para ver valor, variável e classe.
Relacionados#
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
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
Toast
Aviso de vidro. Na mesa, canto inferior direito. No celular, topo, sob a barra. Tom é um ponto de luz, não uma faixa. Some sozinho. Não decide por ninguém.