Alert
- Angular:
mds-alert - CSS/HTML (mds-styles): disponível
- Figma: ✅ — abrir Design System 2.0 ↗
- Tipo: Core
Definição funcional
Seção intitulada “Definição funcional”O Alert* *destaca informações essenciais ou mudanças de estado no sistema. É utilizado para atrair a atenção para eventos que impactam o fluxo de trabalho, garantindo que mensagens críticas não passem despercebidas.
Diretrizes de Comportamento
Seção intitulada “Diretrizes de Comportamento”- Clareza e Brevidade: O texto deve ser curto. Se a mensagem for de erro, descreva o problema e, se possível, a solução.
- Exemplo: Endereço não encontrado. Verifique o CEP.
- Tom de Voz: Mantenha a neutralidade. Evite “Você” ou “Eu”.
- Ruim: Você não selecionou uma transportadora.
- Melhor: Selecione uma transportadora para prosseguir.
- Uso de Reticências: Se o alerta levar o usuário a uma nova tela de configuração para resolver o problema, o botão de ação deve usar reticências.
- Exemplo: Configurar Impressora…
- Hierarquia Visual: Use títulos em negrito dentro do alerta para destacar o tipo de mensagem (Erro, Aviso ou Sucesso) quando houver um texto descritivo longo abaixo.
Definição semântica
Seção intitulada “Definição semântica”- Vermelho (Erro): Bloqueia a operação (ex: Falha na emissão de nota).
- Amarelo (Aviso): Requer cautela (ex: Veículo com manutenção atrasada).
- Verde (Sucesso): Confirma conclusão (ex: Rota otimizada).