Dialog

Un diálogo modal que interrumpe al usuario con contenido importante y espera una respuesta.

default.tsx

1'use client';
2
3import { Button } from '@/components/ui/button';
4import { Dialog } from '@/components/ui/dialog';
5
6export function Default() {
7  return (
8    <Dialog>
9      <Dialog.Trigger asChild>
10        <Button>Open Dialog</Button>
11      </Dialog.Trigger>
12      <Dialog.Content>
13        <Dialog.Header>
14          <Dialog.Title>Are you absolutely sure?</Dialog.Title>
15          <Dialog.Description>
16            This action cannot be undone. This will permanently delete your account and remove your
17            data from our servers.
18          </Dialog.Description>
19        </Dialog.Header>
20        <Dialog.Footer>
21          <Dialog.Close asChild>
22            <Button variant="outline">Cancel</Button>
23          </Dialog.Close>
24          <Dialog.Close asChild>
25            <Button variant="destructive">Delete Account</Button>
26          </Dialog.Close>
27        </Dialog.Footer>
28      </Dialog.Content>
29    </Dialog>
30  );
31}

Instalación

pnpm dlx nachui add dialog

Anatomía

1import { Dialog } from '@/components/ui/dialog';

1<Dialog>
2  <Dialog.Trigger asChild>
3    <Button>Abrir Diálogo</Button>
4  </Dialog.Trigger>
5  <Dialog.Content>
6    <Dialog.Header>
7      <Dialog.Title>¿Estás absolutamente seguro?</Dialog.Title>
8      <Dialog.Description>Esta acción no se puede deshacer.</Dialog.Description>
9    </Dialog.Header>
10    <Dialog.Footer>
11      <Dialog.Close asChild>
12        <Button variant="outline">Cancelar</Button>
13      </Dialog.Close>
14      <Button>Confirmar</Button>
15    </Dialog.Footer>
16  </Dialog.Content>
17</Dialog>

Variantes

Alerta (Alert)

alert.tsx

1'use client';
2
3import { Button } from '@/components/ui/button';
4import { Dialog } from '@/components/ui/dialog';
5
6export function Alert() {
7  return (
8    <Dialog>
9      <Dialog.Trigger asChild>
10        <Button variant="destructive">Delete Account</Button>
11      </Dialog.Trigger>
12      <Dialog.Content>
13        <Dialog.Header>
14          <Dialog.Title>Are you absolutely sure?</Dialog.Title>
15          <Dialog.Description>
16            This action cannot be undone. This will permanently delete your account and remove your
17            data from our servers.
18          </Dialog.Description>
19        </Dialog.Header>
20        <Dialog.Footer>
21          <Dialog.Close asChild>
22            <Button variant="outline">Cancel</Button>
23          </Dialog.Close>
24          <Dialog.Close asChild>
25            <Button variant="destructive">Yes, delete account</Button>
26          </Dialog.Close>
27        </Dialog.Footer>
28      </Dialog.Content>
29    </Dialog>
30  );
31}

Referencia de API

Dialog

Prop	Tipo	Por defecto	Descripción
`defaultOpen`	`boolean`	`false`	Estado abierto inicial
`open`	`boolean`	-	Estado abierto controlado
`onOpenChange`	`(open: boolean) => void`	-	Callback cuando cambia el estado

Dialog.Trigger

Prop	Tipo	Por defecto	Descripción
`asChild`	`boolean`	`false`	Renderizar como elemento hijo
`className`	`string`	-	Clases CSS adicionales

Dialog.Content

Prop	Tipo	Por defecto	Descripción
`className`	`string`	-	Clases CSS adicionales
`children`	`ReactNode`	-	Contenido del diálogo

Dialog.Header

Prop	Tipo	Por defecto	Descripción
`className`	`string`	-	Clases CSS adicionales

Dialog.Title

Prop	Tipo	Por defecto	Descripción
`className`	`string`	-	Clases CSS adicionales

Dialog.Description

Prop	Tipo	Por defecto	Descripción
`className`	`string`	-	Clases CSS adicionales

Dialog.Footer

Prop	Tipo	Por defecto	Descripción
`className`	`string`	-	Clases CSS adicionales

DialogClose

Prop	Tipo	Por defecto	Descripción
`asChild`	`boolean`	`false`	Renderizar como elemento hijo
`className`	`string`	-	Clases CSS adicionales

AnteriorCollapsible SiguienteDrawer