Dialog

Q: Qual a diferença entre um Dialog não controlado e um controlado?

Não controlado: use apenas DialogTrigger; o Dialog gerencia seu próprio estado aberto/fechado Controlado: passe as props open e onOpenChange para Dialog para controle total do estado Use o modo controlado quando precisar fechar programaticamente (por exemplo, após a submissão de um formulário)

Q: Como fechar um Dialog após uma submissão de formulário bem-sucedida?

Use estado controlado (open/onOpenChange) para que você decida quando fechar.

Q: Qual biblioteca Radix alimenta o Dialog do shadcn?

@radix-ui/react-dialog Ela fornece trap de foco, fechamento com tecla ESC, fechamento ao clicar no fundo e renderização em portal

Q: Como lidar com overflow em dispositivos móveis em um Dialog com conteúdo longo?

Adicione max-h-[85vh] overflow-y-auto ao DialogContent Isso impede que o diálogo exceda a altura da viewport em telas pequenas

Q: O que é DialogClose e quando usá-lo?

DialogClose renderiza um botão que fecha automaticamente o diálogo ao clicar Use-o para botões de cancelar em diálogos não controlados Em diálogos controlados, você pode usar um Button regular com onClick={() => setOpen(false)} em vez disso

Q: Qual tipo TypeScript você deve usar para as props do componente Dialog?

Importe DialogProps de @radix-ui/react-dialog para as props do componente raiz DialogContent estende DialogContentProps do Radix e aceita todos os atributos válidos de div HTML

shadcn Dialog (modal) - trigger, estado controlado, formulários dentro de diálogos e acessibilidade.

Receita

Cartão de receita de referência rápida - pronto para copiar e colar.

npx shadcn@latest add dialog button input label

