0
# Feedback Components
1

2
Interactive feedback components including dialogs, action sheets, loading states, and toast notifications.
3

4
## Capabilities
5

6
### Dialog
7

8
Modal dialog component for user confirmations and alerts.
9

10
```typescript { .api }
11
import { Dialog } from 'vant';
12

13
// Function API
14
function Dialog(options: DialogOptions): Promise<void>;
15
function Dialog.alert(options: DialogOptions): Promise<void>;
16
function Dialog.confirm(options: DialogOptions): Promise<void>;
17

18
interface DialogOptions {
19
  /** Dialog title */
20
  title?: string;
21
  /** Dialog message */
22
  message?: string;
23
  /** Message align */
24
  messageAlign?: 'left' | 'center' | 'right';
25
  /** Show confirm button */
26
  showConfirmButton?: boolean;
27
  /** Show cancel button */
28
  showCancelButton?: boolean;
29
  /** Confirm button text */
30
  confirmButtonText?: string;
31
  /** Cancel button text */
32
  cancelButtonText?: string;
33
  /** Confirm button color */
34
  confirmButtonColor?: string;
35
  /** Cancel button color */
36
  cancelButtonColor?: string;
37
  /** Show overlay */
38
  overlay?: boolean;
39
  /** Overlay class */
40
  overlayClass?: string;
41
  /** Overlay style */
42
  overlayStyle?: object;
43
  /** Close on overlay click */
44
  closeOnClickOverlay?: boolean;
45
  /** Lock scroll */
46
  lockScroll?: boolean;
47
  /** Allow HTML */
48
  allowHtml?: boolean;
49
  /** Class name */
50
  className?: string;
51
  /** Transition */
52
  transition?: string;
53
  /** Get container */
54
  getContainer?: string | (() => Element);
55
  /** Before close */
56
  beforeClose?: (action: string) => boolean | Promise<boolean>;
57
}
58

59
// Static methods
60
namespace Dialog {
61
  function close(): void;
62
  function setDefaultOptions(options: DialogOptions): void;
63
  function resetDefaultOptions(): void;
64
}
65
```
66

67
### ActionSheet
68

69
Action sheet component for presenting multiple options to users.
70

71
```typescript { .api }
72
import { ActionSheet } from 'vant';
73

74
interface ActionSheetProps {
75
  /** Show action sheet */
76
  show?: boolean;
77
  /** Action list */
78
  actions?: ActionSheetAction[];
79
  /** Title */
80
  title?: string;
81
  /** Cancel text */
82
  cancelText?: string;
83
  /** Description */
84
  description?: string;
85
  /** Closeable */
86
  closeable?: boolean;
87
  /** Close icon */
88
  closeIcon?: string;
89
  /** Duration */
90
  duration?: number | string;
91
  /** Round */
92
  round?: boolean;
93
  /** Overlay */
94
  overlay?: boolean;
95
  /** Overlay class */
96
  overlayClass?: string;
97
  /** Overlay style */
98
  overlayStyle?: object;
99
  /** Lock scroll */
100
  lockScroll?: boolean;
101
  /** Lazy render */
102
  lazyRender?: boolean;
103
  /** Close on click overlay */
104
  closeOnClickOverlay?: boolean;
105
  /** Close on click action */
106
  closeOnClickAction?: boolean;
107
  /** Safe area inset bottom */
108
  safeAreaInsetBottom?: boolean;
109
  /** Get container */
110
  getContainer?: string | (() => Element);
111
  /** Before close */
112
  beforeClose?: (action: string) => boolean | Promise<boolean>;
113
}
114

115
interface ActionSheetAction {
116
  /** Action name */
117
  name?: string;
118
  /** Action color */
119
  color?: string;
120
  /** Sub name */
121
  subname?: string;
122
  /** Loading state */
123
  loading?: boolean;
124
  /** Disabled state */
125
  disabled?: boolean;
126
  /** Class name */
127
  className?: string;
128
  /** Callback function */
129
  callback?: (action: ActionSheetAction) => void;
130
}
131
```
132

