C4 · Componentes

Alert

Mensagens contextuais que requerem atenção sem interromper o fluxo. Quatro variantes semânticas. Borda esquerda colorida + ícone + texto — cor sozinha nunca comunica.

Variantes

Variante	Cor	Uso
Info	`--sem-info`	Manutenção agendada, novidade.
Success	`--sem-success`	Confirmação, ação concluída.
Warning	`--sem-warning`	Cota próxima, atenção necessária.
Danger	`--sem-danger`	Erro, incidente crítico.

Estrutura

<div role="alert" class="alert alert-warning">
  <svg aria-hidden="true" ... />
  <div>
    <p class="alert-title">Manutenção em 30min</p>
    <p class="alert-desc">Streams temporariamente pausados às 22h.</p>
  </div>
</div>

Faça e não faça

Faça

Use role='alert' em danger (interrompe leitor de tela).
Use role='status' nas demais (anúncio polido).
Mantenha uma ação por alerta — botão ou link, nunca ambos.

Não faça

Não use Alert como banner permanente — use P1 Sticky Banner.
Não esconda Alert atrás de hover ou clique para expandir.
Não combine duas variantes (warning + danger) — escolha a mais grave.

Acessibilidade

Severidade comunicada pela cor da borda e pelo role ARIA.
Ícone decorativo recebe aria-hidden='true'.
Botão de fechar tem aria-label='Fechar alerta'.
Foco automático em alertas críticos para garantir leitura.