Componentes
Notice
Aviso preso ao conteúdo, nos quatro tons. Tom aparece como preenchimento e tinta — nunca como faixa colorida no topo do cartão.
Exemplos#
Consentimento · Checkbox dentro do aviso, nunca pré-marcado
Consulta de margem
Usamos o eSocial só para calcular quanto você pode parcelar.Seus dados estão protegidos
A assinatura é processada com criptografia ponta-a-ponta, em ambiente regulado.Não feche esta janela
Estamos aguardando o retorno do banco para liberar o pedido.Os quatro tons
Importar#
import { Notice } from "@hiboupay/react";
import type { NoticeProps, NoticeTone } from "@hiboupay/react";Quando usar#
Use quando
- Consentimento e termo legal antes de uma ação.
- Garantia ao lado de dado sensível: "seus dados estão protegidos".
- Alerta que precisa ficar na tela enquanto durar a condição.
Não use quando
- Confirmação efêmera de algo que deu certo: Toast.
- Falha com "tentar de novo": ErrorBanner.
- Bloquear uma ação com dinheiro: ConfirmGate.
Variantes#
info
Contexto, consentimento, regra. Azul.
success
Garantia e proteção. Verde.
warning
Condição que exige atenção agora. Âmbar.
danger
Risco ou perda. Rosa. Vira role=alert.
Anatomia#
- 01Superfície tingida com anel fino
- 02Ícone do tom em tile
- 03Título opcional
- 04Corpo
- 05Ação opcional à direita
Estados#
API#
Props documentadas no registro. * indica obrigatória.
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| tone | "info" | "success" | "warning" | "danger" | "info" | danger é anunciado como alert. |
| title | ReactNode | Uma linha em Sora. | |
| icon | ReactNode | Troca o ícone do tom. null remove. | |
| action | ReactNode | Um botão ou link à direita. |
Acessibilidade#
Teclado
Leitor de tela
- —danger é role=alert. Os outros tons não interrompem a leitura.
Boas práticas#
Faça
- Diga a condição e o que fazer com ela.
- Consentimento com Checkbox dentro do Notice info.
Evite
- Três Notice empilhados na mesma tela.
- Notice para elogiar o produto.
Conteúdo#
- —"Autorizo a consulta da minha margem consignável no eSocial." Cite a norma, não o processo interno.
Tokens#
Os tokens que desenham este componente. Clique para ver valor, variável e classe.
Relacionados#
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
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.
Diálogo
ConfirmGate
Gate para ações irreversíveis: dinheiro, permissão, exclusão, execução de agente. Pode exigir motivo e palavra digitada.
Entrada
Checkbox
A mesma marca do FilterChip: papel com anel fino, azul preenchido com check branco. Independente ou em lote. Traço quando só alguns filhos estão marcados.