Componentes — 07

Alert

Feedback contextual inline. Cinco variantes mapeadas ao sistema de estados e urgência — de informação neutra a prazo crítico.

07.1

Variantes

Hierarquia de atenção: Default para informações neutras, Success/Error para feedback de ação, Warning para prazo próximo, Urgent para escassez real.

Default — informação neutra
<Alert variant="default" title="Informação">
  As inscrições para o próximo ciclo abrem em 15 dias.
</Alert>
Success — confirmação de ação
<Alert variant="success" title="Inscrição confirmada">
  Seu cadastro foi registrado. Você receberá um e-mail de confirmação.
</Alert>
Error — falha ou bloqueio
<Alert variant="error" title="Erro no pagamento">
  Não foi possível processar o pagamento. Verifique os dados do cartão.
</Alert>
Warning — prazo ou atenção
<Alert variant="warning" title="Prazo se encerrando">
  Faltam 3 dias para o encerramento das inscrições.
</Alert>
Urgent — escassez crítica, vaga única
<Alert variant="urgent" title="Última vaga disponível">
  Restam apenas 1 vaga na turma de Sargento do Exército.
</Alert>
07.2

Apenas corpo — sem título

Para mensagens curtas que dispensam hierarquia interna.

Sem título
07.3

Dispensável — com botão de fechar

Passe dismissible para exibir o botão X. O estado interno é gerenciado pelo próprio componente.

Clique no X para dispensar cada alerta
<Alert variant="urgent" title="Última vaga" dismissible>
  Restam apenas 1 vaga.
</Alert>
07.4

Ícone customizado

Sobrescreva o ícone padrão via prop icon.

Ícone customizado
<Alert variant="warning" icon={<MeuIcone />} title="Atenção">...</Alert>
07.5

Banner — largura total

Alert sem container fixo ocupa 100% da largura do pai. Ideal para avisos no topo de páginas ou seções.

Conteúdo da página abaixo do banner...

07.6

Regra de uso — Urgência

A hierarquia de urgência deve ser respeitada para preservar a atenção do usuário.

defaultInformações gerais, datas futuras, anúncios neutros
successConfirmação de ação concluída pelo usuário
errorFalha, bloqueio ou dado inválido
warningPrazo próximo (dias), atenção necessária
urgentEscassez real de vagas ou prazo em horas — use com parcimônia
07.7

Tokens Usados

border (success)--state-successvar(--b-700) #1f4d2a
bg (success)--state-success-palevar(--b-50)
border (error)--state-error#922020
bg (error)--state-error-pale#f7eaea
border (warning)--fire#C4521A
bg (warning)--fire-pale#F7E8DC
bg (urgent)--fire#C4521A (fundo sólido)
title font--font-mono12px 700 uppercase
body font--font-body14px Barlow