0
# Feedback Components
1

2
Feedback components provide user interface elements for progress indication, notifications, dialogs, and tooltips to communicate system status and gather user input.
3

4
## Capabilities
5

6
### Dialog
7

8
Dialog component for displaying content in a modal overlay.
9

10
```typescript { .api }
11
/**
12
 * Dialog component for displaying content in a modal overlay
13
 * @param props - Dialog props
14
 * @returns Dialog React component
15
 */
16
function Dialog(props: DialogProps): JSX.Element;
17

18
interface DialogProps extends StandardProps<ModalProps, DialogClassKey> {
19
  children?: React.ReactNode;
20
  fullScreen?: boolean;
21
  fullWidth?: boolean;
22
  maxWidth?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | false;
23
  onClose?: ModalProps['onClose'];
24
  open: boolean;
25
  PaperComponent?: React.ComponentType<PaperProps>;
26
  PaperProps?: Partial<PaperProps>;
27
  scroll?: 'body' | 'paper';
28
  TransitionComponent?: React.ComponentType<TransitionProps>;
29
  transitionDuration?: TransitionProps['timeout'];
30
  TransitionProps?: TransitionProps;
31
}
32

33
type DialogClassKey = 'root' | 'scrollPaper' | 'scrollBody' | 'container' | 'paper' | 'paperScrollPaper' | 'paperScrollBody' | 'paperWidthFalse' | 'paperWidthXs' | 'paperWidthSm' | 'paperWidthMd' | 'paperWidthLg' | 'paperWidthXl' | 'paperFullWidth' | 'paperFullScreen';
34
```
35

36
**Usage Examples:**
37

38
```typescript
39
import { Dialog, DialogTitle, DialogContent, DialogActions, Button } from '@material-ui/core';
40

41
const [open, setOpen] = useState(false);
42

43
<Dialog open={open} onClose={() => setOpen(false)} maxWidth="sm" fullWidth>
44
  <DialogTitle>Confirm Action</DialogTitle>
45
  <DialogContent>
46
    Are you sure you want to continue?
47
  </DialogContent>
48
  <DialogActions>
49
    <Button onClick={() => setOpen(false)} color="primary">
50
      Cancel
51
    </Button>
52
    <Button onClick={() => setOpen(false)} color="primary" variant="contained">
53
      Confirm
54
    </Button>
55
  </DialogActions>
56
</Dialog>
57
```
58

59
### Dialog Title
60

61
Title area of a dialog.
62

63
```typescript { .api }
64
/**
65
 * Title area of a dialog
66
 * @param props - Dialog title props
67
 * @returns Dialog title React component
68
 */
69
function DialogTitle(props: DialogTitleProps): JSX.Element;
70

71
interface DialogTitleProps extends StandardProps<React.HTMLAttributes<HTMLDivElement>, DialogTitleClassKey> {
72
  children?: React.ReactNode;
73
  disableTypography?: boolean;
74
}
75

76
type DialogTitleClassKey = 'root';
77
```
78

79
### Dialog Content
80

81
Main content area of a dialog.
82

83
```typescript { .api }
84
/**
85
 * Main content area of a dialog
86
 * @param props - Dialog content props  
87
 * @returns Dialog content React component
88
 */
89
function DialogContent(props: DialogContentProps): JSX.Element;
90

91
interface DialogContentProps extends StandardProps<React.HTMLAttributes<HTMLDivElement>, DialogContentClassKey> {
92
  children?: React.ReactNode;
93
  dividers?: boolean;
94
}
95

96
type DialogContentClassKey = 'root' | 'dividers';
97
```
98

99
### Dialog Content Text
100

101
Text content for dialogs with proper styling.
102

103
```typescript { .api }
104
/**
105
 * Text content for dialogs with proper styling
106
 * @param props - Dialog content text props
107
 * @returns Dialog content text React component
108
 */
109
function DialogContentText(props: DialogContentTextProps): JSX.Element;
110

111
interface DialogContentTextProps extends StandardProps<TypographyProps, DialogContentTextClassKey> {}
112

113
type DialogContentTextClassKey = 'root';
114
```
115

116
### Dialog Actions
117

118
Action area of a dialog for buttons and other controls.
119

120
```typescript { .api }
121
/**
122
 * Action area of a dialog for buttons and other controls
123
 * @param props - Dialog actions props
124
 * @returns Dialog actions React component
125
 */
126
function DialogActions(props: DialogActionsProps): JSX.Element;
127

128
interface DialogActionsProps extends StandardProps<React.HTMLAttributes<HTMLDivElement>, DialogActionsClassKey> {
129
  children?: React.ReactNode;
130
  disableSpacing?: boolean;
131
}
132

133
type DialogActionsClassKey = 'root' | 'spacing';
134
```
135

