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

Para a documentação completa, incluindo diretrizes de uso, acessibilidade e exemplos visuais, consulte o Design System do GovBR.

Exemplo(s)

Desktop (100%)

Tablet - 768px

iPhone (iOS) - 390x844

Android - 360x800

Compartilhar URL

Mudar fundo

Abrir no StackBlitz

Tela cheia

HTML

Controles

JS

CSS

Console

Angular (Somente leitura)

React (Somente leitura)

Vue (Somente leitura)

Acessibilidade

Recolher controles e código

Formatar código

Resetar código para o estado inicial

Copiar para a área de transferência

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