Dialog

Componente de diálogo modal para mostrar contenido

Componente de diálogo modal construido con Ark UI. Úsalo para confirmaciones, formularios o cualquier contenido que deba centrar al usuario y bloquear la interacción con el resto de la página.

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

export default function Example() {
  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button>Open Dialog</Button>
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>¿Estás seguro?</DialogTitle>
          <DialogDescription>
            Esta acción no se puede deshacer.
          </DialogDescription>
        </DialogHeader>
        <DialogFooter>
          <DialogClose asChild>
            <Button variant="outline">Cancelar</Button>
          </DialogClose>
          <Button variant="destructive">Eliminar</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

View Code

Acciones destructivas

Para acciones irreversibles usa variant="destructive" en el botón principal y una descripción clara dentro de DialogDescription.

Instalación

bash

liminal add dialog

Uso

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

export default function Example() {
  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button>Open Dialog</Button>
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>¿Estás seguro?</DialogTitle>
          <DialogDescription>
            Esta acción no se puede deshacer.
          </DialogDescription>
        </DialogHeader>
        <DialogFooter>
          <DialogClose asChild>
            <Button variant="outline">Cancelar</Button>
          </DialogClose>
          <Button variant="destructive">Eliminar</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

View Code

Ejemplos

Básico

El ejemplo anterior muestra la estructura típica: Dialog > DialogTrigger + DialogContent. Usa DialogClose con asChild para cerrar desde un botón personalizado.

API

Prop	Type	Default	Description
open	boolean	uncontrolled	Permite controlar manualmente el estado abierto/cerrado.
onOpenChange	(details) => void	-	Callback que se ejecuta cuando cambia el estado de apertura del diálogo.
DialogClose asChild	boolean	false	Renderiza un botón/enlace personalizado para cerrar el diálogo.