136
### Snackbar
137

138
Snackbar component for displaying brief notifications.
139

140
```typescript { .api }
141
/**
142
 * Snackbar component for displaying brief notifications
143
 * @param props - Snackbar props
144
 * @returns Snackbar React component
145
 */
146
function Snackbar(props: SnackbarProps): JSX.Element;
147

148
interface SnackbarProps extends StandardProps<React.HTMLAttributes<HTMLDivElement>, SnackbarClassKey> {
149
  action?: React.ReactNode;
150
  anchorOrigin?: SnackbarOrigin;
151
  autoHideDuration?: number | null;
152
  children?: React.ReactElement<any, any>;
153
  ClickAwayListenerProps?: Partial<ClickAwayListenerProps>;
154
  ContentProps?: Partial<SnackbarContentProps>;
155
  disableWindowBlurListener?: boolean;
156
  key?: any;
157
  message?: React.ReactNode;
158
  onClose?: (event: React.SyntheticEvent<any> | null, reason: SnackbarCloseReason) => void;
159
  onEnter?: TransitionHandlerProps['onEnter'];
160
  onEntered?: TransitionHandlerProps['onEntered'];
161
  onEntering?: TransitionHandlerProps['onEntering'];
162
  onExit?: TransitionHandlerProps['onExit'];
163
  onExited?: TransitionHandlerProps['onExited'];
164
  onExiting?: TransitionHandlerProps['onExiting'];
165
  open: boolean;
166
  resumeHideDuration?: number;
167
  TransitionComponent?: React.ComponentType<TransitionProps>;
168
  transitionDuration?: TransitionProps['timeout'];
169
  TransitionProps?: TransitionProps;
170
}
171

172
interface SnackbarOrigin {
173
  horizontal: 'left' | 'center' | 'right';
174
  vertical: 'top' | 'bottom';
175
}
176

177
type SnackbarCloseReason = 'timeout' | 'clickaway';
178
type SnackbarClassKey = 'root' | 'anchorOriginTopCenter' | 'anchorOriginBottomCenter' | 'anchorOriginTopRight' | 'anchorOriginBottomRight' | 'anchorOriginTopLeft' | 'anchorOriginBottomLeft';
179
```
180

181
**Usage Examples:**
182

183
```typescript
184
import { Snackbar, IconButton } from '@material-ui/core';
185
import { Close as CloseIcon } from '@material-ui/icons';
186

187
const [open, setOpen] = useState(false);
188

189
<Snackbar
190
  open={open}
191
  autoHideDuration={6000}
192
  onClose={() => setOpen(false)}
193
  message="This is a notification message"
194
  action={
195
    <IconButton size="small" color="inherit" onClick={() => setOpen(false)}>
196
      <CloseIcon fontSize="small" />
197
    </IconButton>
198
  }
199
/>
200
```
201

202
### Snackbar Content
203

204
Content component for snackbars with message and action areas.
205

206
```typescript { .api }
207
/**
208
 * Content component for snackbars with message and action areas
209
 * @param props - Snackbar content props
210
 * @returns Snackbar content React component
211
 */
212
function SnackbarContent(props: SnackbarContentProps): JSX.Element;
213

214
interface SnackbarContentProps extends StandardProps<PaperProps, SnackbarContentClassKey> {
215
  action?: React.ReactNode;
216
  message?: React.ReactNode;
217
}
218

219
type SnackbarContentClassKey = 'root' | 'message' | 'action';
220
```
221

222
### Progress Components
223

224
#### Circular Progress
225

226
Circular progress indicator for loading states.
227

228
```typescript { .api }
229
/**
230
 * Circular progress indicator for loading states  
231
 * @param props - Circular progress props
232
 * @returns Circular progress React component
233
 */
234
function CircularProgress(props: CircularProgressProps): JSX.Element;
235

236
interface CircularProgressProps extends StandardProps<React.HTMLAttributes<HTMLDivElement>, CircularProgressClassKey> {
237
  color?: 'primary' | 'secondary' | 'inherit';
238
  disableShrink?: boolean;
239
  size?: number | string;
240
  thickness?: number;
241
  value?: number;
242
  variant?: 'determinate' | 'indeterminate' | 'static';
243
}
244

245
type CircularProgressClassKey = 'root' | 'static' | 'indeterminate' | 'colorPrimary' | 'colorSecondary' | 'svg' | 'circle' | 'circleStatic' | 'circleIndeterminate' | 'circleDisableShrink';
246
```
247

248
#### Linear Progress
249

250
Linear progress bar for loading states.
251

