Notificação Toast HTML

Notificações toast: feedback efêmero bem feito

Um toast é uma mensagem pequena e temporária que aparece numa borda da tela, comunica o resultado de uma ação e some sozinha após alguns segundos. A metáfora — uma fatia de pão pulando da torradeira — foi popularizada pelas balloon notifications do Windows XP, mas o formato moderno veio do Android: Toast.makeText() estreou no Android 1.0 (2008) e rapidamente migrou para a web via Twitter Bootstrap, Materialize e Material UI Snackbar.

A propriedade definidora é ser não bloqueante: diferente de alert() ou de uma janela modal, o toast nunca rouba o foco nem interrompe o fluxo do usuário. Isso o torna ideal para confirmações ("Salvo", "Copiado", "E-mail enviado") e para erros transitórios que o usuário pode ignorar ("Conexão perdida, tentando de novo"), mas péssimo para decisões críticas que exigem ação.

Variantes comuns

• success — verde; confirmação positiva, 3 segundos.
• error — vermelho; falha que o usuário deve notar mas que não o trava.
• info — azul; atualização de estado neutra.
• warning — amarelo/âmbar; situações que podem exigir atenção em breve.

Posição e tempo

A maior parte dos design systems usa top-right no desktop e bottom-center no mobile para evitar colisão com o polegar. O tempo de auto-dismiss é normalmente de 3 segundos para mensagens curtas e 5–7 segundos para mais longas; toasts persistentes (sem auto-dismiss) devem ficar para erros críticos e sempre incluir botão explícito de fechar. Quando vários toasts disparam ao mesmo tempo, empilhe-os com um leve slide-in e limite a taxa para não inundar a tela.

Bibliotecas

Em React, as opções dominantes são react-hot-toast (Tim Neutkens, ~10 kB), sonner (Emil Kowalski, usado pela Vercel e pelo shadcn/ui), react-toastify (madura, feature-heavy) e o primitivo @radix-ui/react-toast que sustenta o shadcn/ui Toast. Vue tem vue-toastification ou vue-sonner; Angular usa ngx-toastr; alternativas agnósticas incluem Notiflix e o Snackbar do MUI.

Acessibilidade

Toasts precisam ser expostos a tecnologia assistiva por uma live region ARIA. Use role="status" com aria-live="polite" em confirmações de rotina e role="alert" com aria-live="assertive" em erros. Nunca prenda o foco dentro do toast; se ele carregar uma ação ("Desfazer"), dê alcance por teclado com tabindex="0" e respeite prefers-reduced-motion na animação de entrada.

Perguntas frequentes

Toast pode ter botão de ação tipo "Desfazer"? Pode — o padrão foi popularizado pelo Gmail. Mantenha uma única ação curta; se precisar de mais, suba para um modal.

Devo substituir o alert() nativo por toasts? Em geral sim. alert() é síncrono e bloqueia; toasts se integram bem a fluxos assíncronos e não travam o event loop.

Qual a diferença para a Notification API? A API Notification do browser exibe notificações de SO fora da página (requer permissão do usuário). Toasts vivem dentro da página e não precisam de permissão.

Quando evitar toasts? Em confirmações destrutivas ("Excluir conta?"), formulários longos ou qualquer fluxo em que perder a mensagem tenha consequência real. Use modal nesses casos.