Message

Componente estável e recomendada para novos projetos.

Anatomia, uso, comportamento visual e recomendações conceituais são mantidos pelo Padrão Digital de Governo. Esta página documenta a implementação Web Components e sua API executável.

Visão Geral

O componente br-message é a superfície de feedback contextual e notificação em linha do GovBR-DS, utilizada para comunicar mensagens de sucesso, informação, alerta ou erro diretamente associadas à tela ou a um formulário.

Para que serve

• Comunicação de estados do sistema: Exibe mensagens com cores, ícones e semânticas padronizadas: success (sucesso), info (informação), warning (aviso) e danger (erro).
• Validação de formulários: Atua como o contêiner oficial de mensagem de erro e orientação nos slots feedback de componentes de formulário (como br-input, br-select e br-checkbox).
• Opção de fechamento: Suporta botão de dispensa (closable), permitindo que a pessoa usuária feche a notificação após a leitura.

Quando utilizar

• Utilize quando:
  • For necessário dar feedback sobre uma ação recém-executada (ex.: "Dados salvos com sucesso").
  • Houver orientações contextuais ou erros de validação em campos de formulário.
• Evite e prefira outro componente quando:
  • A mensagem for crítica e exigir confirmação bloqueadora antes de continuar (prefira br-modal).
  • As notificações forem assíncronas do sistema e acumuladas em uma central de mensagens (prefira br-notification).

Estrutura e Slots

O br-message oferece personalização modular:

• message-title: Slot para título de destaque da mensagem.
• message-body: Slot para o corpo detalhado do texto.
• icon: Slot para substituição do ícone contextual padrão.
• close-button: Slot para botão de fechar customizado.
• default: Slot livre para renderização direta do conteúdo.

Para a documentação completa de design, incluindo diretrizes de acessibilidade e especificações visuais, consulte o Design System do GovBR.

Exemplo(s)

Desktop (100%)

Tablet - 768px

iPhone (iOS) - 390x844

Android - 360x800

Padrão

Compartilhar URL

Ativar movimento reduzido

Mudar fundo

Abrir no StackBlitz

Mais opções

Tela cheia

Carregando preview…

HTML

Controles do componente

Console: logs, eventos e erros

Angular (Somente leitura)

React (Somente leitura)

Vue (Somente leitura)

Acessibilidade

Recolher controles e código

Desfazer alteração

Refazer alteração

Comparar alterações

Formatar código

Resetar código para o estado inicial

Escolher formato para copiar

Propriedades

ariaLabel

Atributo	aria-label
Descrição	Define o rótulo acessível usado por tecnologias assistivas.
Tipo	string
Valor padrão	---

autoRemove

Atributo	auto-remove
Descrição	Controla o comportamento do fechamento do componente quando isClosable é verdadeiro. - Se definido como true, o componente será automaticamente removido do DOM ao clicar no botão de fechar. - Se definido como false, o componente permanecerá no DOM e apenas emitirá o evento brDidClose. Esta propriedade não tem efeito se isClosable for false. O valor padrão é false.
Tipo	boolean
Valor padrão	false

closable

Atributo	closable
Descrição	Exibe ação de fechar. Quando informada, tem precedência sobre isClosable.
Tipo	boolean
Valor padrão	---

customId

Atributo	custom-id
Descrição	Identificador único do componente. Quando omitido, um valor é gerado automaticamente. > Padrão: valor único gerado por generateUniqueId().
Tipo	string
Valor padrão	generateUniqueId()

feedback

Atributo	feedback
Descrição	Usa apresentação de feedback. Quando informada, tem precedência sobre isFeedback.
Tipo	boolean
Valor padrão	---

feedbackState

Atributo	feedback-state
Descrição	Estado de feedback canônico. Quando informado, tem precedência sobre state.
Tipo	"danger" | "info" | "success" | "warning"
Valor padrão	---

inline

Atributo	inline
Descrição	Exibe o conteúdo em linha. Quando informada, tem precedência sobre isInline.
Tipo	boolean
Valor padrão	---

isClosable Componente mantido por compatibilidade; prefira a alternativa indicada na documentação.

