0
# Dialog Creation and Management
1

2
Core functionality for creating, displaying, and managing SweetAlert2 popup dialogs with comprehensive configuration options.
3

4
## Capabilities
5

6
### Fire Method (Options)
7

8
Creates and displays a popup with full configuration options.
9

10
```typescript { .api }
11
/**
12
 * Display a SweetAlert2 popup with comprehensive configuration options
13
 * @param options - Configuration object with all available popup settings
14
 * @returns Promise resolving to user interaction result
15
 */
16
function fire<T = any>(options: SweetAlertOptions): Promise<SweetAlertResult<Awaited<T>>>;
17
```
18

19
**Usage Examples:**
20

21
```typescript
22
// Basic popup with options
23
const result = await Swal.fire({
24
  title: 'Are you sure?',
25
  text: "You won't be able to revert this!",
26
  icon: 'warning',
27
  showCancelButton: true,
28
  confirmButtonColor: '#3085d6',
29
  cancelButtonColor: '#d33',
30
  confirmButtonText: 'Yes, delete it!'
31
});
32

33
// Input popup
34
const { value: email } = await Swal.fire({
35
  title: 'Enter your email',
36
  input: 'email',
37
  inputLabel: 'Your email address',
38
  inputPlaceholder: 'Enter your email address',
39
  inputValidator: (value) => {
40
    if (!value) {
41
      return 'You need to write something!'
42
    }
43
  }
44
});
45

46
// Advanced configuration
47
await Swal.fire({
48
  title: 'Custom HTML Example',
49
  html: `
50
    <p>You can use <strong>HTML</strong> in your message.</p>
51
    <p>Including <em>formatted text</em> and <a href="#">links</a>.</p>
52
  `,
53
  icon: 'info',
54
  showCloseButton: true,
55
  showCancelButton: true,
56
  focusConfirm: false,
57
  confirmButtonText: 'Great!',
58
  confirmButtonAriaLabel: 'Thumbs up, great!',
59
  cancelButtonText: 'No, thanks',
60
  cancelButtonAriaLabel: 'Thumbs down'
61
});
62
```
63

64
### Fire Method (Positional)
65

66
Creates and displays a popup using positional arguments for quick usage.
67

68
```typescript { .api }
69
/**
70
 * Display a simple SweetAlert2 popup with positional arguments
71
 * @param title - Optional popup title
72
 * @param html - Optional popup content (HTML/text)
73
 * @param icon - Optional icon type
74
 * @returns Promise resolving to user interaction result
75
 */
76
function fire<T = any>(title?: string, html?: string, icon?: SweetAlertIcon): Promise<SweetAlertResult<Awaited<T>>>;
77
```
78

79
**Usage Examples:**
80

81
```typescript
82
// Simple alert
83
await Swal.fire('Hello world!');
84

85
// Alert with title and text
86
await Swal.fire('Good job!', 'You clicked the button!', 'success');
87

88
// Alert with icon
89
await Swal.fire('Oops...', 'Something went wrong!', 'error');
90
```
91

92
### Mixin Method
93

94
Creates a reusable Swal instance with predefined default options.
95

96
```typescript { .api }
97
/**
98
 * Create a Swal instance with default options for reuse
99
 * @param options - Default options to apply to all calls from this instance
100
 * @returns New Swal instance with default options applied
101
 */
102
function mixin(options: SweetAlertOptions): typeof Swal;
103
```
104

105
**Usage Examples:**
106

107
```typescript
108
// Create toast mixin
109
const Toast = Swal.mixin({
110
  toast: true,
111
  position: 'top-end',
112
  showConfirmButton: false,
113
  timer: 3000,
114
  timerProgressBar: true,
115
  didOpen: (toast) => {
116
    toast.addEventListener('mouseenter', Swal.stopTimer)
117
    toast.addEventListener('mouseleave', Swal.resumeTimer)
118
  }
119
});
120

121
// Use toast mixin
122
Toast.fire({
123
  icon: 'success',
124
  title: 'Signed in successfully'
125
});
126

127
Toast.fire({
128
  icon: 'error',
129
  title: 'Login failed'
130
});
131

132
// Create confirmation dialog mixin
133
const ConfirmDialog = Swal.mixin({
134
  customClass: {
135
    confirmButton: 'btn btn-success',
136
    cancelButton: 'btn btn-danger'
137
  },
138
  buttonsStyling: false,
139
  showCancelButton: true,
140
  confirmButtonText: 'Yes',
141
  cancelButtonText: 'No'
142
});
143

144
const result = await ConfirmDialog.fire({
145
  title: 'Delete item?',
146
  text: 'This action cannot be undone'
147
});
148
```
149

150
## SweetAlertOptions Interface
151

152
Complete configuration interface for popup customization.
153

