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 br-message apresenta um aviso contextual ou feedback em linha sobre uma operação ou estado do sistema.

Defina o tipo de mensagem em state (success, danger, warning ou info). Opcionalmente, adicione um botão para fechar com closable.

<br-message state="success" message-title="Sucesso">
  Operação realizada com sucesso.
</br-message>
<br-message state="danger" closable>
  Não foi possível salvar os dados. Tente novamente.
</br-message>

Quando usar

• Feedback sobre uma ação recém-executada na página (salvar, excluir, atualizar).
• Mensagens de erro ou orientação em formulários (no slot feedback de inputs).

Quando evitar

• Avisos críticos que exigem decisão antes de prosseguir: use br-modal.
• Notificações acumuladas em uma central: use br-notification.

Consulte as diretrizes de design do GovBR.

Exemplo(s)

Exemplos

Desktop (100%)

Tablet - 768px

iPhone (iOS) - 390x844

Android - 360x800

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. 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 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-select
• 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>