Component

Dialog

Disponible

Componente superpuesto para confirmaciones y acciones críticas. Interrumpe temporalmente el flujo con foco controlado, jerarquía clara y acciones explícitas.

Trigger · Overlay · Header · Footer

Import

Importa estilos base y el set compuesto del diálogo.

TypeScript

1import 'nave-ui-library/styles.css'
2import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel } from 'nave-ui-library/react'

Usage

Ejemplo base con título, descripción y acciones obligatorias.

Variants

El componente soporta variantes de alineación de contenido: left y center.

API Reference

Props principales del AlertDialog.

Prop	Type	Default	Description
`alignment`	`'left' \| 'center'`	`left`	Alignment of the alert dialog content.
`size`	`'regular'`	`regular`	Dialog density preset.
`open`	`boolean`	—	Whether the modal is open.
`onOpenChange`	`(open: boolean) => void`	—	Callback when open state changes.
`children`	`ReactNode`	—	Composición del diálogo con Trigger y Content.

States

Estados interactivos del componente raíz.

defaultopenclosed

Registry

Ver configuración técnica del registro

JSON

1{
2  "name": "ModalDialog",
3  "description": "Modal dialog para mostrar contenido sobre la página principal.",
4  "component": "AlertDialog",
5  "subcomponents": [
6    "AlertDialogTrigger",
7    "AlertDialogContent",
8    "AlertDialogHeader",
9    "AlertDialogTitle",
10    "AlertDialogDescription",
11    "AlertDialogFooter",
12    "AlertDialogAction",
13    "AlertDialogCancel"
14  ],
15  "files": [
16    "components/base/navegation/ModalDialog.tsx"
17  ],
18  "dependencies": [
19    "react",
20    "@radix-ui/react-alert-dialog"
21  ],
22  "props": {
23    "alignment": {
24      "type": "'left' | 'center'",
25      "default": "left",
26      "description": "Alignment of the alert dialog content."
27    },
28    "size": {
29      "type": "'regular'",
30      "default": "regular",
31      "description": "Dialog density preset."
32    },
33    "open": {
34      "type": "boolean",
35      "description": "Whether the modal is open."
36    },
37    "onOpenChange": {
38      "type": "(open: boolean) => void",
39      "description": "Callback when open state changes."
40    },
41    "children": {
42      "type": "ReactNode",
43      "required": true,
44      "description": "Composición del diálogo con Trigger y Content."
45    }
46  },
47  "states": {
48    "default": {},
49    "open": {},
50    "closed": {}
51  }
52}

1import 'nave-ui-library/styles.css' 2import { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel } from 'nave-ui-library/react'

Prop

Type

Default

Description

alignment

'left' | 'center'

left

Alignment of the alert dialog content.

size

'regular'

regular

Dialog density preset.

open

boolean

—

Whether the modal is open.

onOpenChange

(open: boolean) => void

—

Callback when open state changes.

children

ReactNode

—

Composición del diálogo con Trigger y Content.

1{ 2 "name": "ModalDialog", 3 "description": "Modal dialog para mostrar contenido sobre la página principal.", 4 "component": "AlertDialog", 5 "subcomponents": [ 6 "AlertDialogTrigger", 7 "AlertDialogContent", 8 "AlertDialogHeader", 9 "AlertDialogTitle", 10 "AlertDialogDescription", 11 "AlertDialogFooter", 12 "AlertDialogAction", 13 "AlertDialogCancel" 14 ], 15 "files": [ 16 "components/base/navegation/ModalDialog.tsx" 17 ], 18 "dependencies": [ 19 "react", 20 "@radix-ui/react-alert-dialog" 21 ], 22 "props": { 23 "alignment": { 24 "type": "'left' | 'center'", 25 "default": "left", 26 "description": "Alignment of the alert dialog content." 27 }, 28 "size": { 29 "type": "'regular'", 30 "default": "regular", 31 "description": "Dialog density preset." 32 }, 33 "open": { 34 "type": "boolean", 35 "description": "Whether the modal is open." 36 }, 37 "onOpenChange": { 38 "type": "(open: boolean) => void", 39 "description": "Callback when open state changes." 40 }, 41 "children": { 42 "type": "ReactNode", 43 "required": true, 44 "description": "Composición del diálogo con Trigger y Content." 45 } 46 }, 47 "states": { 48 "default": {}, 49 "open": {}, 50 "closed": {} 51 } 52}