0
# Feedback Components
1

2
User feedback components including alerts, progress indicators, dialogs, and snackbars.
3

4
## Capabilities
5

6
### Alert
7

8
Alert component for displaying important messages with different severity levels.
9

10
```typescript { .api }
11
/**
12
 * Alert component for important messages
13
 * @param props - Alert configuration
14
 * @returns Alert component
15
 */
16
function Alert(props: AlertProps): JSX.Element;
17

18
interface AlertProps extends CommonProps {
19
  /** The action to display */
20
  action?: React.ReactNode;
21
  /** Override the default label for the close popup icon button */
22
  closeText?: string;
23
  /** The main color of the Alert */
24
  color?: 'error' | 'info' | 'success' | 'warning';
25
  /** Override the icon displayed before the children */
26
  icon?: React.ReactNode;
27
  /** The component maps the severity prop to a range of different icons */
28
  iconMapping?: Partial<{
29
    error: React.ReactNode;
30
    info: React.ReactNode;
31
    success: React.ReactNode;
32
    warning: React.ReactNode;
33
  }>;
34
  /** Callback fired when the component requests to be closed */
35
  onClose?: (event: React.SyntheticEvent) => void;
36
  /** The ARIA role attribute of the element */
37
  role?: string;
38
  /** The severity of the alert */
39
  severity?: 'error' | 'info' | 'success' | 'warning';
40
  /** The variant to use */
41
  variant?: 'filled' | 'outlined' | 'standard';
42
  children?: React.ReactNode;
43
}
44
```
45

46
### Progress Indicators
47

48
Circular and linear progress indicators for loading states.
49

50
```typescript { .api }
51
/**
52
 * Circular progress indicator
53
 * @param props - CircularProgress configuration
54
 * @returns CircularProgress component
55
 */
56
function CircularProgress(props: CircularProgressProps): JSX.Element;
57

58
/**
59
 * Linear progress indicator
60
 * @param props - LinearProgress configuration
61
 * @returns LinearProgress component
62
 */
63
function LinearProgress(props: LinearProgressProps): JSX.Element;
64

65
interface CircularProgressProps extends CommonProps {
66
  /** The color of the component */
67
  color?: 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning' | 'inherit';
68
  /** If true, the shrink animation is disabled */
69
  disableShrink?: boolean;
70
  /** The size of the component */
71
  size?: number | string;
72
  /** The thickness of the circle */
73
  thickness?: number;
74
  /** The value of the progress indicator for the determinate variant */
75
  value?: number;
76
  /** The variant to use */
77
  variant?: 'determinate' | 'indeterminate';
78
}
79

80
interface LinearProgressProps extends CommonProps {
81
  /** The color of the component */
82
  color?: 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning' | 'inherit';
83
  /** The value of the progress indicator for the determinate and buffer variants */
84
  value?: number;
85
  /** The value for the buffer variant */
86
  valueBuffer?: number;
87
  /** The variant to use */
88
  variant?: 'determinate' | 'indeterminate' | 'buffer' | 'query';
89
}
90
```
91

92
### Dialog
93

94
Dialog component for modal content and user interaction.
95

