Componentes
Mensagem
Forma própria: canto quase reto, barra de 4 px à esquerda, fundo tingido, sem contorno. Cinco tipos. Não se fecha.
Quando usar
- resultado de uma ação, na própria tela
- aviso permanente enquanto valer
Quando não usar
- toast
- botão de fechar
- erro de um campo (vai abaixo do campo)
- mais de duas empilhadas
Cinco tipos
claro
escuro
<div class="hx-form hx-form-wide">
<div class="hx-message hx-message-danger" role="alert"><svg class="hx-icon" aria-hidden="true"><use href="hibex/icons/sprite.svg#icon-octagon-alert"></use></svg><div class="hx-message-body"><p class="hx-message-title"><span class="hx-visually-hidden">Erro:</span>Esta versão mudou enquanto você editava</p><p>Outra pessoa publicou a versão 4. <a href="#">Ver o que mudou</a></p></div></div>
<div class="hx-message hx-message-warning"><svg class="hx-icon" aria-hidden="true"><use href="hibex/icons/sprite.svg#icon-triangle-alert"></use></svg><div class="hx-message-body"><p class="hx-message-title"><span class="hx-visually-hidden">Atenção:</span>Encerramento bloqueado</p><p>Há uma etapa em execução.</p></div></div>
<div class="hx-message hx-message-success hx-message-compact" role="status"><svg class="hx-icon" aria-hidden="true"><use href="hibex/icons/sprite.svg#icon-circle-check"></use></svg><p><span class="hx-visually-hidden">Sucesso:</span>Nota de acompanhamento anexada.</p></div>
<div class="hx-message hx-message-compact"><p><span class="hx-visually-hidden">Informação:</span>Os horários estão no seu fuso.</p></div>
<div class="hx-message hx-message-neutral hx-message-compact"><p><span class="hx-visually-hidden">Observação:</span>Projeto encerrado em 03/11/2026.</p></div>
</div>Acessibilidade
- o tipo vai em texto escondido ("Erro:", "Atenção:"…); o ícone é
aria-hidden; role="alert"só no resumo de erros e em falha de uma ação;role="status"no sucesso; nenhumrolenas permanentes.
Referência
| Classe ou atributo | Para quê |
|---|---|
.hx-message | informação (padrão) |
.hx-message-success / -warning / -danger / -neutral | tipo |
.hx-message-compact | uma linha, 14 px |
.hx-message-body, .hx-message-title | corpo e título (Plex Serif 600) |
Origem: cap. 04 §3.4 · ADR-0011 · desde a versão 0.1.0