252
```typescript { .api }
253
/**
254
 * Linear progress bar for loading states
255
 * @param props - Linear progress props  
256
 * @returns Linear progress React component
257
 */
258
function LinearProgress(props: LinearProgressProps): JSX.Element;
259

260
interface LinearProgressProps extends StandardProps<React.HTMLAttributes<HTMLDivElement>, LinearProgressClassKey> {
261
  color?: 'primary' | 'secondary';
262
  value?: number;
263
  valueBuffer?: number;
264
  variant?: 'determinate' | 'indeterminate' | 'buffer' | 'query';
265
}
266

267
type LinearProgressClassKey = 'root' | 'colorPrimary' | 'colorSecondary' | 'determinate' | 'indeterminate' | 'buffer' | 'query' | 'dashed' | 'dashedColorPrimary' | 'dashedColorSecondary' | 'bar' | 'barColorPrimary' | 'barColorSecondary' | 'bar1Indeterminate' | 'bar1Determinate' | 'bar1Buffer' | 'bar2Indeterminate' | 'bar2Buffer';
268
```
269

270
**Usage Examples:**
271

272
```typescript
273
import { CircularProgress, LinearProgress, Box } from '@material-ui/core';
274

275
// Circular progress
276
<CircularProgress />
277
<CircularProgress color="secondary" />
278
<CircularProgress variant="determinate" value={75} />
279

280
// Linear progress
281
<LinearProgress />
282
<LinearProgress color="secondary" />
283
<LinearProgress variant="determinate" value={50} />
284

285
// Progress with label
286
<Box display="flex" alignItems="center">
287
  <Box width="100%" mr={1}>
288
    <LinearProgress variant="determinate" value={progress} />
289
  </Box>
290
  <Box minWidth={35}>
291
    <Typography variant="body2" color="textSecondary">{`${Math.round(progress)}%`}</Typography>
292
  </Box>
293
</Box>
294
```
295

296
### Tooltip
297

298
Tooltip component for displaying contextual information on hover.
299

300
```typescript { .api }
301
/**
302
 * Tooltip component for displaying contextual information on hover
303
 * @param props - Tooltip props
304
 * @returns Tooltip React component
305
 */
306
function Tooltip(props: TooltipProps): JSX.Element;
307

308
interface TooltipProps extends StandardProps<React.HTMLAttributes<HTMLDivElement>, TooltipClassKey> {
309
  arrow?: boolean;
310
  children: React.ReactElement<any, any>;
311
  disableFocusListener?: boolean;
312
  disableHoverListener?: boolean;
313
  disableTouchListener?: boolean;
314
  enterDelay?: number;
315
  enterNextDelay?: number;
316
  enterTouchDelay?: number;
317
  id?: string;
318
  interactive?: boolean;
319
  leaveDelay?: number;
320
  leaveTouchDelay?: number;
321
  onClose?: (event: React.SyntheticEvent) => void;
322
  onOpen?: (event: React.SyntheticEvent) => void;
323
  open?: boolean;
324
  placement?: TooltipPlacement;
325
  PopperComponent?: React.ComponentType<PopperProps>;
326
  PopperProps?: Partial<PopperProps>;
327
  title: React.ReactNode;
328
  TransitionComponent?: React.ComponentType<TransitionProps>;
329
  TransitionProps?: TransitionProps;
330
}
331

332
type TooltipPlacement = 'bottom-end' | 'bottom-start' | 'bottom' | 'left-end' | 'left-start' | 'left' | 'right-end' | 'right-start' | 'right' | 'top-end' | 'top-start' | 'top';
333
type TooltipClassKey = 'popper' | 'popperInteractive' | 'popperArrow' | 'tooltip' | 'tooltipArrow' | 'arrow' | 'touch' | 'tooltipPlacementLeft' | 'tooltipPlacementRight' | 'tooltipPlacementTop' | 'tooltipPlacementBottom';
334
```
335

336
**Usage Examples:**
337

338
```typescript
339
import { Tooltip, Button, IconButton } from '@material-ui/core';
340
import { Delete as DeleteIcon } from '@material-ui/icons';
341

342
// Basic tooltip
343
<Tooltip title="Delete">
344
  <IconButton>
345
    <DeleteIcon />
346
  </IconButton>
347
</Tooltip>
348

349
// Tooltip with custom placement and arrow
350
<Tooltip title="Add item to cart" placement="top" arrow>
351
  <Button variant="contained" color="primary">
352
    Add to Cart  
353
  </Button>
354
</Tooltip>
355

356
// Interactive tooltip
357
<Tooltip
358
  title="This tooltip is interactive"
359
  interactive
360
  placement="right"
361
>
362
  <Button>Interactive Tooltip</Button>
363
</Tooltip>
364
```
365

366
### Backdrop
367

368
Backdrop component for creating overlay effects behind dialogs and drawers.
369