96
```typescript { .api }
97
/**
98
 * Dialog component for modal content
99
 * @param props - Dialog configuration
100
 * @returns Dialog component
101
 */
102
function Dialog(props: DialogProps): JSX.Element;
103

104
/**
105
 * Title section of dialog
106
 * @param props - DialogTitle configuration
107
 * @returns DialogTitle component
108
 */
109
function DialogTitle(props: DialogTitleProps): JSX.Element;
110

111
/**
112
 * Main dialog content area
113
 * @param props - DialogContent configuration
114
 * @returns DialogContent component
115
 */
116
function DialogContent(props: DialogContentProps): JSX.Element;
117

118
/**
119
 * Container for dialog actions
120
 * @param props - DialogActions configuration
121
 * @returns DialogActions component
122
 */
123
function DialogActions(props: DialogActionsProps): JSX.Element;
124

125
interface DialogProps extends CommonProps {
126
  /** The id(s) of the element(s) that describe the dialog */
127
  'aria-describedby'?: string;
128
  /** The id(s) of the element(s) that label the dialog */
129
  'aria-labelledby'?: string;
130
  /** If true, the dialog is full-screen */
131
  fullScreen?: boolean;
132
  /** If true, the dialog stretches to maxWidth */
133
  fullWidth?: boolean;
134
  /** Determine the max-width of the dialog */
135
  maxWidth?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | false;
136
  /** Callback fired when the component requests to be closed */
137
  onClose?: (event: {}, reason: 'escapeKeyDown' | 'backdropClick') => void;
138
  /** If true, the component is shown */
139
  open: boolean;
140
  /** The component used to render the body of the dialog */
141
  PaperComponent?: React.ComponentType<PaperProps>;
142
  /** Props applied to the Paper element */
143
  PaperProps?: Partial<PaperProps>;
144
  /** Determine the container for scrolling the dialog */
145
  scroll?: 'body' | 'paper';
146
  /** The component used for the transition */
147
  TransitionComponent?: React.ComponentType<TransitionProps>;
148
  /** The duration for the transition */
149
  transitionDuration?: TransitionProps['timeout'];
150
  /** Props applied to the transition element */
151
  TransitionProps?: TransitionProps;
152
  children?: React.ReactNode;
153
}
154

155
interface DialogTitleProps extends CommonProps {
156
  children?: React.ReactNode;
157
}
158

159
interface DialogContentProps extends CommonProps {
160
  /** Display the top and bottom dividers */
161
  dividers?: boolean;
162
  children?: React.ReactNode;
163
}
164

165
interface DialogActionsProps extends CommonProps {
166
  /** If true, the actions do not have additional margin */
167
  disableSpacing?: boolean;
168
  children?: React.ReactNode;
169
}
170
```
171

172
### Snackbar
173

174
Brief message component displayed at the bottom of the screen.
175

176
```typescript { .api }
177
/**
178
 * Brief message component at bottom of screen
179
 * @param props - Snackbar configuration
180
 * @returns Snackbar component
181
 */
182
function Snackbar(props: SnackbarProps): JSX.Element;
183

184
interface SnackbarProps extends CommonProps {
185
  /** The action to display */
186
  action?: React.ReactNode;
187
  /** The anchor of the Snackbar */
188
  anchorOrigin?: {
189
    vertical: 'top' | 'bottom';
190
    horizontal: 'left' | 'center' | 'right';
191
  };
192
  /** The number of milliseconds to wait before automatically calling onClose */
193
  autoHideDuration?: number | null;
194
  /** Props applied to the ClickAwayListener element */
195
  ClickAwayListenerProps?: Partial<ClickAwayListenerProps>;
196
  /** Props applied to the SnackbarContent element */
197
  ContentProps?: Partial<SnackbarContentProps>;
198
  /** If true, the autoHideDuration timer will expire even if the window is not focused */
199
  disableWindowBlurListener?: boolean;
200
  /** When displaying multiple consecutive Snackbars from a parent rendering a single <Snackbar/> */
201
  key?: any;
202
  /** The message to display */
203
  message?: React.ReactNode;
204
  /** Callback fired when the component requests to be closed */
205
  onClose?: (event: React.SyntheticEvent | Event, reason: string) => void;
206
  /** If true, the component is shown */
207
  open?: boolean;
208
  /** The number of milliseconds to wait before dismissing after user interaction */
209
  resumeHideDuration?: number;
210
  /** The component used for the transition */
211
  TransitionComponent?: React.ComponentType<TransitionProps>;
212
  /** The duration for the transition */
213
  transitionDuration?: TransitionProps['timeout'];
214
  /** Props applied to the transition element */
215
  TransitionProps?: TransitionProps;
216
}
217
```
218

219
**Usage Examples:**
220

