Visão geral

O Dialog interrompe o fluxo principal da interface e foca o usuário em uma ação específica. Use com moderação.

Demo básica

Import

import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, DialogClose } from "@/components/ui/dialog"

Variações

Exemplos de dialogs para diferentes contextos de uso.

Confirmação destrutiva

Padrão de implementação

Snippets para os usos mais comuns do Dialog.

Dialog básico

<Dialog>
  <DialogTrigger asChild>
    <Button>Abrir</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Título do dialog</DialogTitle>
      <DialogDescription>Descrição opcional.</DialogDescription>
    </DialogHeader>
    {/* Conteúdo */}
    <DialogFooter>
      <DialogClose asChild>
        <Button variant="outline">Cancelar</Button>
      </DialogClose>
      <Button>Confirmar</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

Dialog controlado (sem DialogTrigger)

"use client"
import { useState } from "react"

export function DialogControlado() {
  const [open, setOpen] = useState(false)

  return (
    <>
      <Button onClick={() => setOpen(true)}>Abrir</Button>
      <Dialog open={open} onOpenChange={setOpen}>
        <DialogContent>
          <DialogTitle>Modal controlado</DialogTitle>
          {/* conteúdo */}
        </DialogContent>
      </Dialog>
    </>
  )
}

Props e uso

API dos sub-componentes do Dialog.

Sub-componentes

Dialog

open, onOpenChange

Container raiz. Aceita estado controlado.

DialogTrigger

asChild

Elemento que abre o dialog. Use asChild para button/link custom.

DialogContent

className, onInteractOutside

Painel modal. Use sm:max-w-* para controlar largura.

DialogHeader

div

Container do cabeçalho (título + descrição).

DialogTitle

div

Título obrigatório do dialog para acessibilidade.

DialogDescription

div

Descrição opcional com estilo muted.

DialogFooter

div

Container das ações com flex e alinhamento.

DialogClose

asChild

Botão que fecha o dialog. Use asChild para customizar.

Acessibilidade

O Dialog usa role="dialog" e aria-modal="true" automaticamente.

DialogTitle é obrigatório — fornece o nome acessível do dialog. Omiti-lo gera warning de acessibilidade.

Foco fica preso dentro do dialog enquanto aberto. Escape fecha o dialog automaticamente.

MN Design System · Primary #5FC318 · Brand Green #AFF000 · Font: Inter