Dialog

Janela sobreposta à janela principal ou a outro dialog, que deixa o conteúdo de baixo inerte.

Em telas com menos de 600px de largura, o Dialog abre como bottom sheet: preso na base da tela, com a largura toda, até 85% da altura da tela, cantos arredondados só em cima e uma alça no topo, entrando e saindo por baixo. Dá para fechar arrastando para baixo pelos 40px do topo ou pelo DialogHeader: fecha ao soltar depois de passar de 25% da altura ou num gesto rápido; senão, volta para o lugar. O arraste não começa em botões, links e campos, nem no DialogContent, que continua rolando normalmente. A alça fica por cima de qualquer conteúdo do container e não captura cliques. A partir de 600px, fica centralizado, com largura máxima de 568px e sem arraste.

Exemplos

Padrão

Com conteúdo posicionado e fundo próprio

No celular, a alça continua visível sobre uma capa posicionada com absolute, e o arraste também começa por cima dela.

API

Dialog

Propriedade	Tipo	Valores possíveis	Padrão	Descrição
open	boolean	true, false	-	Controla o estado aberto (controlado).
onOpenChange	(open: boolean) => void	-	-	Função chamada quando o estado aberto muda.
defaultOpen	boolean	true, false	false	Estado aberto do dialog na primeira renderização. Use quando não precisar controlar o estado aberto.
modal	boolean	true, false	true	Quando true, impede a interação com os elementos atrás do dialog.
...props	Todas as props de Radix Dialog.Root	-	-	Todas as propriedades nativas do componente Dialog Root do Radix UI.

DialogTrigger

Propriedade	Tipo	Valores possíveis	Padrão	Descrição
asChild	boolean	true, false	false	Quando true, usa o elemento filho como trigger.
...props	Todas as props de Radix Dialog.Trigger	-	-	Todas as propriedades nativas do componente Dialog Trigger do Radix UI.

DialogContainer

Propriedade	Tipo	Valores possíveis	Padrão	Descrição
className	string	-	-	Classes CSS adicionais aplicadas ao container do dialog.
overlayClassName	string	-	-	Classes CSS adicionais aplicadas ao overlay (fundo) do dialog.
showCloseButton	boolean	true, false	true	Quando true, mostra o Dismiss no canto superior direito e o DialogHeader reserva 56px à direita para o título não passar por baixo dele.
closeLabel	string	-	"Fechar"	Label acessível do botão de fechar.
...props	Todas as props de Radix Dialog.Content	-	-	Todas as propriedades nativas do componente Dialog Content do Radix UI.

DialogContent

Área principal de conteúdo do dialog, com rolagem. Renderiza um wrapper rolável com uma div interna com padding. Além das props abaixo, aceita as props de div (como id, aria-* e data-*), repassadas para essa div interna.

Propriedade	Tipo	Valores possíveis	Padrão	Descrição
children	React.ReactNode	-	-	Obrigatório. Corpo do dialog.
className	string	-	-	Classes CSS adicionais para o elemento interno de conteúdo, com padding.
containerClassName	string	-	-	Classes CSS adicionais para o wrapper externo rolável.

DialogHeader

Propriedade	Tipo	Valores possíveis	Padrão	Descrição
className	string	-	-	Classes CSS adicionais para personalizar o estilo.
separator	boolean	true, false	false	Quando true, mostra uma linha separadora abaixo do header, ocupando toda a largura do dialog.
...props	Todas as props nativas de div	-	-	Todas as propriedades nativas de um elemento div.

DialogFooter

Propriedade	Tipo	Valores possíveis	Padrão	Descrição
className	string	-	-	Classes CSS adicionais para personalizar o estilo.
separator	boolean	true, false	false	Quando true, mostra uma linha separadora acima do footer, ocupando toda a largura do dialog.
...props	Todas as props nativas de div	-	-	Todas as propriedades nativas de um elemento div.

DialogTitle

Propriedade	Tipo	Valores possíveis	Padrão	Descrição
className	string	-	-	Classes CSS adicionais para personalizar o estilo.
iconLeft	React.ReactNode	-	-	Ícone renderizado antes do texto do título. Os elementos de ícone são clonados com size={32} e strokeWidth={2.2}.
iconRight	React.ReactNode	-	-	Ícone renderizado depois do texto do título, com o mesmo tamanho do iconLeft.
...props	Todas as props de Radix Dialog.Title	-	-	Todas as propriedades nativas do componente Dialog Title do Radix UI.

DialogDescription

Propriedade	Tipo	Valores possíveis	Padrão	Descrição
className	string	-	-	Classes CSS adicionais para personalizar o estilo.
...props	Todas as props de Radix Dialog.Description	-	-	Todas as propriedades nativas do componente Dialog Description do Radix UI.

DialogClose

Propriedade	Tipo	Valores possíveis	Padrão	Descrição
asChild	boolean	true, false	false	Quando true, usa o elemento filho como trigger de fechamento.
...props	Todas as props de Radix Dialog.Close	-	-	Todas as propriedades nativas do componente Dialog Close do Radix UI.