221
```typescript
222
import { 
223
  Alert, 
224
  AlertTitle,
225
  CircularProgress, 
226
  LinearProgress,
227
  Dialog,
228
  DialogTitle,
229
  DialogContent,
230
  DialogActions,
231
  Snackbar,
232
  Button,
233
  Box
234
} from "@mui/material";
235

236
// Alert examples
237
<Alert severity="success">
238
  <AlertTitle>Success</AlertTitle>
239
  This is a success alert — check it out!
240
</Alert>
241

242
<Alert severity="error" onClose={() => setShowAlert(false)}>
243
  This is an error alert with close action.
244
</Alert>
245

246
// Progress indicators
247
<Box sx={{ display: 'flex', gap: 2, alignItems: 'center' }}>
248
  <CircularProgress />
249
  <CircularProgress color="secondary" />
250
  <CircularProgress variant="determinate" value={75} />
251
</Box>
252

253
<Box sx={{ width: '100%' }}>
254
  <LinearProgress />
255
  <LinearProgress variant="determinate" value={50} />
256
</Box>
257

258
// Dialog example
259
<Dialog open={dialogOpen} onClose={handleClose} maxWidth="sm" fullWidth>
260
  <DialogTitle>Confirm Action</DialogTitle>
261
  <DialogContent>
262
    Are you sure you want to delete this item? This action cannot be undone.
263
  </DialogContent>
264
  <DialogActions>
265
    <Button onClick={handleClose}>Cancel</Button>
266
    <Button onClick={handleConfirm} variant="contained" color="error">
267
      Delete
268
    </Button>
269
  </DialogActions>
270
</Dialog>
271

272
// Snackbar example
273
<Snackbar
274
  open={snackbarOpen}
275
  autoHideDuration={6000}
276
  onClose={handleSnackbarClose}
277
  message="Item successfully saved"
278
  action={
279
    <Button color="inherit" size="small" onClick={handleSnackbarClose}>
280
      Close
281
    </Button>
282
  }
283
/>
284
```
285

286
### Skeleton
287

288
Skeleton placeholder component for loading states.
289

290
```typescript { .api }
291
/**
292
 * Skeleton placeholder for loading states
293
 * @param props - Skeleton configuration
294
 * @returns Skeleton component
295
 */
296
function Skeleton(props: SkeletonProps): JSX.Element;
297

298
interface SkeletonProps extends CommonProps {
299
  /** The animation effect */
300
  animation?: 'pulse' | 'wave' | false;
301
  /** The component used for the root node */
302
  component?: React.ElementType;
303
  /** Height of the skeleton */
304
  height?: number | string;
305
  /** The type of content that will be rendered */
306
  variant?: 'text' | 'rectangular' | 'rounded' | 'circular';
307
  /** Width of the skeleton */
308
  width?: number | string;
309
  children?: React.ReactNode;
310
}
311
```
312

313
**Usage Examples:**
314

315
```typescript
316
import { Skeleton, Card, CardContent, Typography, Box } from "@mui/material";
317

318
// Loading card skeleton
319
<Card>
320
  <CardContent>
321
    <Box sx={{ display: 'flex', alignItems: 'center', mb: 2 }}>
322
      <Skeleton variant="circular" width={40} height={40} />
323
      <Box sx={{ ml: 2, flex: 1 }}>
324
        <Skeleton variant="text" width="60%" />
325
        <Skeleton variant="text" width="40%" />
326
      </Box>
327
    </Box>
328
    <Skeleton variant="rectangular" height={200} />
329
    <Box sx={{ mt: 2 }}>
330
      <Skeleton variant="text" />
331
      <Skeleton variant="text" width="80%" />
332
    </Box>
333
  </CardContent>
334
</Card>
335

336
// Text loading skeleton
337
<Box>
338
  <Skeleton variant="text" sx={{ fontSize: '2rem' }} />
339
  <Skeleton variant="text" />
340
  <Skeleton variant="text" width="60%" />
341
</Box>
342
```
343

344
### Modal
345

346
Base modal component for overlaying content on the current page.
347

348
```typescript { .api }
349
/**
350
 * Base modal component for overlaying content on the current page
351
 * @param props - Modal configuration
352
 * @returns Modal component
353
 */
354
function Modal(props: ModalProps): JSX.Element;
355

356
interface ModalProps extends CommonProps {
357
  /** A single child content element */
358
  children: React.ReactElement;
359
  /** If true, the component is shown */
360
  open: boolean;
361
  /** Callback fired when the component requests to be closed */
362
  onClose?: (event: {}, reason: 'backdropClick' | 'escapeKeyDown') => void;
363
  /** If true, the modal will not automatically shift focus to itself */
364
  disableAutoFocus?: boolean;
365
  /** If true, the modal will not prevent focus from leaving the modal */
366
  disableEnforceFocus?: boolean;
367
  /** If true, hitting escape will not fire the onClose callback */
368
  disableEscapeKeyDown?: boolean;
369
  /** If true, the modal will not restore focus to previously focused element after closing */
370
  disableRestoreFocus?: boolean;
371
  /** If true, the backdrop will not shift the scrollbar */
372
  disableScrollLock?: boolean;
373
  /** If true, clicking the backdrop will not fire the onClose callback */
374
  hideBackdrop?: boolean;
375
  /** If true, the modal will restore focus to previously focused element on close */
376
  keepMounted?: boolean;
377
}
378
```
379