Atributo	is-closable
Depreciação	Use closable.
Descrição	Se definido como verdadeiro, um botão de fechar será exibido para permitir que o usuário feche a mensagem. O fechamento emitirá o evento brDidClose, mas não removerá automaticamente o componente do DOM, a menos que a propriedade autoRemove também esteja definida como true. Este recurso não está disponível para mensagens do tipo feedback.
Tipo	boolean
Valor padrão	false

isFeedback Componente mantido por compatibilidade; prefira a alternativa indicada na documentação.

Atributo	is-feedback
Depreciação	Use feedback.
Descrição	Define se a mensagem é do tipo feedback, geralmente usada para fornecer contexto adicional sobre ações do usuário. Exemplos incluem mensagens de validação em campos de formulário. Não disponível para mensagens que não sejam de feedback.
Tipo	boolean
Valor padrão	false

isInline Componente mantido por compatibilidade; prefira a alternativa indicada na documentação.

Atributo	is-inline
Depreciação	Use inline.
Descrição	Exibe o rótulo e o controle na mesma linha.
Tipo	boolean
Valor padrão	false

message

Atributo	message
Descrição	Define o texto da mensagem que será exibido. Este é o conteúdo principal da mensagem. A propriedade message é obrigatória e deve ser fornecida para que a mensagem apareça. (obrigatório)
Tipo	string
Valor padrão	---

messageTitle

Atributo	message-title
Descrição	Define o título da mensagem, que é exibido no início, acima da mensagem principal. Este título serve para destacar a mensagem textual. Não é aplicável para mensagens do tipo feedback.
Tipo	string
Valor padrão	---

showIcon

Atributo	show-icon
Descrição	Se definido como verdadeiro, um ícone associado à mensagem será exibido. Use esta propriedade para mostrar ou ocultar o ícone da mensagem conforme necessário.
Tipo	boolean
Valor padrão	false

state

Atributo	state
Descrição	Define o estado do message. Valores inválidos usam info. Os possíveis valores são: - 'info': Mensagem informativa. - 'warning': Mensagem de aviso. - 'danger': Mensagem de erro ou alerta. - 'success': Mensagem de sucesso. O valor padrão é 'info'.
Tipo	"danger" | "info" | "success" | "warning"
Valor padrão	'info'

Slots

Nome	Descrição
"close-button"	Botão de fechar customizado. Quando utilizado, o botão padrão é substituído.
"default"	Conteúdo principal da mensagem. Quando utilizado, a prop message é ignorada.
"icon"	Ícone customizado da mensagem. Quando utilizado, o ícone padrão gerado pela prop state é ignorado.
"message-body"	Corpo customizado da mensagem. Quando utilizado, a prop message é ignorada.
"message-title"	Título customizado da mensagem. Quando utilizado, a prop messageTitle é ignorada.

Eventos

Evento	Descrição	Depreciação	Propagação
brDidClose Componente mantido por compatibilidade; prefira a alternativa indicada na documentação.		Use brMessageClose.	true
brMessageClose	Evento canônico emitido quando a mensagem é fechada.	---	true

CSS Shadow Parts

Nome	Descrição
"close"	Área do botão de fechar.
"container"	Wrapper principal da mensagem.
"content"	Área de conteúdo da mensagem.
"icon"	Área do ícone da mensagem.

Dependências

Usado por

• br-checkbox
• br-cookiebar
• br-cookiebar-cookie
• br-cookiebar-group
• br-datetime-picker
• br-input
• br-radio
• br-radio-group
• br-slider
• br-switch
• br-tag
• br-textarea
• br-upload

Depende de

• br-icon
• br-button

Gráfico

Migração de <br-message> (1.x → 2.x)

O message mantém o mesmo elemento, mas text e type foram alinhados à nomenclatura semântica atual.

Propriedades

API 1.x	API 2.x	Ação na migração
—	feedbackState, autoRemove	Use para validação e remoção automática.
feedback, inline, closable, showIcon	mesmos nomes	Mantenha e revise os aliases legados.
text	message	Renomeie a propriedade.
title	messageTitle	Renomeie a propriedade.
type	state	Converta para o estado semântico.

O conteúdo também pode ser fornecido por slots. Para mensagens complexas, prefira conteúdo explícito em vez de serializar um objeto.

Exemplo

1.x:

<br-message title="Atenção" text="Revise os dados" type="warning" closable></br-message>

2.x:

<br-message message-title="Atenção" message="Revise os dados" state="warning" closable></br-message>