0
# Overlay Components
1

2
Modal dialogs, drawers, popovers, and overlay panels for displaying contextual content and collecting user input with flexible positioning and animation options.
3

4
## Capabilities
5

6
### Dialog Components
7

8
#### Dialog
9
Modal dialog container with header, content, footer, and extensive customization options.
10

11
```typescript { .api }
12
/**
13
 * Modal dialog component
14
 */
15
import Dialog from "primevue/dialog";
16

17
interface DialogProps extends BaseComponentProps {
18
  header?: string;
19
  footer?: string;
20
  visible?: boolean;
21
  modal?: boolean;
22
  contentStyle?: any;
23
  contentClass?: string;
24
  rtl?: boolean;
25
  closable?: boolean;
26
  dismissableMask?: boolean;
27
  closeOnEscape?: boolean;
28
  showHeader?: boolean;
29
  baseZIndex?: number;
30
  autoZIndex?: boolean;
31
  position?: "center" | "top" | "bottom" | "left" | "right" | "top-left" | "top-right" | "bottom-left" | "bottom-right";
32
  maximizable?: boolean;
33
  breakpoints?: object;
34
  draggable?: boolean;
35
  resizable?: boolean;
36
  minX?: number;
37
  minY?: number;
38
  keepInViewport?: boolean;
39
  appendTo?: string;
40
  style?: any;
41
  class?: string;
42
  blockScroll?: boolean;
43
}
44
```
45

46
**Usage Example:**
47

48
```vue
49
<template>
50
  <Dialog v-model:visible="visible" modal header="Header" :style="{width: '50vw'}">
51
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
52
    <template #footer>
53
      <Button label="No" icon="pi pi-times" @click="visible = false" text />
54
      <Button label="Yes" icon="pi pi-check" @click="visible = false" autofocus />
55
    </template>
56
  </Dialog>
57
</template>
58
```
59

60
#### ConfirmDialog
61
Modal confirmation dialog with accept/reject actions.
62

63
```typescript { .api }
64
/**
65
 * Modal confirmation dialog
66
 */
67
import ConfirmDialog from "primevue/confirmdialog";
68

69
interface ConfirmDialogProps extends BaseComponentProps {
70
  group?: string;
71
  breakpoints?: object;
72
}
73
```
74

75
#### DynamicDialog
76
Programmatically created dialog for dynamic content rendering.
77

78
```typescript { .api }
79
/**
80
 * Dynamic dialog for programmatic content
81
 */
82
import DynamicDialog from "primevue/dynamicdialog";
83

84
interface DynamicDialogProps extends BaseComponentProps {
85
  // Configured through DialogService
86
}
87
```
88

89
### Side Panel Components
90

91
#### Drawer
92
Modern slide-out side panel with multiple positions and sizes.
93

94
```typescript { .api }
95
/**
96
 * Modern slide-out side panel
97
 */
98
import Drawer from "primevue/drawer";
99

100
interface DrawerProps extends BaseComponentProps {
101
  visible?: boolean;
102
  position?: "left" | "right" | "top" | "bottom";
103
  header?: string;
104
  baseZIndex?: number;
105
  autoZIndex?: boolean;
106
  dismissable?: boolean;
107
  showCloseIcon?: boolean;
108
  closeIcon?: string;
109
  modal?: boolean;
110
  blockScroll?: boolean;
111
}
112
```
113

114
### Popup Components
115

116
#### Popover
117
Contextual popup container with arrow pointer and flexible positioning.
118

119
```typescript { .api }
120
/**
121
 * Contextual popup with positioning
122
 */
123
import Popover from "primevue/popover";
124

125
interface PopoverProps extends BaseComponentProps {
126
  dismissable?: boolean;
127
  appendTo?: string;
128
  baseZIndex?: number;
129
  autoZIndex?: boolean;
130
}
131
```
132

133
#### OverlayPanel
134
Positioned overlay container with arrow pointer for contextual content.
135

136
```typescript { .api }
137
/**
138
 * Positioned overlay panel
139
 */
140
import OverlayPanel from "primevue/overlaypanel";
141

142
interface OverlayPanelProps extends BaseComponentProps {
143
  dismissable?: boolean;
144
  showCloseIcon?: boolean;
145
  appendTo?: string;
146
  baseZIndex?: number;
147
  autoZIndex?: boolean;
148
  breakpoints?: object;
149
  closeIcon?: string;
150
  closeOnEscape?: boolean;
151
}
152
```
153

154
## Types
155

156
```typescript { .api }
157
// Dialog events
158
interface DialogBeforeShowEvent {
159
  originalEvent: Event;
160
}
161

162
interface DialogShowEvent {
163
  originalEvent: Event;
164
}
165

166
interface DialogBeforeHideEvent {
167
  originalEvent: Event;
168
}
169

170
interface DialogHideEvent {
171
  originalEvent: Event;
172
}
173

174
interface DialogMaximizeEvent {
175
  originalEvent: Event;
176
  maximized: boolean;
177
}
178
```