Alert

---

---

📘 Modo de Uso

O Alert fornece feedback visual imediato sobre o estado de uma ação, evento ou processo.
É especialmente útil para transmitir informações importantes que exigem atenção do usuário.

---

🧩 Anatomia

---

📋 Propriedades

---

⌨️ Código

opl.feedback.component.alert

---

🎨 Variantes

Tamanhos

Semântica

---

🛡️ Boas Práticas e Acessibilidade

• Clareza: a mensagem deve ser direta e fácil de entender. Evite jargões ou excesso de texto.
• Cores padrão: siga convenções visuais para melhor acessibilidade cognitiva:
  • 🔴 Vermelho → Erro/Crítico
  • 🟡 Amarelo ou 🟠 Laranja → Aviso
  • 🟢 Verde → Sucesso
  • 🔵 Azul → Informação
• Posicionamento: exiba alertas em áreas de destaque, geralmente no topo da página ou próximos ao conteúdo relacionado.
• Quantidade: evite múltiplos alertas simultâneos para não sobrecarregar a interface.
• Acessibilidade:
  • Utilize roles adequados (alert, status, alertdialog) para leitura por leitores de tela.
  • Garanta contraste suficiente entre texto e fundo.
  • Para alertas críticos, considere dar foco automático ou anunciar via aria-live (assertive ou polite dependendo do caso).