370
```typescript { .api }
371
/**
372
 * Backdrop component for creating overlay effects behind dialogs and drawers
373
 * @param props - Backdrop props
374
 * @returns Backdrop React component
375
 */
376
function Backdrop(props: BackdropProps): JSX.Element;
377

378
interface BackdropProps extends StandardProps<React.HTMLAttributes<HTMLDivElement>, BackdropClassKey> {
379
  children?: React.ReactNode;
380
  invisible?: boolean;
381
  open: boolean;
382
  transitionDuration?: TransitionProps['timeout'];
383
}
384

385
type BackdropClassKey = 'root' | 'invisible';
386
```
387

388
### Expansion Panel Components
389

390
#### Expansion Panel
391

392
Expandable panel component for collapsible content sections.
393

394
```typescript { .api }
395
/**
396
 * Expandable panel component for collapsible content sections
397
 * @param props - Expansion panel props
398
 * @returns Expansion panel React component
399
 */
400
function ExpansionPanel(props: ExpansionPanelProps): JSX.Element;
401

402
interface ExpansionPanelProps extends StandardProps<PaperProps, ExpansionPanelClassKey> {
403
  children: React.ReactNode;
404
  defaultExpanded?: boolean;
405
  disabled?: boolean;
406
  expanded?: boolean;
407
  onChange?: (event: React.ChangeEvent<{}>, expanded: boolean) => void;
408
  TransitionComponent?: React.ComponentType<TransitionProps>;
409
  TransitionProps?: TransitionProps;
410
}
411

412
type ExpansionPanelClassKey = 'root' | 'rounded' | 'expanded' | 'disabled';
413
```
414

415
#### Expansion Panel Summary
416

417
Header/summary area of an expansion panel.
418

419
```typescript { .api }
420
/**
421
 * Header/summary area of an expansion panel
422
 * @param props - Expansion panel summary props
423
 * @returns Expansion panel summary React component
424
 */
425
function ExpansionPanelSummary(props: ExpansionPanelSummaryProps): JSX.Element;
426

427
interface ExpansionPanelSummaryProps extends StandardProps<ButtonBaseProps, ExpansionPanelSummaryClassKey> {
428
  children?: React.ReactNode;
429
  expandIcon?: React.ReactNode;
430
  IconButtonProps?: Partial<IconButtonProps>;
431
}
432

433
type ExpansionPanelSummaryClassKey = 'root' | 'expanded' | 'focused' | 'disabled' | 'content' | 'contentExpanded' | 'expandIcon' | 'expandIconExpanded';
434
```
435

436
#### Expansion Panel Details
437

438
Content area of an expansion panel.
439

440
```typescript { .api }
441
/**
442
 * Content area of an expansion panel
443
 * @param props - Expansion panel details props
444
 * @returns Expansion panel details React component
445
 */
446
function ExpansionPanelDetails(props: ExpansionPanelDetailsProps): JSX.Element;
447

448
interface ExpansionPanelDetailsProps extends StandardProps<React.HTMLAttributes<HTMLDivElement>, ExpansionPanelDetailsClassKey> {
449
  children?: React.ReactNode;
450
}
451

452
type ExpansionPanelDetailsClassKey = 'root';
453
```
454

455
#### Expansion Panel Actions
456

457
Action area of an expansion panel for buttons and controls.
458

459
```typescript { .api }
460
/**
461
 * Action area of an expansion panel for buttons and controls
462
 * @param props - Expansion panel actions props
463
 * @returns Expansion panel actions React component
464
 */
465
function ExpansionPanelActions(props: ExpansionPanelActionsProps): JSX.Element;
466

467
interface ExpansionPanelActionsProps extends StandardProps<React.HTMLAttributes<HTMLDivElement>, ExpansionPanelActionsClassKey> {
468
  children?: React.ReactNode;
469
  disableSpacing?: boolean;
470
}
471

472
type ExpansionPanelActionsClassKey = 'root' | 'spacing';
473
```
474

475
**Usage Examples:**
476

477
```typescript
478
import { 
479
  ExpansionPanel, 
480
  ExpansionPanelSummary, 
481
  ExpansionPanelDetails, 
482
  ExpansionPanelActions,
483
  Typography,
484
  Button
485
} from '@material-ui/core';
486
import { ExpandMore as ExpandMoreIcon } from '@material-ui/icons';
487

488
<ExpansionPanel>
489
  <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
490
    <Typography variant="h6">General Settings</Typography>
491
  </ExpansionPanelSummary>
492
  <ExpansionPanelDetails>
493
    <Typography>
494
      Configure your general application settings here.
495
    </Typography>
496
  </ExpansionPanelDetails>
497
  <ExpansionPanelActions>
498
    <Button size="small">Cancel</Button>
499
    <Button size="small" color="primary">Save</Button>
500
  </ExpansionPanelActions>
501
</ExpansionPanel>
502
```