Como ele é
No canto da tela, as notificações chegam como cartões brancos empilhados em profundidade: o mais novo fica na frente e os anteriores aparecem atrás, um pouco menores, mostrando só a borda, como cartas de baralho. Passe o mouse ou chegue pelo teclado e a pilha se abre em lista. Cada aviso tem ícone colorido por tipo, título, descrição, botão de fechar e uma linha fina que encolhe com o tempo restante. Um aviso de carregamento mostra um ícone girando até a tarefa terminar e então vira sucesso ou erro no mesmo lugar. Para dispensar, basta arrastar para o lado.
Você pode estar procurando isto se pediu algo assim
- notificação que aparece no canto e some sozinha
- aviso de salvo com sucesso com opção de desfazer
- mostrar carregando e depois concluído na mesma mensagem
- mensagens empilhadas no canto da tela, uma atrás da outra
- alerta de erro que dá para arrastar para o lado para fechar
- aquelas notificações bonitas no canto da tela de apps modernos
- retorno rápido depois que o cliente clica em salvar no painel
Também chamado de
- toast
- notificações toast
- toast notification
- snackbar
- alerta flutuante
- notificação empilhada
- aviso de sistema
Quando usar
- Confirmações de salvar, enviar ou pagar em painéis e SaaS
- Processos em segundo plano, como gerar relatório ou sincronizar dados
- Ações que podem ser desfeitas, como arquivar ou excluir um item
- Erros de formulário ou de conexão que não podem passar despercebidos
Quando evitar
- Mensagens que exigem decisão, que pedem um diálogo e não um aviso que some
- Informações longas ou críticas que a pessoa precisa ler com calma
Como pedir para a sua IA
Crie um sistema de notificações toast empilhadas no canto da tela, com tipos de sucesso, erro, aviso, info e carregando, promessa que troca o mesmo aviso, botão Desfazer, arraste para o lado para dispensar, tempo pausado no hover e no foco, aria-live e atalho Alt+T para focar pelo teclado.
Com o THM Componentes, você cola o prompt completo do catálogo, que já traz o código-fonte deste componente, e a IA reproduz este efeito exato em vez de improvisar.
Perguntas sobre Toast Stack
O Toast Stack é acessível para teclado e leitor de tela?
Sim. O Toast Stack anuncia cada aviso em regiões aria-live, polite para os comuns e assertive para erros, com o tipo antes do texto. Alt+T leva o foco à pilha, as setas navegam entre os avisos e Esc ou Delete dispensam. O tempo pausa enquanto o foco ou o mouse estão sobre a pilha.
Como mostrar o andamento de uma tarefa com o Toast Stack?
Use a função promise. O Toast Stack mostra um aviso de carregamento, que não expira, e troca esse mesmo aviso para sucesso ou erro quando a tarefa termina, sem empilhar mensagens repetidas. A mensagem de sucesso pode usar o resultado da tarefa, e update altera qualquer aviso já exibido.
O tempo dos avisos do Toast Stack para quando a pessoa sai da aba?
Sim. O relógio de cada aviso do Toast Stack pausa no hover, no foco por teclado, durante o arraste e com a aba oculta, e retoma de onde parou. Avisos além do limite visível, três por padrão, esperam escondidos com o tempo parado. Erros duram uma vez e meia o padrão de 4 segundos.
