AppModal

Organismos

Diálogo modal (Radix Dialog) renderizado em portal sobre um overlay.

Prende o foco dentro do diálogo (focus trap), bloqueia a rolagem da página enquanto aberto, fecha com Escape e devolve o foco ao elemento que o abriu.

O portal fica no fim do <body>, fora da seção que abriu o modal; por isso o modal copia o data-brand e o data-theme do escopo do elemento focado ao abrir (o gatilho). Aberto sem gatilho (ex.: ao carregar a página), segue a marca e o modo do <html>.

Quando usar: confirmações, formulários curtos e avisos que exigem decisão antes de continuar.

Quando não usar: feedback passageiro (use AppToast) ou conteúdo que deve ficar na página.

Importar

import { AppModal } from '@handsondigital/idplugger-ui'

CSS

Para carregar só o CSS deste componente (além do tokens.css), importe o arquivo dele; as dependências vêm por @import:

@import '@handsondigital/idplugger-ui/css/AppModal.css';

Com Tailwind 4 e camadas, use a variante em @layer idplugger-ui:

@import '@handsondigital/idplugger-ui/css/layer/AppModal.css';

Exemplos

Default

const Default = () => <ModalWithTrigger />;

Props

Prop	Tipo	Padrão	Descrição
`children`*	`ReactNode`	`—`	Conteúdo do corpo do modal.
`isOpen`*	`boolean`	`—`	Controla a visibilidade. Componente controlado: o pai decide quando abrir e fechar.
`onClose`*	`() => void`	`—`	Chamado ao pedir o fechamento (botão "Fechar modal" ou Escape). Atualize `isOpen` para `false` aqui. O clique fora não fecha.
`title`*	`string`	`—`	Título do diálogo; vira o nome acessível (`aria-labelledby`). Obrigatório.
`className`	`string`	`—`	Classe CSS extra aplicada ao diálogo.
`footer`	`ReactNode`	`—`	Rodapé opcional, normalmente com os botões de ação. Omitido quando não informado.