133
### Loading
134

135
Loading component for showing loading states and spinners.
136

137
```typescript { .api }
138
import { Loading } from 'vant';
139

140
interface LoadingProps {
141
  /** Loading color */
142
  color?: string;
143
  /** Loading type */
144
  type?: 'circular' | 'spinner';
145
  /** Loading size */
146
  size?: string | number;
147
  /** Text size */
148
  textSize?: string | number;
149
  /** Text color */
150
  textColor?: string;
151
  /** Vertical layout */
152
  vertical?: boolean;
153
}
154

155
// Function API
156
function Loading.service(message?: string): LoadingInstance;
157
function Loading.service(options: LoadingServiceOptions): LoadingInstance;
158

159
interface LoadingServiceOptions {
160
  /** Loading message */
161
  message?: string;
162
  /** Forbid click */
163
  forbidClick?: boolean;
164
  /** Loading type */
165
  loadingType?: 'circular' | 'spinner';
166
  /** Overlay */
167
  overlay?: boolean;
168
  /** Duration */
169
  duration?: number;
170
}
171

172
interface LoadingInstance {
173
  close: () => void;
174
}
175
```
176

177
### Notify
178

179
Notification component for showing status messages.
180

181
```typescript { .api }
182
import { Notify } from 'vant';
183

184
// Function API
185
function Notify(message: string): NotifyInstance;
186
function Notify(options: NotifyOptions): NotifyInstance;
187

188
interface NotifyOptions {
189
  /** Notify type */
190
  type?: 'primary' | 'success' | 'warning' | 'danger';
191
  /** Notify message */
192
  message?: string;
193
  /** Duration */
194
  duration?: number;
195
  /** Color */
196
  color?: string;
197
  /** Background */
198
  background?: string;
199
  /** Class name */
200
  className?: string;
201
  /** Lock scroll */
202
  lockScroll?: boolean;
203
  /** Position */
204
  position?: 'top' | 'bottom';
205
  /** Click callback */
206
  onClick?: (event: MouseEvent) => void;
207
  /** Close callback */
208
  onClose?: () => void;
209
  /** Opened callback */
210
  onOpened?: () => void;
211
}
212

213
interface NotifyInstance {
214
  close: () => void;
215
}
216

217
// Static methods
218
namespace Notify {
219
  function clear(): void;
220
  function setDefaultOptions(options: NotifyOptions): void;
221
  function resetDefaultOptions(): void;
222
}
223
```
224

225
### Overlay
226

227
Overlay component for modal backgrounds and masks.
228

229
```typescript { .api }
230
import { Overlay } from 'vant';
231

232
interface OverlayProps {
233
  /** Show overlay */
234
  show?: boolean;
235
  /** Z index */
236
  zIndex?: string | number;
237
  /** Duration */
238
  duration?: string | number;
239
  /** Class name */
240
  className?: string;
241
  /** Custom style */
242
  customStyle?: object;
243
  /** Lock scroll */
244
  lockScroll?: boolean;
245
}
246
```
247

248
### PullRefresh
249

250
Pull-to-refresh component for refreshing content.
251

252
```typescript { .api }
253
import { PullRefresh } from 'vant';
254

255
interface PullRefreshProps {
256
  /** Loading state */
257
  loading?: boolean;
258
  /** Success text */
259
  successText?: string;
260
  /** Success duration */
261
  successDuration?: number | string;
262
  /** Animation duration */
263
  animationDuration?: number | string;
264
  /** Head height */
265
  headHeight?: number | string;
266
  /** Pull distance */
267
  pullDistance?: number | string;
268
  /** Disabled */
269
  disabled?: boolean;
270
}
271
```
272

273
### ShareSheet
274

275
Share sheet component for social sharing options.
276