380
**Usage Examples:**
381

382
```typescript
383
import { Modal, Box, Typography, Button } from "@mui/material";
384

385
const [open, setOpen] = React.useState(false);
386

387
// Basic modal
388
<Modal
389
  open={open}
390
  onClose={() => setOpen(false)}
391
>
392
  <Box sx={{
393
    position: 'absolute',
394
    top: '50%',
395
    left: '50%',
396
    transform: 'translate(-50%, -50%)',
397
    width: 400,
398
    bgcolor: 'background.paper',
399
    border: '2px solid #000',
400
    boxShadow: 24,
401
    p: 4,
402
  }}>
403
    <Typography variant="h6">Modal Title</Typography>
404
    <Typography sx={{ mt: 2 }}>
405
      Modal content goes here
406
    </Typography>
407
    <Button onClick={() => setOpen(false)} sx={{ mt: 2 }}>
408
      Close
409
    </Button>
410
  </Box>
411
</Modal>
412
```
413

414
### Backdrop
415

416
Backdrop component for displaying overlay behind modal content.
417

418
```typescript { .api }
419
/**
420
 * Backdrop component for displaying overlay behind modal content
421
 * @param props - Backdrop configuration
422
 * @returns Backdrop component
423
 */
424
function Backdrop(props: BackdropProps): JSX.Element;
425

426
interface BackdropProps extends CommonProps {
427
  /** The content of the component */
428
  children?: React.ReactNode;
429
  /** If true, the backdrop is invisible */
430
  invisible?: boolean;
431
  /** If true, the backdrop is open */
432
  open: boolean;
433
  /** The component used for the transition */
434
  TransitionComponent?: React.ComponentType<any>;
435
  /** The duration for the transition */
436
  transitionDuration?: number | { appear?: number; enter?: number; exit?: number };
437
  /** Callback fired when clicked */
438
  onClick?: React.MouseEventHandler<HTMLDivElement>;
439
}
440
```
441

442
**Usage Examples:**
443

444
```typescript
445
import { Backdrop, CircularProgress, Button } from "@mui/material";
446

447
const [open, setOpen] = React.useState(false);
448

449
// Loading backdrop
450
<Backdrop
451
  sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}
452
  open={open}
453
  onClick={() => setOpen(false)}
454
>
455
  <CircularProgress color="inherit" />
456
</Backdrop>
457

458
// Trigger button
459
<Button onClick={() => setOpen(true)}>
460
  Show Backdrop
461
</Button>
462
```
463

464
### AlertTitle
465

466
Title component for Alert messages.
467

468
```typescript { .api }
469
/**
470
 * Title component for Alert messages
471
 * @param props - AlertTitle configuration
472
 * @returns AlertTitle component
473
 */
474
function AlertTitle(props: AlertTitleProps): JSX.Element;
475

476
interface AlertTitleProps extends CommonProps {
477
  /** The content of the component */
478
  children?: React.ReactNode;
479
}
480
```
481

482
**Usage Examples:**
483

484
```typescript
485
import { Alert, AlertTitle } from "@mui/material";
486

487
// Alert with title
488
<Alert severity="error">
489
  <AlertTitle>Error</AlertTitle>
490
  This is an error alert — check it out!
491
</Alert>
492

493
<Alert severity="warning">
494
  <AlertTitle>Warning</AlertTitle>
495
  This is a warning alert — check it out!
496
</Alert>
497

498
<Alert severity="info">
499
  <AlertTitle>Info</AlertTitle>
500
  This is an info alert — check it out!
501
</Alert>
502

503
<Alert severity="success">
504
  <AlertTitle>Success</AlertTitle>
505
  This is a success alert — check it out!
506
</Alert>
507
```