Copiar página como Markdown para IA
Notification
Visão Geral
O br-notification organiza a central de mensagens, comunicados e avisos do usuário em um painel retrátil.
Use os métodos open(), close() ou a propriedade isOpen para controlar o painel. Estruture o conteúdo com br-notification-header, br-notification-body e br-notification-item.
<br-notification>
<div slot="header">
<br-notification-header title-text="Notificações"></br-notification-header>
</div>
<br-notification-body>
<br-notification-item title-text="Seu processo foi atualizado" date="10/10/2026"></br-notification-item>
</br-notification-body>
</br-notification>
Quando usar
- Central de avisos acumulados da aplicação, normalmente acionada por um botão no cabeçalho.
Quando evitar
- Mensagens em linha como resposta direta a uma ação na tela: use
br-message. - Confirmação de ação crítica: use
br-modal.
Consulte as diretrizes de design do GovBR.
Exemplo(s)
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
Propriedades
closeOnOutsideClick
| Atributo | close-on-outside-click |
|---|---|
| Descrição | Fecha o painel ao clicar fora da superfície. |
| Tipo | boolean |
| Valor padrão | true |
closeOnTriggerClick
| Atributo | close-on-trigger-click |
|---|---|
| Descrição | Fecha o painel ao clicar novamente no acionador. |
| Tipo | boolean |
| Valor padrão | true |
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() |
internalScroll
| Atributo | internal-scroll |
|---|---|
| Descrição | Habilita rolagem apenas na região de itens, preservando cabeçalho e abas fixos. |
| Tipo | boolean |
| Valor padrão | true |
isStatic
| Atributo | is-static |
|---|---|
| Descrição | Define se o painel de notificações deve ser renderizado de forma estática (inline). Quando verdadeiro, o posicionamento absoluto é desativado. Ideal para centrais de notificações fixas ou documentação. |
| Tipo | boolean |
| Valor padrão | false |
label
| Atributo | label |
|---|---|
| Descrição | Nome acessível do painel de notificações. Exposto via aria-label. (obrigatório) |
| Tipo | string |
| Valor padrão | --- |
maxHeight
| Atributo | max-height |
|---|---|
| Descrição | Sobrescreve a altura máxima do painel. Por padrão, o CSS aplica calc(100vh - 86px) via token --notification-height. |
| Tipo | string |
| Valor padrão | --- |
maxWidth
| Atributo | max-width |
|---|---|
| Descrição | Sobrescreve o max-width do painel. Por padrão, o CSS aplica max-width: 50vw em viewports ≥576pxconforme a especificação do Design System. |
| Tipo | string |
| Valor padrão | --- |
mobileFullscreen
| Atributo | mobile-fullscreen |
|---|---|
| Descrição | Faz o painel ocupar toda a largura disponível em viewports pequenas. |
| Tipo | boolean |
| Valor padrão | true |
open
| Atributo | open |
|---|---|
| Descrição | Controla se o painel de notificações está aberto. |
| Tipo | boolean |
| Valor padrão | false |
placement
| Atributo | placement |
|---|---|
| Descrição | Define o posicionamento do painel em relação ao acionador. Valores inválidos usam bottom-end. |
| Tipo | "bottom-end" | "bottom-start" | "top-end" | "top-start" |
| Valor padrão | 'bottom-end' |
width
| Atributo | width |
|---|---|
| Descrição | Largura explícita do painel. Quando não definida, o painel dimensiona conforme o conteúdo, respeitando o max-width definido por spec ou pelo prop maxWidth. |
| Tipo | string |
| Valor padrão | --- |
Slots
| Nome | Descrição |
|---|---|
"default" | Região principal da lista de notificações. |
"footer" | Região opcional para ações complementares, como "ver todas". |
"header" | Região superior do componente, para uso com subcomponentes de cabeçalho ou conteúdo customizado. |
"tabs" | Região opcional para navegação por abas. |
"trigger" | Elemento acionador externo responsável por abrir e fechar o painel. |
Eventos
| Evento | Descrição | Depreciação | Propagação |
|---|---|---|---|
brNotificationClose | Informa que o painel foi fechado. | --- | true |
brNotificationItemClick | Expõe a interação com um item da lista. | --- | true |
brNotificationOpen | Informa que o painel foi aberto. | --- | true |
brNotificationTabChange | Informa troca de aba quando o componente possuir navegação por tabs. | --- | true |
brOpenChange | Informa a mudança de estado aberto/fechado do painel. | --- | true |
Métodos
focusFirstItem
| Descrição | Move o foco para o primeiro item interativo da lista. |
|---|---|
| Assinatura | focusFirstItem() => Promise<void> |
| Parâmetros | --- |
focusTrigger
| Descrição | Move o foco de volta para o acionador. |
|---|---|
| Assinatura | focusTrigger() => Promise<void> |
| Parâmetros | --- |
hide
| Descrição | Fecha o painel de notificações. |
|---|---|
| Assinatura | hide(reason?: NotificationCloseReason) => Promise<void> |
| Parâmetros | reason: |
show
| Descrição | Abre o painel de notificações. |
|---|---|
| Assinatura | show() => Promise<void> |
| Parâmetros | --- |
toggle
| Descrição | Alterna o estado aberto/fechado. |
|---|---|
| Assinatura | toggle() => Promise<void> |
| Parâmetros | --- |
CSS Shadow Parts
| Nome | Descrição |
|---|---|
"base" | Superfície principal do painel. |
"body" | Região principal do componente. |
"close-button" | Botão de fechar do painel. |
"divider" | Divisor entre itens da lista. |
"footer" | |
"header" | Região superior do componente. |
"list" | Região com rolagem onde os itens são exibidos. |
"tabs" | Região de abas, quando existir. |
Acessibilidade
O painel é uma superfície ancorada a um acionador. O label (obrigatório) vira
o aria-label do painel, dando a ele um nome acessível. O estado open é
refletido e o acionador recebe aria-expanded sincronizado.
Foco
- Ao abrir, o foco vai para o primeiro elemento focável do painel.
Tab/Shift+Tabcirculam entre os focáveis do painel enquanto ele está aberto.- Ao fechar, o foco volta para o elemento que estava focado antes da abertura.
Teclado e fechamento
Escapefecha o painel.close-on-outside-click(padrão) fecha ao clicar fora;close-on-trigger-click(padrão) permite alternar pelo próprio acionador.
Conteúdo
- Use os subcomponentes de cabeçalho, abas e itens para estrutura semântica.
- Abas emitem
brNotificationTabChange; itens emitembrNotificationItemClick— reflita a mudança de contexto para tecnologias assistivas quando a navegação alterar o conteúdo visível.
Movimento
Entrada e saída do painel respeitam prefers-reduced-motion: reduce.
Dependências
Subcomponentes
Migração de <br-notification> (1.x → 2.x)
Na 1.x, a notificação recebia uma coleção de objetos em notifications. Na 2.x, o componente representa a superfície de notificação; o conteúdo deve ser composto por slots e subcomponentes.
Propriedades e composição
| API 1.x | API 2.x | Ação na migração |
|---|---|---|
disableCloseButton | — | Remova; use a composição de fechamento disponível. |
notifications | — | Remova o objeto de dados e renderize os itens no conteúdo atual. |
showNotification | open | Controle a abertura com a propriedade atual. |
subtitle | conteúdo do slot | Mova o texto para a composição interna. |
title | label ou slot | Use label para o gatilho/superfície e slot para conteúdo rico. |
evento close | métodos/eventos de fechamento atuais | Atualize o listener conforme o fluxo da aplicação. |
Exemplo
1.x:
<br-notification :notifications="notifications" show-notification></br-notification>
2.x:
<br-notification label="Notificações" open>
<div slot="content">Itens da notificação</div>
</br-notification>
