Componentes
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.
Exemplos#
Vidro no canto · tom é um ponto
Mesa
Celular · 390
No celular o aviso nasce no topo
Importar#
import { ToastProvider, useToast } from "@hiboupay/react";
import type { ToastTone, ToastInput, ToastPosition } from "@hiboupay/react";Quando usar#
Use quando
- Confirmar que algo já aconteceu: "Planilha importada".
- Oferecer um desfazer leve (action).
Não use quando
- Erro que bloqueia a tarefa: ErrorBanner no lugar.
- Ação irreversível: ConfirmGate antes, não toast depois como se fosse pergunta.
- Validação de campo: Input error.
Variantes#
mesa (canto inferior direito)
Entra pela direita. Não cobre o dock porque o dock é do celular.
celular (topo, sob a barra)
Entra de cima, com safe-area. O polegar continua livre embaixo.
default
Ponto Vivid Blue. Aviso neutro.
success
Ponto verde. Concluído.
warning
Ponto âmbar. Delta ruim, a tela segue.
danger
Ponto rosa. Falhou, mas a tela segue.
Anatomia#
- 01Viewport no canto ou no topo
- 02Cartão hb-glass + hb-lens
- 03Ponto de tom
- 04Título Sora
- 05Descrição
- 06Ação opcional
- 07Fechar
Estados#
API#
Props documentadas no registro. * indica obrigatória.
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| ToastProvider.position | "bottom-right" | "top" | Força o lugar. Sem isto, o celular usa o topo. | |
| useToast().push | (t: ToastInput) => id | Empilha. Máximo 3. Some em 5s se duration omitido. | |
| ToastInput.title* | string | O que aconteceu. | |
| ToastInput.description | string | Apoio curto. | |
| ToastInput.tone | "default" | "success" | "warning" | "danger" | "default" | Cor do ponto. warning é aviso; danger é falha. |
| ToastInput.action | { label, onClick } | Desfazer ou abrir. Pausa o timer enquanto o foco está no cartão. | |
| ToastInput.duration | number | 5000 | ms. 0 = não some sozinho. Hover e foco pausam a contagem. |
Acessibilidade#
Teclado
Leitor de tela
- —role=status. Não use alert — toast não interrompe.
Boas práticas#
Faça
- Frase no passado: "Cobrança atribuída".
- Uma ação no máximo.
Evite
- Toast de erro no lugar de ErrorBanner.
- Empilhar 8 toasts.
- Faixa colorida no topo do cartão.
Conteúdo#
- —Título sem ponto. Descrição só se o título não baste.
Tokens#
Os tokens que desenham este componente. Clique para ver valor, variável e classe.