Toasts/Alertas
Os Toasts, Alertas ou Avisos são usados para comunicar informações de forma breve e contextual ao usuário. Eles aparecem em camadas (overlays) na interface, de maneira não intrusiva, para exibir mensagens críticas ou informativas.
Variações de Estados
O componente de Toasts no Acronos Design System suporta diferentes tipos de mensagens, cada uma com uma cor e ícone específicos para facilitar o entendimento visual:
Mensagem Neutra
Uso: Mensagens informativas que não exigem ação imediata.
Cor: Cinza.
Ícone: ℹ️.
Mensagem de Sucesso
Uso: Confirmar que uma ação foi concluída com sucesso.
Cor: Verde.
Ícone: ✔️.
Mensagem de Alerta
Uso: Informar situações que requerem atenção do usuário, mas que não são críticas.
Cor: Amarelo ou laranja.
Ícone: ⚠️.
Mensagem de Erro
Uso: Alertar sobre erros que precisam ser corrigidos ou problemas críticos.
Cor: Vermelho.
Ícone: ℹ️.
Configurações e Tamanhos
Tamanho Médio (padrão)
Usado em telas desktop e mobile.
Largura: até 300px.
Altura: Adaptável ao conteúdo.
Tamanho Pequeno (opcional)
Indicado para interfaces compactas ou notificações simples.
Largura: até 200px.
Altura: Adaptável ao conteúdo.
Animações e Comportamentos
Entrada/Saída
Os Toasts deslizam da lateral ou de baixo para cima, dependendo do contexto.
Transição padrão: 0.3s.
Temporizador
Toasts são exibidos por padrão por 5 segundos antes de desaparecer.
O tempo pode ser ajustado dependendo da criticidade da mensagem.
Ações do Usuário
Toasts incluem botões de ação (opcional) e um ícone de fechar para remoção manual.
Toasts de erro permanecem até que o usuário os descarte.
Boas Práticas
Não use Toasts para informações que exijam uma explicação longa.
Mantenha as mensagens curtas, objetivas e fáceis de entender.
Evite exibir múltiplos Toasts simultaneamente; empilhe no máximo três para evitar sobrecarregar o usuário.
Sempre use ícones para reforçar o tipo de mensagem.