Message
Visão Geral
Design System
Para a documentação completa de design, incluindo diretrizes de uso, acessibilidade e exemplos visuais, consulte o Design System do GovBR.
Exemplos
Básico
Copiar código
Resetar exemplo
Abrir no StackBlitz
Alternar fundo do preview
Feedback
Copiar código
Resetar exemplo
Abrir no StackBlitz
Alternar fundo do preview
Propriedades
ariaLabel
| Atributo | aria-label |
| Descrição | Define um rótulo customizado para leitores de tela. Se não fornecido, será gerado automaticamente baseado no estado da mensagem. Exemplo: "Mensagem de sucesso", "Mensagem de erro", etc. |
| 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 |
customId
| Atributo | custom-id |
| Descrição | Identificador único. Caso não seja fornecido, um ID gerado automaticamente será usado. |
| Tipo | string |
| Valor padrão | br-message-${messageId++} |
isClosable
| Atributo | is-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
| Atributo | is-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
| Atributo | is-inline |
| Descrição | Se definido como verdadeiro, o título da mensagem será exibido na mesma linha que a mensagem principal. Isso pode ser útil para criar um layout onde o título e a mensagem estão alinhados horizontalmente. |
| 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 |
|---|---|
"default" | Utilizado para inserir qualquer conteúdo que será exibido no corpo da mensagem. |
"icon" | Slot para ícone customizado. Se usado, certifique-se de adicionar aria-label apropriado ou aria-hidden="true" se for decorativo. |
Eventos
| Evento | Descrição | Propagação |
|---|---|---|
brDidClose | Evento emitido quando o usuário fecha a mensagem, se closable for true. | true |