154
```typescript { .api }
155
interface SweetAlertOptions {
156
  // Content
157
  title?: string | HTMLElement | JQuery;
158
  titleText?: string;
159
  text?: string;
160
  html?: string | HTMLElement | JQuery;
161
  footer?: string | HTMLElement | JQuery;
162
  
163
  // Visual appearance
164
  icon?: SweetAlertIcon;
165
  iconColor?: string;
166
  iconHtml?: string;
167
  imageUrl?: string;
168
  imageWidth?: number | string;
169
  imageHeight?: number | string;
170
  imageAlt?: string;
171
  
172
  // Layout and positioning
173
  toast?: boolean;
174
  position?: SweetAlertPosition;
175
  grow?: SweetAlertGrow;
176
  width?: number | string;
177
  padding?: number | string;
178
  color?: string;
179
  background?: string;
180
  backdrop?: boolean | string;
181
  theme?: SweetAlertTheme;
182
  
183
  // Buttons
184
  showConfirmButton?: boolean;
185
  showDenyButton?: boolean;
186
  showCancelButton?: boolean;
187
  confirmButtonText?: string;
188
  denyButtonText?: string;
189
  cancelButtonText?: string;
190
  confirmButtonColor?: string;
191
  denyButtonColor?: string;
192
  cancelButtonColor?: string;
193
  confirmButtonAriaLabel?: string;
194
  denyButtonAriaLabel?: string;
195
  cancelButtonAriaLabel?: string;
196
  buttonsStyling?: boolean;
197
  reverseButtons?: boolean;
198
  
199
  // Interaction
200
  allowOutsideClick?: ValueOrThunk<boolean>;
201
  allowEscapeKey?: ValueOrThunk<boolean>;
202
  allowEnterKey?: ValueOrThunk<boolean>;
203
  stopKeydownPropagation?: boolean;
204
  keydownListenerCapture?: boolean;
205
  
206
  // Focus management
207
  focusConfirm?: boolean;
208
  focusDeny?: boolean;
209
  focusCancel?: boolean;
210
  returnFocus?: boolean;
211
  
212
  // Input
213
  input?: SweetAlertInput;
214
  inputValue?: SyncOrAsync<string | number | File | FileList> | null;
215
  inputPlaceholder?: string;
216
  inputLabel?: string;
217
  inputOptions?: SyncOrAsync<ReadonlyMap<string, string> | Record<string, any>>;
218
  inputAutoTrim?: boolean;
219
  inputAutoFocus?: boolean;
220
  inputAttributes?: Record<string, string>;
221
  inputValidator?: (value: any) => SyncOrAsync<string | null | false | void>;
222
  validationMessage?: string;
223
  returnInputValueOnDeny?: boolean;
224
  
225
  // Timing
226
  timer?: number;
227
  timerProgressBar?: boolean;
228
  
229
  // Events and hooks
230
  willOpen?: (popup: HTMLElement) => void;
231
  didOpen?: (popup: HTMLElement) => void;
232
  didRender?: (popup: HTMLElement) => void;
233
  willClose?: (popup: HTMLElement) => void;
234
  didClose?: () => void;
235
  didDestroy?: () => void;
236
  
237
  // Event handling
238
  on?: Record<SweetAlertEventName, (event: any) => void>;
239
  once?: Record<SweetAlertEventName, (event: any) => void>;
240
  off?: (event?: SweetAlertEventName) => void;
241
  
242
  // Loading
243
  showLoaderOnConfirm?: boolean;
244
  showLoaderOnDeny?: boolean;
245
  preConfirm?: (inputValue: any) => SyncOrAsync<any>;
246
  preDeny?: (value: any) => SyncOrAsync<any | void>;
247
  
248
  // Styling and animation
249
  customClass?: SweetAlertCustomClass;
250
  showClass?: SweetAlertShowClass;
251
  hideClass?: SweetAlertHideClass;
252
  animation?: boolean;
253
  
254
  // Advanced
255
  target?: string | HTMLElement | null;
256
  template?: string | HTMLTemplateElement;
257
  progressSteps?: readonly string[];
258
  currentProgressStep?: number;
259
  progressStepsDistance?: number | string;
260
  heightAuto?: boolean;
261
  scrollbarPadding?: boolean;
262
  draggable?: boolean;
263
  topLayer?: boolean;
264
  
265
  // Close button
266
  showCloseButton?: boolean;
267
  closeButtonHtml?: string;
268
  closeButtonAriaLabel?: string;
269
  loaderHtml?: string;
270
}
271
```
272

273
## Supporting Types
274

275
```typescript { .api }
276
type SweetAlertGrow = 'row' | 'column' | 'fullscreen' | false;
277
type ValueOrThunk<T> = T | (() => T);
278
type SyncOrAsync<T> = T | Promise<T> | { toPromise: () => T };
279

280
interface SweetAlertCustomClass {
281
  container?: string | readonly string[];
282
  popup?: string | readonly string[];
283
  title?: string | readonly string[];
284
  closeButton?: string | readonly string[];
285
  icon?: string | readonly string[];
286
  image?: string | readonly string[];
287
  htmlContainer?: string | readonly string[];
288
  input?: string | readonly string[];
289
  inputLabel?: string | readonly string[];
290
  validationMessage?: string | readonly string[];
291
  actions?: string | readonly string[];
292
  confirmButton?: string | readonly string[];
293
  denyButton?: string | readonly string[];
294
  cancelButton?: string | readonly string[];
295
  loader?: string | readonly string[];
296
  footer?: string | readonly string[];
297
  timerProgressBar?: string | readonly string[];
298
}
299

300
interface SweetAlertHideShowClass {
301
  backdrop?: string | readonly string[];
302
  icon?: string | readonly string[];
303
  popup?: string | readonly string[];
304
}
305

306
type SweetAlertShowClass = Readonly<SweetAlertHideShowClass>;
307
type SweetAlertHideClass = SweetAlertHideShowClass;
308
```