Inline Message

Alerta contextual inline para feedback em secoes e formularios. Mais sutil que o Alert (full-width), o Inline Message coexiste com outros elementos dentro de um fluxo de conteudo. Dark mode automatico via variaveis semanticas.

components/inline-message.cssAbrir no Figma

Uso

Quando e como utilizar cada variante da mensagem inline de acordo com o contexto.

• Info — Dica ou informacao complementar sobre um campo ou secao.
• Warning — Aviso pontual sem bloquear o fluxo do usuario.
• Error — Erro de validacao associado a um campo especifico.
• Success — Confirmacao imediata apos uma acao concluida.
• Block — Quando o feedback precisa de destaque visual dentro de um container (ex: dentro de um card ou painel lateral).

Use o Inline Message para feedback contextual dentro de secoes. Para mensagens de sistema globais, use o Alert. Para notificacoes transitorias, use o Toast.

Exemplos

Veja abaixo os exemplos interativos das variantes do Inline Message, com todos os seus estados.

Carregando exemplo...

Anatomia

Estrutura interna do componente e seus elementos.

Parte	Elemento	Descricao
Container	.inline-message	Wrapper inline-flex com gap 6px e align-items center
Icone	.inline-message__icon	Elemento 16x16 com icone SVG via mask, cor automatica por variante
Titulo	.inline-message__title	Texto em negrito opcional antes da mensagem
Texto	.inline-message__text	Mensagem principal, Inter 13px w400
Link	.inline-message__link	Acao contextual inline com cor da variante

Propriedades

Classes e modificadores disponiveis para configurar o Inline Message.

Propriedade	Tipo	Default	Descrição
.inline-message	classe	—	Container principal da mensagem inline (display inline-flex, gap 6px, align-items center).
.inline-message__icon	classe	—	Icone SVG 16x16 com mask automatico por variante.
.inline-message__text	classe	—	Texto da mensagem, Inter 13px w400.
.inline-message__title	classe	—	Titulo opcional em negrito antes do texto, Inter 13px w600.
.inline-message__link	classe	—	Link de acao inline, cor da variante com underline ao hover.
.inline-message--info	classe	—	Variante informativa (azul, padrao quando nenhum modificador e aplicado).
.inline-message--warning	classe	—	Variante de aviso (amarelo).
.inline-message--error	classe	—	Variante de erro (vermelho).
.inline-message--success	classe	—	Variante de sucesso (verde).
.inline-message--block	classe	—	Modo bloco: display block, padding 10px 12px, border-radius 6px, fundo colorido.

Codigo

Snippets prontos para copiar e usar no seu projeto.

Uso inline simples

<span class="inline-message inline-message--info">
  <span class="inline-message__icon"></span>
  <span class="inline-message__text">Este campo e obrigatorio para prosseguir.</span>
</span>

Com titulo

<span class="inline-message inline-message--warning">
  <span class="inline-message__icon"></span>
  <span class="inline-message__text">
    <span class="inline-message__title">Atencao:</span>
    Esta configuracao afeta todos os registros do periodo selecionado.
  </span>
</span>

Com link de acao

<span class="inline-message inline-message--error">
  <span class="inline-message__icon"></span>
  <span class="inline-message__text">
    CPF invalido.
    <a href="#" class="inline-message__link">Corrigir agora</a>
  </span>
</span>

Modo bloco (dentro de card)

<div class="inline-message inline-message--success inline-message--block">
  <span class="inline-message__icon"></span>
  <span class="inline-message__text">Configuracoes salvas com sucesso.</span>
</div>

Variantes disponiveis

<span class="inline-message inline-message--info">
  <span class="inline-message__icon"></span>
  <span class="inline-message__text">Informacao contextual.</span>
</span>

<span class="inline-message inline-message--warning">
  <span class="inline-message__icon"></span>
  <span class="inline-message__text">Aviso sobre o campo.</span>
</span>

<span class="inline-message inline-message--error">
  <span class="inline-message__icon"></span>
  <span class="inline-message__text">Valor invalido.</span>
</span>

<span class="inline-message inline-message--success">
  <span class="inline-message__icon"></span>
  <span class="inline-message__text">Campo validado.</span>
</span>

Design

Especificacoes visuais e tokens utilizados no componente.

Especificacoes

Propriedade	Inline	Block
Display	inline-flex	block
Padding	0	10px 12px
Border-radius	—	6px
Gap	6px	—
Fonte	Inter 13px w400	Inter 13px w400
Fonte titulo	Inter 13px w600	Inter 13px w600
Icone	16x16 mask SVG	16x16 mask SVG
Fundo (block)	—	colorido com opacidade

Tokens utilizados

Variante	Texto	Icone	Fundo (block)
Info	--text-base-brand-default	--icon-base-brand-default	--surface-base-alert-container-info
Warning	--text-base-warning-default	--icon-base-warning-default	--surface-base-alert-container-warning
Error	--text-base-error-default	--icon-base-error-default	--surface-base-alert-container-error
Success	--text-base-success-default	--icon-base-success-default	--surface-base-alert-container-success

Versão0.2.0

Última atualização15 mar 2026

Caminhosrc/components/inline-message.css