import {
  Dialog, DialogContent, DialogDescription, DialogFooter,
  DialogHeader, DialogTitle, DialogTrigger, DialogClose,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
 
// Diálogo básico
<Dialog>
  <DialogTrigger asChild>
    <Button>Abrir Diálogo</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Tem certeza?</DialogTitle>
      <DialogDescription>Esta ação não pode ser desfeita.</DialogDescription>
    </DialogHeader>
    <DialogFooter>
      <DialogClose asChild>
        <Button variant="outline">Cancelar</Button>
      </DialogClose>
      <Button>Confirmar</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

Quando usar isso: Quando você precisar de uma sobreposição modal para confirmações, formulários, visualizações de detalhes ou qualquer conteúdo que exija a atenção focada do usuário.

Exemplo de Trabalho

"use client";
 
import { useState } from "react";
import {
  Dialog, DialogContent, DialogDescription, DialogFooter,
  DialogHeader, DialogTitle, DialogTrigger,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
 
const EditProfileSchema = z.object({
  name: z.string().min(1, "O nome é obrigatório"),
  email: z.string().email("Email inválido"),
  bio: z.string().max(200, "A bio deve ter no máximo 200 caracteres").optional(),
});
 
type EditProfileData = z.infer<typeof EditProfileSchema>;
 
export function EditProfileDialog({
  profile,
  onSave,
}: {
  profile: EditProfileData;
  onSave: (data: EditProfileData) => Promise<void>;
}) {
  const [open, setOpen] = useState(false);
  const {
    register,
    handleSubmit,
    formState: { errors, isSubmitting },
    reset,
  } = useForm<EditProfileData>({
    resolver: zodResolver(EditProfileSchema),
    defaultValues: profile,
  });
 
  async function onSubmit(data: EditProfileData) {
    await onSave(data);
    setOpen(false);
  }
 
  function handleOpenChange(nextOpen: boolean) {
    setOpen(nextOpen);
    if (nextOpen) {
      reset(profile); // reseta o formulário ao abrir
    }
  }
 
  return (
    <Dialog open={open} onOpenChange={handleOpenChange}>
      <DialogTrigger asChild>
        <Button variant="outline">Editar Perfil</Button>
      </DialogTrigger>
      <DialogContent className="sm:max-w-md">
        <form onSubmit={handleSubmit(onSubmit)}>
          <DialogHeader>
            <DialogTitle>Editar Perfil</DialogTitle>
            <DialogDescription>
              Atualize as informações do seu perfil. Clique em salvar quando terminar.
            </DialogDescription>
          </DialogHeader>
 
          <div className="space-y-4 py-4">
            <div className="space-y-2">
              <Label htmlFor="name">Nome</Label>
              <Input id="name" {...register("name")} />
              {errors.name && (
                <p className="text-sm text-red-600">{errors.name.message}</p>
              )}
            </div>
 
            <div className="space-y-2">
              <Label htmlFor="email">Email</Label>
              <Input id="email" type="email" {...register("email")} />
              {errors.email && (
                <p className="text-sm text-red-600">{errors.email.message}</p>
              )}
            </div>
 
            <div className="space-y-2">
              <Label htmlFor="bio">Bio</Label>
              <Input id="bio" {...register("bio")} placeholder="Conte-nos sobre você" />
              {errors.bio && (
                <p className="text-sm text-red-600">{errors.bio.message}</p>
              )}
            </div>
          </div>
 
          <DialogFooter>
            <Button type="button" variant="outline" onClick={() => setOpen(false)}>
              Cancelar
            </Button>
            <Button type="submit" disabled={isSubmitting}>
              {isSubmitting ? "Salvando..." : "Salvar"}
            </Button>
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog>
  );
}

O que isso demonstra:

Diálogo controlado com open e onOpenChange
Formulário dentro do diálogo com validação Zod
Reset do formulário ao abrir o diálogo
Fechar o diálogo após submissão bem-sucedida
Rótulos e mensagens de erro acessíveis

Mergulho Profundo

Como Funciona

O Dialog é construído sobre @radix-ui/react-dialog - totalmente acessível com trap de foco e fechamento com ESC
DialogTrigger abre o diálogo quando clicado
DialogContent renderiza em um portal, sobrepondo a página com um fundo
O foco é mantido dentro do diálogo enquanto aberto - Tab alterna entre os elementos focáveis
A tecla ESC e o clique no fundo fecham o diálogo (configurável)
DialogClose renderiza um botão que fecha o diálogo quando clicado
asChild mescla as props do componente em seu único elemento filho

Variações

Diálogo de confirmação com ação assíncrona:

function DeleteConfirmDialog({
  onConfirm,
  itemName,
}: {
  onConfirm: () => Promise<void>;
  itemName: string;
}) {
  const [open, setOpen] = useState(false);
  const [deleting, setDeleting] = useState(false);
 
  async function handleDelete() {
    setDeleting(true);
    await onConfirm();
    setDeleting(false);
    setOpen(false);
  }
 
  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>
        <Button variant="destructive" size="sm">Excluir</Button>
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Excluir {itemName}?</DialogTitle>
          <DialogDescription>
            Esta ação não pode ser desfeita. Isso excluirá permanentemente o item.
          </DialogDescription>
        </DialogHeader>
        <DialogFooter>
          <Button variant="outline" onClick={() => setOpen(false)} disabled={deleting}>
            Cancelar
          </Button>
          <Button variant="destructive" onClick={handleDelete} disabled={deleting}>
            {deleting ? "Excluindo..." : "Excluir"}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

Diálogo com conteúdo rolável:

<DialogContent className="max-h-[85vh] overflow-y-auto">
  <DialogHeader>
    <DialogTitle>Termos de Serviço</DialogTitle>
  </DialogHeader>
  <div className="prose max-w-none text-sm">
    {/* Conteúdo longo */}
  </div>
</DialogContent>

Impedir fechamento ao clicar no fundo:

<DialogContent
  onInteractOutside={(e) => e.preventDefault()}
  onEscapeKeyDown={(e) => e.preventDefault()}
>
  {/* O usuário deve fechar explicitamente */}
</DialogContent>

Notas TypeScript

// Props do componente Dialog
import type { DialogProps } from "@radix-ui/react-dialog";
 
// Wrapper de diálogo controlado
interface ConfirmDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  onConfirm: () => void;
  title: string;
  description: string;
}
 
// DialogContent estende Radix DialogContentProps
// Você pode passar quaisquer atributos válidos de div HTML

Armadilhas

Submissão de formulário fecha o diálogo - Se a ação do formulário navegar ou o estado mudar, o diálogo pode fechar inesperadamente. Correção: Use estado controlado e feche apenas após a conclusão da ação.
Trap de foco com portais - Se você renderizar um dropdown ou popover dentro de um diálogo, certifique-se de que ele também seja renderizado em portal corretamente. Os componentes shadcn lidam com isso automaticamente.
Rolagem em dispositivos móveis - O conteúdo do diálogo pode transbordar em telas pequenas. Correção: Adicione max-h-[85vh] overflow-y-auto ao DialogContent.
Múltiplos diálogos empilhados - Abrir um diálogo de dentro de outro funciona, mas pode confundir os usuários. Correção: Use um único diálogo com conteúdo dinâmico, ou garanta o empilhamento correto de z-index.
Reset do formulário ao fechar - O conteúdo do diálogo permanece montado entre as aberturas por padrão. Correção: Resete o estado do formulário no onOpenChange quando o diálogo abrir.

Alternativas

Alternativa	Usar Quando	Não Usar Quando
Sheet (painel lateral)	Você quer um painel deslizante em vez de um modal centralizado	Um diálogo centralizado é mais apropriado
Alert Dialog	A ação é destrutiva e não deve ser acidentalmente descartada	O diálogo pode ser fechado clicando fora
Popover	Você precisa de uma sobreposição pequena e não bloqueante perto de um trigger	Você precisa de um lock de foco em página inteira
Drawer	Você quer um bottom sheet amigável para dispositivos móveis	Experiência primariamente para desktop

FAQs

Qual a diferença entre um Dialog não controlado e um controlado?

Não controlado: use apenas DialogTrigger; o Dialog gerencia seu próprio estado aberto/fechado
Controlado: passe as props open e onOpenChange para Dialog para controle total do estado
Use o modo controlado quando precisar fechar programaticamente (por exemplo, após a submissão de um formulário)

Como fechar um Dialog após uma submissão de formulário bem-sucedida?

async function onSubmit(data: FormData) {
  await saveData(data);
  setOpen(false); // fecha apenas após o sucesso
}

Use estado controlado (open/onOpenChange) para que você decida quando fechar.

Qual biblioteca Radix alimenta o Dialog do shadcn?

@radix-ui/react-dialog
Ela fornece trap de foco, fechamento com tecla ESC, fechamento ao clicar no fundo e renderização em portal

Como impedir que o Dialog feche quando o usuário clica fora?

<DialogContent
  onInteractOutside={(e) => e.preventDefault()}
  onEscapeKeyDown={(e) => e.preventDefault()}
>
  {/* O usuário deve clicar explicitamente em um botão de fechar */}
</DialogContent>

Armadilha: Por que o estado do formulário persiste entre as aberturas do Dialog?

O conteúdo do diálogo permanece montado entre as aberturas por padrão
Valores antigos do formulário permanecem a menos que você os resete explicitamente
Correção: resete o estado do formulário no callback onOpenChange quando o diálogo abrir

Como lidar com overflow em dispositivos móveis em um Dialog com conteúdo longo?

Adicione max-h-[85vh] overflow-y-auto ao DialogContent
Isso impede que o diálogo exceda a altura da viewport em telas pequenas

O que `asChild` faz no DialogTrigger?

Ele mescla o manipulador de clique e as props de acessibilidade do DialogTrigger em seu único filho
O elemento trigger (por exemplo, <Button>) substitui o elemento renderizado padrão
Sem asChild, DialogTrigger renderiza seu próprio botão envolvendo seu filho

Como tipar um componente de diálogo de confirmação reutilizável?

interface ConfirmDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  onConfirm: () => void;
  title: string;
  description: string;
}

O que é `DialogClose` e quando usá-lo?

DialogClose renderiza um botão que fecha automaticamente o diálogo ao clicar
Use-o para botões de cancelar em diálogos não controlados
Em diálogos controlados, você pode usar um Button regular com onClick={() => setOpen(false)} em vez disso

Armadilha: O que acontece quando você abre um dropdown ou popover dentro de um Dialog?

O trap de foco pode conflitar com sobreposições em portal renderizadas fora do diálogo
Os componentes shadcn lidam com isso automaticamente, pois também usam portais
Sobreposições personalizadas não em portal podem ficar presas ou ocultas atrás do diálogo

Como implementar um diálogo de confirmação de exclusão com estado de carregamento assíncrono?

const [deleting, setDeleting] = useState(false);
async function handleDelete() {
  setDeleting(true);
  await onConfirm();
  setDeleting(false);
  setOpen(false);
}
// Desabilita os botões Cancelar e Excluir enquanto exclui

Qual tipo TypeScript você deve usar para as props do componente Dialog?

Importe DialogProps de @radix-ui/react-dialog para as props do componente raiz
DialogContent estende DialogContentProps do Radix e aceita todos os atributos válidos de div HTML

Relacionado

Button - botões de trigger para o diálogo
Form - formulários dentro de diálogos
Toast - feedback após ações do diálogo
Command - paleta de comandos como um diálogo

Receita

Cartão de receita de referência rápida - pronto para copiar e colar.

npx shadcn@latest add dialog button input label

import {
  Dialog, DialogContent, DialogDescription, DialogFooter,
  DialogHeader, DialogTitle, DialogTrigger, DialogClose,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
 
// Diálogo básico
<Dialog>
  <DialogTrigger asChild>
    <Button>Abrir Diálogo</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Tem certeza?</DialogTitle>
      <DialogDescription>Esta ação não pode ser desfeita.</DialogDescription>
    </DialogHeader>
    <DialogFooter>
      <DialogClose asChild>
        <Button variant="outline">Cancelar</Button>
      </DialogClose>
      <Button>Confirmar</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

Quando usar isso: Quando você precisar de uma sobreposição modal para confirmações, formulários, visualizações de detalhes ou qualquer conteúdo que exija a atenção focada do usuário.

Exemplo de Trabalho

"use client";
 
import { useState } from "react";
import {
  Dialog, DialogContent, DialogDescription, DialogFooter,
  DialogHeader, DialogTitle, DialogTrigger,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
 
const EditProfileSchema = z.object({
  name: z.string().min(1, "O nome é obrigatório"),
  email: z.string().email("Email inválido"),
  bio: z.string().max(200, "A bio deve ter no máximo 200 caracteres").optional(),
});
 
type EditProfileData = z.infer<typeof EditProfileSchema>;
 
export function EditProfileDialog({
  profile,
  onSave,
}: {
  profile: EditProfileData;
  onSave: (data: EditProfileData) => Promise<void>;
}) {
  const [open, setOpen] = useState(false);
  const {
    register,
    handleSubmit,
    formState: { errors, isSubmitting },
    reset,
  } = useForm<EditProfileData>({
    resolver: zodResolver(EditProfileSchema),
    defaultValues: profile,
  });
 
  async function onSubmit(data: EditProfileData) {
    await onSave(data);
    setOpen(false);
  }
 
  function handleOpenChange(nextOpen: boolean) {
    setOpen(nextOpen);
    if (nextOpen) {
      reset(profile); // reseta o formulário ao abrir
    }
  }
 
  return (
    <Dialog open={open} onOpenChange={handleOpenChange}>
      <DialogTrigger asChild>
        <Button variant="outline">Editar Perfil</Button>
      </DialogTrigger>
      <DialogContent className="sm:max-w-md">
        <form onSubmit={handleSubmit(onSubmit)}>
          <DialogHeader>
            <DialogTitle>Editar Perfil</DialogTitle>
            <DialogDescription>
              Atualize as informações do seu perfil. Clique em salvar quando terminar.
            </DialogDescription>
          </DialogHeader>
 
          <div className="space-y-4 py-4">
            <div className="space-y-2">
              <Label htmlFor="name">Nome</Label>
              <Input id="name" {...register("name")} />
              {errors.name && (
                <p className="text-sm text-red-600">{errors.name.message}</p>
              )}
            </div>
 
            <div className="space-y-2">
              <Label htmlFor="email">Email</Label>
              <Input id="email" type="email" {...register("email")} />
              {errors.email && (
                <p className="text-sm text-red-600">{errors.email.message}</p>
              )}
            </div>
 
            <div className="space-y-2">
              <Label htmlFor="bio">Bio</Label>
              <Input id="bio" {...register("bio")} placeholder="Conte-nos sobre você" />
              {errors.bio && (
                <p className="text-sm text-red-600">{errors.bio.message}</p>
              )}
            </div>
          </div>
 
          <DialogFooter>
            <Button type="button" variant="outline" onClick={() => setOpen(false)}>
              Cancelar
            </Button>
            <Button type="submit" disabled={isSubmitting}>
              {isSubmitting ? "Salvando..." : "Salvar"}
            </Button>
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog>
  );
}

O que isso demonstra:

Diálogo controlado com open e onOpenChange
Formulário dentro do diálogo com validação Zod
Reset do formulário ao abrir o diálogo
Fechar o diálogo após submissão bem-sucedida
Rótulos e mensagens de erro acessíveis

Mergulho Profundo

Como Funciona

O Dialog é construído sobre @radix-ui/react-dialog - totalmente acessível com trap de foco e fechamento com ESC
DialogTrigger abre o diálogo quando clicado
DialogContent renderiza em um portal, sobrepondo a página com um fundo
O foco é mantido dentro do diálogo enquanto aberto - Tab alterna entre os elementos focáveis
A tecla ESC e o clique no fundo fecham o diálogo (configurável)
DialogClose renderiza um botão que fecha o diálogo quando clicado
asChild mescla as props do componente em seu único elemento filho

Variações

Diálogo de confirmação com ação assíncrona:

function DeleteConfirmDialog({
  onConfirm,
  itemName,
}: {
  onConfirm: () => Promise<void>;
  itemName: string;
}) {
  const [open, setOpen] = useState(false);
  const [deleting, setDeleting] = useState(false);
 
  async function handleDelete() {
    setDeleting(true);
    await onConfirm();
    setDeleting(false);
    setOpen(false);
  }
 
  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>
        <Button variant="destructive" size="sm">Excluir</Button>
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Excluir {itemName}?</DialogTitle>
          <DialogDescription>
            Esta ação não pode ser desfeita. Isso excluirá permanentemente o item.
          </DialogDescription>
        </DialogHeader>
        <DialogFooter>
          <Button variant="outline" onClick={() => setOpen(false)} disabled={deleting}>
            Cancelar
          </Button>
          <Button variant="destructive" onClick={handleDelete} disabled={deleting}>
            {deleting ? "Excluindo..." : "Excluir"}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

Diálogo com conteúdo rolável:

<DialogContent className="max-h-[85vh] overflow-y-auto">
  <DialogHeader>
    <DialogTitle>Termos de Serviço</DialogTitle>
  </DialogHeader>
  <div className="prose max-w-none text-sm">
    {/* Conteúdo longo */}
  </div>
</DialogContent>

Impedir fechamento ao clicar no fundo:

<DialogContent
  onInteractOutside={(e) => e.preventDefault()}
  onEscapeKeyDown={(e) => e.preventDefault()}
>
  {/* O usuário deve fechar explicitamente */}
</DialogContent>

Notas TypeScript

// Props do componente Dialog
import type { DialogProps } from "@radix-ui/react-dialog";
 
// Wrapper de diálogo controlado
interface ConfirmDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  onConfirm: () => void;
  title: string;
  description: string;
}
 
// DialogContent estende Radix DialogContentProps
// Você pode passar quaisquer atributos válidos de div HTML

Armadilhas

Submissão de formulário fecha o diálogo - Se a ação do formulário navegar ou o estado mudar, o diálogo pode fechar inesperadamente. Correção: Use estado controlado e feche apenas após a conclusão da ação.
Trap de foco com portais - Se você renderizar um dropdown ou popover dentro de um diálogo, certifique-se de que ele também seja renderizado em portal corretamente. Os componentes shadcn lidam com isso automaticamente.
Rolagem em dispositivos móveis - O conteúdo do diálogo pode transbordar em telas pequenas. Correção: Adicione max-h-[85vh] overflow-y-auto ao DialogContent.
Múltiplos diálogos empilhados - Abrir um diálogo de dentro de outro funciona, mas pode confundir os usuários. Correção: Use um único diálogo com conteúdo dinâmico, ou garanta o empilhamento correto de z-index.
Reset do formulário ao fechar - O conteúdo do diálogo permanece montado entre as aberturas por padrão. Correção: Resete o estado do formulário no onOpenChange quando o diálogo abrir.

Alternativas

Alternativa	Usar Quando	Não Usar Quando
Sheet (painel lateral)	Você quer um painel deslizante em vez de um modal centralizado	Um diálogo centralizado é mais apropriado
Alert Dialog	A ação é destrutiva e não deve ser acidentalmente descartada	O diálogo pode ser fechado clicando fora
Popover	Você precisa de uma sobreposição pequena e não bloqueante perto de um trigger	Você precisa de um lock de foco em página inteira
Drawer	Você quer um bottom sheet amigável para dispositivos móveis	Experiência primariamente para desktop

FAQs

Qual a diferença entre um Dialog não controlado e um controlado?

Não controlado: use apenas DialogTrigger; o Dialog gerencia seu próprio estado aberto/fechado
Controlado: passe as props open e onOpenChange para Dialog para controle total do estado
Use o modo controlado quando precisar fechar programaticamente (por exemplo, após a submissão de um formulário)

Como fechar um Dialog após uma submissão de formulário bem-sucedida?

async function onSubmit(data: FormData) {
  await saveData(data);
  setOpen(false); // fecha apenas após o sucesso
}

Use estado controlado (open/onOpenChange) para que você decida quando fechar.

Qual biblioteca Radix alimenta o Dialog do shadcn?

@radix-ui/react-dialog
Ela fornece trap de foco, fechamento com tecla ESC, fechamento ao clicar no fundo e renderização em portal

Como impedir que o Dialog feche quando o usuário clica fora?

<DialogContent
  onInteractOutside={(e) => e.preventDefault()}
  onEscapeKeyDown={(e) => e.preventDefault()}
>
  {/* O usuário deve clicar explicitamente em um botão de fechar */}
</DialogContent>

Armadilha: Por que o estado do formulário persiste entre as aberturas do Dialog?

O conteúdo do diálogo permanece montado entre as aberturas por padrão
Valores antigos do formulário permanecem a menos que você os resete explicitamente
Correção: resete o estado do formulário no callback onOpenChange quando o diálogo abrir

Como lidar com overflow em dispositivos móveis em um Dialog com conteúdo longo?

Adicione max-h-[85vh] overflow-y-auto ao DialogContent
Isso impede que o diálogo exceda a altura da viewport em telas pequenas

O que `asChild` faz no DialogTrigger?

Ele mescla o manipulador de clique e as props de acessibilidade do DialogTrigger em seu único filho
O elemento trigger (por exemplo, <Button>) substitui o elemento renderizado padrão
Sem asChild, DialogTrigger renderiza seu próprio botão envolvendo seu filho

Como tipar um componente de diálogo de confirmação reutilizável?

interface ConfirmDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  onConfirm: () => void;
  title: string;
  description: string;
}

O que é `DialogClose` e quando usá-lo?

DialogClose renderiza um botão que fecha automaticamente o diálogo ao clicar
Use-o para botões de cancelar em diálogos não controlados
Em diálogos controlados, você pode usar um Button regular com onClick={() => setOpen(false)} em vez disso

Armadilha: O que acontece quando você abre um dropdown ou popover dentro de um Dialog?

O trap de foco pode conflitar com sobreposições em portal renderizadas fora do diálogo
Os componentes shadcn lidam com isso automaticamente, pois também usam portais
Sobreposições personalizadas não em portal podem ficar presas ou ocultas atrás do diálogo

Como implementar um diálogo de confirmação de exclusão com estado de carregamento assíncrono?

const [deleting, setDeleting] = useState(false);
async function handleDelete() {
  setDeleting(true);
  await onConfirm();
  setDeleting(false);
  setOpen(false);
}
// Desabilita os botões Cancelar e Excluir enquanto exclui

Qual tipo TypeScript você deve usar para as props do componente Dialog?

Importe DialogProps de @radix-ui/react-dialog para as props do componente raiz
DialogContent estende DialogContentProps do Radix e aceita todos os atributos válidos de div HTML

Relacionado

Button - botões de trigger para o diálogo
Form - formulários dentro de diálogos
Toast - feedback após ações do diálogo
Command - paleta de comandos como um diálogo

Dialog

Buscar na documentação

Dialog