Toast/Notification
- CSS/HTML (mds-styles): Notification
- Figma: ✅ — abrir Design System 2.0 ↗ (busque pelo frame “Toast” dentro do arquivo)
- Tipo: Core
Definição Funcional
Seção intitulada “Definição Funcional”O Toast fornece feedback breve sobre uma operação do sistema em uma pequena janela sobreposta. Ele aparece de forma temporária e desaparece automaticamente, informando o sucesso ou erro de uma ação sem interromper o fluxo do usuário.
Diretrizes de Comportamento
Seção intitulada “Diretrizes de Comportamento”- Brevidade Máxima: O usuário tem poucos segundos para ler. Use no máximo uma frase curta.
- Tom de Voz: Neutro e focado no objeto da ação. Use Caixa de Sentença.
- Sem Interação Obrigatória: Não coloque ações críticas dentro de um Toast (como “Excluir”). Para isso, use o componente Alert.
- Vá Direto ao Ponto: Remova artigos e pronomes.
- Ruim: Sua carga foi despachada com sucesso agora.
- Melhor: Carga despachada.
- Ícones de Apoio: Utilize ícones universais (check para sucesso, “x” para erro) para acelerar a compreensão visual.
Exemplos de Escrita (Dos & Don’ts)
Seção intitulada “Exemplos de Escrita (Dos & Don’ts)”| Tipo | Estilo Incorreto (Prolixo) | Estilo UX (Conciso/Direto) |
|---|---|---|
| Sucesso | O sistema salvou as alterações da rota. | Alterações salvas. |
| Erro | Não foi possível conectar ao servidor de rastreio. | Falha na conexão. |
| Alerta | Lembre-se que o caminhão precisa de revisão. | Revisão necessária. |
Sugestão de padronização
Seção intitulada “Sugestão de padronização”- Notification costuma se referir ao sistema de notificações do SO ou a uma central de mensagens persistente (o “sininho”). Toast descreve especificamente esse componente de interface que “salta” da base ou do topo da tela e desaparece sozinho.
- Ação: Renomear no Angular para Toast. Isso evita confusão com as notificações de push ou alertas de sistema que exigem interação.