# Toast Stack Avisos que surgem no canto da tela, empilhados como cartas, e somem sozinhos ou com um arraste para o lado. > O Toast Stack é um componente exclusivo do THM Componentes para notificações que aparecem no canto da tela, empilhadas em profundidade. Tem tipos de sucesso, erro, aviso, informação e carregando, troca o mesmo aviso quando uma tarefa termina, aceita botão Desfazer, dispensa com arraste para o lado e pausa o tempo no hover e no foco. - Categoria: Cartões e superfícies - Origem: Exclusivo THM, criado pela THM Tecnologia Inteligente; o prompt traz o código-fonte completo - Peso no carregamento: Leve: CSS ou JavaScript leve, sem custo perceptível - Tecnologia: Vue 3, TypeScript - Interação: Mouse, Toque, Teclado - URL: https://vibecode.thmtecnologia.com/componentes/toast-stack/ ## 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 ```text 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. ## Componentes relacionados - [Dynamic Island](https://vibecode.thmtecnologia.com/componentes/dynamic-island/): Uma pílula preta no topo da tela que cresce e muda de formato para mostrar música, chamada, aviso ou cronômetro. - [Animated List](https://vibecode.thmtecnologia.com/componentes/animated-list/): Avisos que surgem um de cada vez no topo da lista e empurram os anteriores para baixo, como um feed ao vivo. - [Bottom Sheet](https://vibecode.thmtecnologia.com/componentes/bottom-sheet/): Um painel que sobe da parte de baixo da tela, para em três alturas e pode ser puxado com o dedo. - [Context Menu](https://vibecode.thmtecnologia.com/componentes/context-menu/): O menu que aparece no clique com o botão direito, com submenus, atalhos e opções marcáveis, no visual do seu app. - [Confetti](https://vibecode.thmtecnologia.com/componentes/confetti/): Uma explosão de papeizinhos coloridos sobe e cai na tela quando a pessoa conclui uma compra, um cadastro ou uma meta. --- THM Componentes: O THM Componentes é um catálogo de 268 componentes de interface para Vue 3 e Nuxt, 115 deles exclusivos, com demonstração ao vivo e um prompt pronto para Claude Code, Cursor e outros assistentes. Você escolhe o efeito, copia o prompt e a sua IA aplica no projeto. Acesso vitalício por R$ 497.