Dialog

Modal para formulários curtos ou detalhes focados.

Sobreposições e menus

Carregando demonstração…

Código da demo

"use client";

import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";

export function Demo() {
  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button>Abrir diálogo</Button>
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Editar perfil</DialogTitle>
          <DialogDescription>
            Altere o nome localmente. Esc ou overlay fecham.
          </DialogDescription>
        </DialogHeader>
        <div className="grid gap-fe-3 py-fe-2">
          <Label htmlFor="name">Nome</Label>
          <Input id="name" defaultValue="Rafa" />
        </div>
        <DialogFooter>
          <DialogClose asChild>
            <Button variant="outline">Cancelar</Button>
          </DialogClose>
          <Button>Salvar</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

Use

Decisão curta que bloqueia o fluxo: editar um campo, confirmar.
Título claro e saída explícita: Esc, × e Cancelar.

Não use

Não use para confirmar exclusão: use AlertDialog.
Não use para conteúdo longo: use Sheet ou uma página.
Não abra um Dialog dentro de outro.

Acessibilidade: Title obrigatório; Esc/overlay fecham; foco preso.
Importar: import { Dialog, DialogTrigger, DialogContent, DialogTitle } from "@financeequity/ui/dialog"
Neste repositório:
import { Dialog, DialogTrigger, DialogContent, DialogTitle } from "@/components/ui/dialog"
Dependências: radix-ui