Modal

Visão Geral

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

Exemplos

Básico

Carregando exemplo

Código fonte editável

Formatar código

Copiar código

Resetar exemplo

Abrir no StackBlitz

Alternar fundo do preview

Propriedades

alignFooter

Atributo	align-footer
Descrição	Define o alinhamento do conteúdo do rodapé (slot="footer").
Tipo	"center" | "end" | "start"
Valor padrão	'center'

autoClose

Atributo	auto-close
Descrição	Define o comportamento de fechamento do modal. - true: O modal fecha automaticamente ao clicar no botão fechar. - false: O modal emite brModalBeforeClose mas não fecha, permitindo a implementação de lógica customizada (validação, confirmação, etc.) antes do fechamento. O desenvolvedor deve controlar manualmente o fechamento.
Tipo	boolean
Valor padrão	false

customId

Atributo	custom-id
Descrição	Identificador único do componente. Quando omitido, um valor é gerado automaticamente. > Padrão: valor único gerado por Helpers.generateUniqueId(). > Uso compartilhado: mantenha esta descrição idêntica em todos os componentes que usam customId.
Tipo	string
Valor padrão	Helpers.generateUniqueId()

initialFocusSelector

Atributo	initial-focus-selector
Descrição	Seletor CSS do elemento que deve receber foco quando o modal é aberto (ex: "#meu-elemento").
Tipo	string
Valor padrão	---

scrollable

Atributo	scrollable
Descrição	Se true, habilita a rolagem interna do conteúdo do modal.
Tipo	boolean
Valor padrão	false

show

Atributo	show
Descrição	Controla a visibilidade do modal.
Tipo	boolean
Valor padrão	false

size

Atributo	size
Descrição	Define o tamanho (largura) do modal.
Tipo	"auto" | "large" | "medium" | "small" | "xsmall"
Valor padrão	'medium'

titleText

Atributo	title-text
Descrição	O texto do título a ser exibido no cabeçalho do modal. Usado quando o slot header não é fornecido.
Tipo	string
Valor padrão	---

Slots

Nome	Descrição
"close-button"	Botão de fechar customizado. Se não for usado, o botão padrão será exibido.
"default"	Corpo do modal.
"footer"	Rodapé do modal.
"header"	Cabeçalho do modal. Se não for usado, o title-text será exibido.

Eventos

Evento	Descrição	Propagação
brModalBeforeClose	Evento emitido antes do fechamento do modal (quando o botão X é clicado). Se autoClose está desativado, o desenvolvedor deve fechar manualmente o modal após este evento. Se autoClose está ativado, o modal fecha automaticamente após este evento.	true
brModalClose	Evento emitido após o modal ser fechado (quando show muda de true para false).	true
brModalOpen	Evento emitido quando o modal é aberto (quando show muda de false para true).	true
brModalOpened	Evento emitido após o modal estar completamente aberto e com o foco estabilizado dentro dele. Complementa brModalOpen (que dispara imediatamente ao abrir): use brModalOpened quando precisar interagir com o modal já pronto.	true

Métodos

close

Assinatura	close() => Promise<void>
Descrição	Método público para fechar o modal
Parâmetros	---

open

Assinatura	open() => Promise<void>
Descrição	Método público para abrir o modal
Parâmetros	---

toggle

Assinatura	toggle() => Promise<void>
Descrição	Método público para alternar a visibilidade do modal
Parâmetros	---

CSS Shadow Parts

Nome	Descrição
"body"	Corpo do modal.
"close-button"	Botão de fechar do modal.
"container"	Wrapper principal do modal.
"footer"	Rodapé do modal.
"header"	Cabeçalho do modal.
"title"	Título do modal.

Dependências

Depende de

• br-button
• br-icon

Gráfico

Migração: Vue 1.x → Stencil 2.x

Propriedades

🟦 Propriedades renomeadas

Propriedade Vue	Propriedade Stencil	Descrição
center-buttons	align-footer	Alinhamento do rodapé. Use center, start ou end
title	title-text	Título do modal exibido no cabeçalho
width	size	Define o tamanho do modal (valores: xsmall, small, medium, large, auto)

🟥 Propriedades removidas

Propriedade Vue	Observação
closable	O botão de fechar agora é sempre exibido. Use CSS para ocultar se necessário
max-height	Removido. Use a propriedade scrollable para habilitar rolagem interna

Eventos

🟦 Eventos renomeados

Evento Vue	Evento Stencil	Descrição
close-modal	close	Emitido ao acionar o botão de fechar, tecla ESC ou clicar no scrim (se ativo)

🟥 Eventos removidos

Evento Vue	Observação
update:show	Removido. Use o evento close e controle o estado show manualmente via JavaScript

Slots

🟦 Slots renomeados

Slot Vue	Slot Stencil	Descrição
buttons	footer	Área do rodapé do modal, geralmente usada para botões