277
```typescript { .api }
278
import { ShareSheet } from 'vant';
279

280
interface ShareSheetProps {
281
  /** Show share sheet */
282
  show?: boolean;
283
  /** Options */
284
  options?: ShareSheetOption[] | ShareSheetOption[][];
285
  /** Title */
286
  title?: string;
287
  /** Cancel text */
288
  cancelText?: string;
289
  /** Description */
290
  description?: string;
291
  /** Duration */
292
  duration?: number | string;
293
  /** Round */
294
  round?: boolean;
295
  /** Overlay */
296
  overlay?: boolean;
297
  /** Overlay class */
298
  overlayClass?: string;
299
  /** Overlay style */
300
  overlayStyle?: object;
301
  /** Lock scroll */
302
  lockScroll?: boolean;
303
  /** Lazy render */
304
  lazyRender?: boolean;
305
  /** Close on click overlay */
306
  closeOnClickOverlay?: boolean;
307
  /** Safe area inset bottom */
308
  safeAreaInsetBottom?: boolean;
309
  /** Get container */
310
  getContainer?: string | (() => Element);
311
  /** Before close */
312
  beforeClose?: (action: string) => boolean | Promise<boolean>;
313
}
314

315
interface ShareSheetOption {
316
  /** Option name */
317
  name?: string;
318
  /** Option description */
319
  description?: string;
320
  /** Option icon */
321
  icon?: string;
322
  /** Option class name */
323
  className?: string;
324
}
325
```
326

327
### SwipeCell
328

329
Swipe cell component for revealing actions on swipe.
330

331
```typescript { .api }
332
import { SwipeCell } from 'vant';
333

334
interface SwipeCellProps {
335
  /** Cell name */
336
  name?: string | number;
337
  /** Left action width */
338
  leftWidth?: number | string;
339
  /** Right action width */
340
  rightWidth?: number | string;
341
  /** Before close */
342
  beforeClose?: (params: { name: string; position: string }) => boolean | Promise<boolean>;
343
  /** Disabled */
344
  disabled?: boolean;
345
  /** Stop propagation */
346
  stopPropagation?: boolean;
347
}
348

349
interface SwipeCellInstance {
350
  open: (side: 'left' | 'right') => void;
351
  close: () => void;
352
}
353
```
354

355
### FloatingPanel
356

357
Floating panel component for bottom sheets and drawers.
358

359
```typescript { .api }
360
import { FloatingPanel } from 'vant';
361

362
interface FloatingPanelProps {
363
  /** Panel height */
364
  height?: number | string;
365
  /** Anchors */
366
  anchors?: number[];
367
  /** Duration */
368
  duration?: number;
369
  /** Content draggable */
370
  contentDraggable?: boolean;
371
  /** Lock scroll */
372
  lockScroll?: boolean;
373
  /** Safe area inset bottom */
374
  safeAreaInsetBottom?: boolean;
375
}
376
```
377

378
### FloatingBubble
379

380
Floating bubble component for floating action buttons.
381

382
```typescript { .api }
383
import { FloatingBubble } from 'vant';
384

385
interface FloatingBubbleProps {
386
  /** Bubble axis */
387
  axis?: 'xy' | 'x' | 'y' | 'lock';
388
  /** Magnetic */
389
  magnetic?: 'x' | 'y';
390
  /** Offset */
391
  offset?: { x: number; y: number };
392
  /** Teleport */
393
  teleport?: string | Element;
394
  /** Gap */
395
  gap?: number;
396
  /** Icon */
397
  icon?: string;
398
}
399
```
400

401
### Barrage
402

403
Barrage component for live comment streams.
404

405
```typescript { .api }
406
import { Barrage } from 'vant';
407

408
interface BarrageProps {
409
  /** Auto play */
410
  autoPlay?: boolean;
411
  /** Rows */
412
  rows?: number | string;
413
  /** Top */
414
  top?: number | string;
415
  /** Duration */
416
  duration?: number;
417
  /** Delay */
418
  delay?: number;
419
}
420

421
interface BarrageInstance {
422
  play: () => void;
423
  pause: () => void;
424
}
425
```