Dialog

Janela modal que interrompe a tarefa para uma decisão ou um formulário curto.

Playground

Botão de fechar

Título

<Dialog>
  <DialogTrigger render={<Button variant="outline" />}>Abrir dialog</DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Excluir projeto?</DialogTitle>
      <DialogDescription>…</DialogDescription>
    </DialogHeader>
    <DialogFooter>
      <DialogClose render={<Button variant="outline" />}>Cancelar</DialogClose>
      <Button variant="destructive">Excluir</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

Quando usar

✓Confirmar algo, editar um item rápido, formulário de poucos campos

Evite quando

Ação destrutiva que precisa de confirmação explícita→ AlertDialog
Conteúdo longo ou navegação→ Sheet ou uma página
Informação ancorada num botão, sem bloquear→ Popover
Superfície de vidro sobre o conteúdo→ GlassDialog

Variantes e props

showCloseButton (DialogContent)padrão:

truefalse

Estados

openclosed (animação de saída)

Acompanha data-density="compact" (tamanhos vêm de --spacing, --text-*, --radius).

Acessibilidade

Papel: dialog (aria-modal)
Teclado: Esc fecha; foco preso dentro; volta ao gatilho ao fechar

DialogTitle obrigatório (pode ser sr-only)

Código

Partes: Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter, DialogClose, DialogOverlay, DialogPortal

import

import { Dialog, DialogTrigger, DialogContent, DialogHeader } from "@/components/ui/dialog";

Fonte: src/components/ui/dialog.tsx · Resense (shadcn base-nova, Base UI)

Relacionados: AlertDialog, Sheet, Popover, GlassDialog