0
# Data Display
1

2
Components for displaying data including lists, tables, cards, and typography with consistent styling.
3

4
## Capabilities
5

6
### Chip
7

8
Compact elements that represent an input, attribute, or action with optional delete functionality.
9

10
```typescript { .api }
11
/**
12
 * Compact elements that represent input, attribute, or action
13
 * @param props - Chip configuration
14
 * @returns Chip component
15
 */
16
function Chip(props: ChipProps): JSX.Element;
17

18
interface ChipProps extends CommonProps {
19
  /** The Avatar element to display */
20
  avatar?: React.ReactElement;
21
  /** If true, the chip will appear clickable */
22
  clickable?: boolean;
23
  /** The color of the component */
24
  color?: 'default' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning';
25
  /** Override the default delete icon element */
26
  deleteIcon?: React.ReactElement;
27
  /** If true, the component is disabled */
28
  disabled?: boolean;
29
  /** Icon element */
30
  icon?: React.ReactElement;
31
  /** The content of the component */
32
  label?: React.ReactNode;
33
  /** Callback fired when the delete icon is clicked */
34
  onDelete?: React.EventHandler<any>;
35
  /** Callback fired when the chip is clicked */
36
  onClick?: React.EventHandler<React.MouseEvent>;
37
  /** The size of the Component */
38
  size?: 'small' | 'medium';
39
  /** The variant to use */
40
  variant?: 'filled' | 'outlined';
41
}
42
```
43

44
**Usage Examples:**
45

46
```typescript
47
import { Chip, Avatar } from "@mui/material";
48
import FaceIcon from "@mui/icons-material/Face";
49

50
// Basic chip
51
<Chip label="Basic chip" />
52

53
// Clickable chip
54
<Chip label="Clickable" onClick={() => console.log('clicked')} />
55

56
// Deletable chip
57
<Chip 
58
  label="Deletable" 
59
  onDelete={() => console.log('delete')}
60
/>
61

62
// Chip with avatar
63
<Chip
64
  avatar={<Avatar>M</Avatar>}
65
  label="With Avatar"
66
  variant="outlined"
67
/>
68

69
// Chip with icon
70
<Chip
71
  icon={<FaceIcon />}
72
  label="With Icon"
73
  color="primary"
74
/>
75
```
76

77
### Typography
78

79
Typography component for displaying text with Material Design typography scale.
80

81
```typescript { .api }
82
/**
83
 * Typography component for text display
84
 * @param props - Typography configuration
85
 * @returns Typography component
86
 */
87
function Typography(props: TypographyProps): JSX.Element;
88

89
interface TypographyProps extends CommonProps {
90
  /** Set the text-align on the component */
91
  align?: 'inherit' | 'left' | 'center' | 'right' | 'justify';
92
  /** The component used for the root node */
93
  component?: React.ElementType;
94
  /** If true, the text will have a bottom margin */
95
  gutterBottom?: boolean;
96
  /** If true, the text will not wrap, but instead will truncate with a text overflow ellipsis */
97
  noWrap?: boolean;
98
  /** If true, the text will have a paragraph styling */
99
  paragraph?: boolean;
100
  /** Applies the theme typography styles */
101
  variant?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'subtitle1' | 'subtitle2' | 'body1' | 'body2' | 'caption' | 'button' | 'overline' | 'inherit';
102
  children?: React.ReactNode;
103
}
104
```
105

106
### List
107

108
List component for displaying content in organized rows.
109

110
```typescript { .api }
111
/**
112
 * List component for displaying content in rows
113
 * @param props - List configuration
114
 * @returns List component
115
 */
116
function List(props: ListProps): JSX.Element;
117

118
/**
119
 * Individual list item
120
 * @param props - ListItem configuration
121
 * @returns ListItem component
122
 */
123
function ListItem(props: ListItemProps): JSX.Element;
124

125
/**
126
 * Text content for list items
127
 * @param props - ListItemText configuration
128
 * @returns ListItemText component
129
 */
130
function ListItemText(props: ListItemTextProps): JSX.Element;
131

132
interface ListProps extends CommonProps {
133
  /** If true, compact vertical padding designed for keyboard and mouse input is used for the list and list items */
134
  dense?: boolean;
135
  /** If true, vertical padding is removed from the list */
136
  disablePadding?: boolean;
137
  /** The content of the subheader, normally ListSubheader */
138
  subheader?: React.ReactNode;
139
  children?: React.ReactNode;
140
}
141

142
interface ListItemProps extends CommonProps {
143
  /** Defines the align-items style property */
144
  alignItems?: 'flex-start' | 'center';
145
  /** If true, the list item is focused during the first mount */
146
  autoFocus?: boolean;
147
  /** The component used for the root node */
148
  component?: React.ElementType;
149
  /** If true, compact vertical padding designed for keyboard and mouse input is used */
150
  dense?: boolean;
151
  /** If true, the component is disabled */
152
  disabled?: boolean;
153
  /** If true, the left and right padding is removed */
154
  disableGutters?: boolean;
155
  /** If true, all padding is removed */
156
  disablePadding?: boolean;
157
  /** If true, a 1px light border is added to the bottom of the list item */
158
  divider?: boolean;
159
  /** The element to display at the end of ListItem */
160
  secondaryAction?: React.ReactNode;
161
  /** If true, the component is selected */
162
  selected?: boolean;
163
  children?: React.ReactNode;
164
}
165

166
interface ListItemTextProps extends CommonProps {
167
  /** If true, the children are formatted to use typography body1 instead of body2 */
168
  disableTypography?: boolean;
169
  /** If true, the children are indented */
170
  inset?: boolean;
171
  /** The main content element */
172
  primary?: React.ReactNode;
173
  /** These props will be forwarded to the primary typography component */
174
  primaryTypographyProps?: TypographyProps;
175
  /** The secondary content element */
176
  secondary?: React.ReactNode;
177
  /** These props will be forwarded to the secondary typography component */
178
  secondaryTypographyProps?: TypographyProps;
179
}
180
```
181

182
**Usage Examples:**
183

184
```typescript
185
import { 
186
  List, 
187
  ListItem, 
188
  ListItemText, 
189
  ListItemIcon, 
190
  ListItemButton,
191
  Typography 
192
} from "@mui/material";
193
import InboxIcon from "@mui/icons-material/Inbox";
194

195
// Basic typography
196
<Typography variant="h1" gutterBottom>
197
  Main Heading
198
</Typography>
199
<Typography variant="body1" paragraph>
200
  This is a paragraph of body text using the Material Design typography scale.
201
</Typography>
202

203
// Simple list
204
<List>
205
  <ListItem>
206
    <ListItemText primary="Item 1" />
207
  </ListItem>
208
  <ListItem>
209
    <ListItemText primary="Item 2" secondary="Secondary text" />
210
  </ListItem>
211
</List>
212

213
// Interactive list with icons
214
<List>
215
  <ListItemButton>
216
    <ListItemIcon>
217
      <InboxIcon />
218
    </ListItemIcon>
219
    <ListItemText primary="Inbox" secondary="5 unread messages" />
220
  </ListItemButton>
221
</List>
222
```
223

224
**Additional List Components:**
225

226
```typescript { .api }
227
/**
228
 * Clickable list item component for interactive lists
229
 * @param props - ListItemButton configuration
230
 * @returns ListItemButton component
231
 */
232
function ListItemButton(props: ListItemButtonProps): JSX.Element;
233

234
/**
235
 * Icon container for list items
236
 * @param props - ListItemIcon configuration
237
 * @returns ListItemIcon component
238
 */
239
function ListItemIcon(props: ListItemIconProps): JSX.Element;
240

241
/**
242
 * Avatar container for list items
243
 * @param props - ListItemAvatar configuration
244
 * @returns ListItemAvatar component
245
 */
246
function ListItemAvatar(props: ListItemAvatarProps): JSX.Element;
247

248
/**
249
 * Secondary action area for list items
250
 * @param props - ListItemSecondaryAction configuration
251
 * @returns ListItemSecondaryAction component
252
 */
253
function ListItemSecondaryAction(props: ListItemSecondaryActionProps): JSX.Element;
254

255
/**
256
 * Subheader for list sections
257
 * @param props - ListSubheader configuration
258
 * @returns ListSubheader component
259
 */
260
function ListSubheader(props: ListSubheaderProps): JSX.Element;
261

262
interface ListItemButtonProps extends CommonProps {
263
  /** If true, the list item is focused during the first mount */
264
  autoFocus?: boolean;
265
  /** If true, the list item is disabled */
266
  disabled?: boolean;
267
  /** If true, compact vertical padding designed for keyboard and mouse input is used */
268
  dense?: boolean;
269
  /** If true, the left and right padding is removed */
270
  divider?: boolean;
271
  /** If true, the list item is selected */
272
  selected?: boolean;
273
  /** Callback fired when clicked */
274
  onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
275
  children?: React.ReactNode;
276
}
277

278
interface ListItemIconProps extends CommonProps {
279
  children?: React.ReactNode;
280
}
281

282
interface ListItemAvatarProps extends CommonProps {
283
  children?: React.ReactNode;
284
}
285

286
interface ListItemSecondaryActionProps extends CommonProps {
287
  children?: React.ReactNode;
288
}
289

290
interface ListSubheaderProps extends CommonProps {
291
  /** The color of the component */
292
  color?: 'default' | 'primary' | 'inherit';
293
  /** If true, the List Subheader will not have gutters */
294
  disableGutters?: boolean;
295
  /** If true, the List Subheader will be indented */
296
  inset?: boolean;
297
  /** If true, the List Subheader is displayed in a sticky position */
298
  disableSticky?: boolean;
299
  children?: React.ReactNode;
300
}
301
```
302

303
**Usage Examples:**
304

305
```typescript
306
import { 
307
  List, 
308
  ListItemButton, 
309
  ListItemIcon, 
310
  ListItemText, 
311
  ListItemAvatar, 
312
  ListItemSecondaryAction, 
313
  ListSubheader,
314
  Avatar,
315
  IconButton
316
} from "@mui/material";
317
import { Inbox, Drafts, Delete } from "@mui/icons-material";
318

319
// List with subheaders and interactive buttons
320
<List>
321
  <ListSubheader>Recent Messages</ListSubheader>
322
  <ListItemButton>
323
    <ListItemAvatar>
324
      <Avatar>JD</Avatar>
325
    </ListItemAvatar>
326
    <ListItemText 
327
      primary="John Doe" 
328
      secondary="Hello, how are you doing today?" 
329
    />
330
    <ListItemSecondaryAction>
331
      <IconButton edge="end">
332
        <Delete />
333
      </IconButton>
334
    </ListItemSecondaryAction>
335
  </ListItemButton>
336
  
337
  <ListSubheader>Folders</ListSubheader>
338
  <ListItemButton>
339
    <ListItemIcon>
340
      <Inbox />
341
    </ListItemIcon>
342
    <ListItemText primary="Inbox" secondary="5 unread" />
343
  </ListItemButton>
344
  <ListItemButton>
345
    <ListItemIcon>
346
      <Drafts />
347
    </ListItemIcon>
348
    <ListItemText primary="Drafts" secondary="2 items" />
349
  </ListItemButton>
350
</List>
351
```
352

353
### Table
354

355
Table component for displaying tabular data with sorting and pagination support.
356

357
```typescript { .api }
358
/**
359
 * Table component for tabular data
360
 * @param props - Table configuration
361
 * @returns Table component
362
 */
363
function Table(props: TableProps): JSX.Element;
364

365
/**
366
 * Individual table cell
367
 * @param props - TableCell configuration
368
 * @returns TableCell component
369
 */
370
function TableCell(props: TableCellProps): JSX.Element;
371

372
/**
373
 * Table row component
374
 * @param props - TableRow configuration
375
 * @returns TableRow component
376
 */
377
function TableRow(props: TableRowProps): JSX.Element;
378

379
interface TableProps extends CommonProps {
380
  /** The component used for the root node */
381
  component?: React.ElementType;
382
  /** Allows TableCells to inherit size of the Table */
383
  padding?: 'normal' | 'checkbox' | 'none';
384
  /** Allows TableCells to inherit size of the Table */
385
  size?: 'small' | 'medium';
386
  /** Set the header sticky */
387
  stickyHeader?: boolean;
388
  children?: React.ReactNode;
389
}
390

391
interface TableCellProps extends CommonProps {
392
  /** Set the text-align on the table cell content */
393
  align?: 'inherit' | 'left' | 'center' | 'right' | 'justify';
394
  /** The component used for the root node */
395
  component?: React.ElementType;
396
  /** Sets the padding applied to the cell */
397
  padding?: 'normal' | 'checkbox' | 'none';
398
  /** Set scope attribute */
399
  scope?: string;
400
  /** Specify the size of the cell */
401
  size?: 'small' | 'medium';
402
  /** Set aria-sort direction */
403
  sortDirection?: 'asc' | 'desc' | false;
404
  /** Specify the cell type */
405
  variant?: 'head' | 'body' | 'footer';
406
  children?: React.ReactNode;
407
}
408

409
interface TableRowProps extends CommonProps {
410
  /** If true, the table row will shade on hover */
411
  hover?: boolean;
412
  /** If true, the table row will have the selected shading */
413
  selected?: boolean;
414
  children?: React.ReactNode;
415
}
416
```
417

418
**Additional Table Components:**
419

420
```typescript { .api }
421
/**
422
 * Container wrapper for table scroll behavior
423
 * @param props - TableContainer configuration
424
 * @returns TableContainer component
425
 */
426
function TableContainer(props: TableContainerProps): JSX.Element;
427

428
/**
429
 * Table header section grouping
430
 * @param props - TableHead configuration  
431
 * @returns TableHead component
432
 */
433
function TableHead(props: TableHeadProps): JSX.Element;
434

435
/**
436
 * Table body section grouping
437
 * @param props - TableBody configuration
438
 * @returns TableBody component
439
 */
440
function TableBody(props: TableBodyProps): JSX.Element;
441

442
/**
443
 * Table footer section grouping
444
 * @param props - TableFooter configuration
445
 * @returns TableFooter component
446
 */
447
function TableFooter(props: TableFooterProps): JSX.Element;
448

449
/**
450
 * Sortable column header with sort indicators
451
 * @param props - TableSortLabel configuration
452
 * @returns TableSortLabel component
453
 */
454
function TableSortLabel(props: TableSortLabelProps): JSX.Element;
455

456
/**
457
 * Pagination controls for tables
458
 * @param props - TablePagination configuration
459
 * @returns TablePagination component
460
 */
461
function TablePagination(props: TablePaginationProps): JSX.Element;
462

463
interface TableContainerProps extends CommonProps {
464
  /** The component used for the root node */
465
  component?: React.ElementType;
466
  children?: React.ReactNode;
467
}
468

469
interface TableHeadProps extends CommonProps {
470
  children?: React.ReactNode;
471
}
472

473
interface TableBodyProps extends CommonProps {
474
  children?: React.ReactNode;
475
}
476

477
interface TableFooterProps extends CommonProps {
478
  children?: React.ReactNode;
479
}
480

481
interface TableSortLabelProps extends CommonProps {
482
  /** If true, the label will be active (sorted) */
483
  active?: boolean;
484
  /** The sort direction */
485
  direction?: 'asc' | 'desc';
486
  /** Hide the sort icon when not active */
487
  hideSortIcon?: boolean;
488
  /** The icon to display when sorted ascending */
489
  iconDirection?: 'asc' | 'desc';
490
  /** Callback fired when the label is clicked */
491
  onClick?: (event: React.MouseEvent<HTMLSpanElement>) => void;
492
  children?: React.ReactNode;
493
}
494

495
interface TablePaginationProps extends CommonProps {
496
  /** Accepts a function which returns a string value that provides a user-friendly name for the current page */
497
  getItemAriaLabel?: (type: 'first' | 'last' | 'next' | 'previous') => string;
498
  /** Callback fired when the page is changed */
499
  onPageChange: (event: React.MouseEvent<HTMLButtonElement> | null, page: number) => void;
500
  /** Callback fired when the number of rows per page is changed */
501
  onRowsPerPageChange?: React.ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement>;
502
  /** The zero-based index of the current page */
503
  page: number;
504
  /** The number of rows per page */
505
  rowsPerPage: number;
506
  /** Customizes the options of the rows per page select field */
507
  rowsPerPageOptions?: ReadonlyArray<number | { label: string; value: number }>;
508
  /** Customize the displayed rows label */
509
  labelRowsPerPage?: React.ReactNode;
510
  /** The total number of rows */
511
  count: number;
512
  /** The component used for displaying a select */
513
  SelectProps?: object;
514
}
515
```
516

517
**Usage Examples:**
518

519
```typescript
520
import { 
521
  Table, 
522
  TableContainer, 
523
  TableHead, 
524
  TableBody, 
525
  TableRow, 
526
  TableCell, 
527
  TableSortLabel, 
528
  TablePagination,
529
  Paper
530
} from "@mui/material";
531

532
// Complete table with sorting and pagination
533
<TableContainer component={Paper}>
534
  <Table>
535
    <TableHead>
536
      <TableRow>
537
        <TableCell>
538
          <TableSortLabel
539
            active={orderBy === 'name'}
540
            direction={orderBy === 'name' ? order : 'asc'}
541
            onClick={() => handleSort('name')}
542
          >
543
            Name
544
          </TableSortLabel>
545
        </TableCell>
546
        <TableCell>Email</TableCell>
547
        <TableCell>Role</TableCell>
548
      </TableRow>
549
    </TableHead>
550
    <TableBody>
551
      {rows.map((row) => (
552
        <TableRow key={row.id} hover>
553
          <TableCell>{row.name}</TableCell>
554
          <TableCell>{row.email}</TableCell>
555
          <TableCell>{row.role}</TableCell>
556
        </TableRow>
557
      ))}
558
    </TableBody>
559
  </Table>
560
  <TablePagination
561
    component="div"
562
    count={totalRows}
563
    page={page}
564
    onPageChange={handlePageChange}
565
    rowsPerPage={rowsPerPage}
566
    onRowsPerPageChange={handleRowsPerPageChange}
567
    rowsPerPageOptions={[5, 10, 25]}
568
  />
569
</TableContainer>
570
```
571

572
### Card
573

574
Card component for containing related information and actions.
575

576
```typescript { .api }
577
/**
578
 * Card component for containing related information
579
 * @param props - Card configuration
580
 * @returns Card component
581
 */
582
function Card(props: CardProps): JSX.Element;
583

584
/**
585
 * Header section with avatar, title, and action
586
 * @param props - CardHeader configuration
587
 * @returns CardHeader component
588
 */
589
function CardHeader(props: CardHeaderProps): JSX.Element;
590

591
/**
592
 * Main content area of a card
593
 * @param props - CardContent configuration
594
 * @returns CardContent component
595
 */
596
function CardContent(props: CardContentProps): JSX.Element;
597

598
/**
599
 * Container for card actions
600
 * @param props - CardActions configuration
601
 * @returns CardActions component
602
 */
603
function CardActions(props: CardActionsProps): JSX.Element;
604

605
interface CardProps extends CommonProps {
606
  /** If true, the card will use raised styling */
607
  raised?: boolean;
608
  children?: React.ReactNode;
609
}
610

611
interface CardHeaderProps extends CommonProps {
612
  /** The action to display in the card header */
613
  action?: React.ReactNode;
614
  /** The Avatar element to display */
615
  avatar?: React.ReactNode;
616
  /** The component used for the root node */
617
  component?: React.ElementType;
618
  /** If true, subheader and title won't be wrapped by a Typography component */
619
  disableTypography?: boolean;
620
  /** The content of the component */
621
  subheader?: React.ReactNode;
622
  /** These props will be forwarded to the subheader */
623
  subheaderTypographyProps?: TypographyProps;
624
  /** The content of the component */
625
  title?: React.ReactNode;
626
  /** These props will be forwarded to the title */
627
  titleTypographyProps?: TypographyProps;
628
}
629

630
interface CardContentProps extends CommonProps {
631
  /** The component used for the root node */
632
  component?: React.ElementType;
633
  children?: React.ReactNode;
634
}
635

636
interface CardActionsProps extends CommonProps {
637
  /** If true, the actions do not have additional margin */
638
  disableSpacing?: boolean;
639
  children?: React.ReactNode;
640
}
641
```
642

643
**Usage Examples:**
644

645
```typescript
646
import { 
647
  Card, 
648
  CardHeader, 
649
  CardContent, 
650
  CardActions, 
651
  Button, 
652
  Typography,
653
  Avatar 
654
} from "@mui/material";
655

656
// Basic card
657
<Card>
658
  <CardHeader
659
    avatar={<Avatar>R</Avatar>}
660
    title="Card Title"
661
    subheader="September 14, 2024"
662
  />
663
  <CardContent>
664
    <Typography variant="body2" color="text.secondary">
665
      This is the main content of the card. It can contain any information
666
      that needs to be displayed in a structured format.
667
    </Typography>
668
  </CardContent>
669
  <CardActions>
670
    <Button size="small">Learn More</Button>
671
    <Button size="small">Share</Button>
672
  </CardActions>
673
</Card>
674
```
675

676
### Avatar and Badge
677

678
Components for displaying user avatars and notification badges.
679

680
```typescript { .api }
681
/**
682
 * Avatar component for user photos, initials, or icons
683
 * @param props - Avatar configuration
684
 * @returns Avatar component
685
 */
686
function Avatar(props: AvatarProps): JSX.Element;
687

688
/**
689
 * Badge for displaying small amounts of data
690
 * @param props - Badge configuration
691
 * @returns Badge component
692
 */
693
function Badge(props: BadgeProps): JSX.Element;
694

695
interface AvatarProps extends CommonProps {
696
  /** Used in combination with src or srcSet to provide an alt attribute for the rendered img element */
697
  alt?: string;
698
  /** Used to render icon or text elements within the Avatar */
699
  children?: React.ReactNode;
700
  /** Attributes applied to the img element if the component is used to display an image */
701
  imgProps?: React.ImgHTMLAttributes<HTMLImageElement>;
702
  /** The sizes attribute for the img element */
703
  sizes?: string;
704
  /** The src attribute for the img element */
705
  src?: string;
706
  /** The srcSet attribute for the img element */
707
  srcSet?: string;
708
  /** The shape of the avatar */
709
  variant?: 'circular' | 'rounded' | 'square';
710
}
711

712
interface BadgeProps extends CommonProps {
713
  /** The anchor of the badge */
714
  anchorOrigin?: {
715
    vertical: 'top' | 'bottom';
716
    horizontal: 'left' | 'right';
717
  };
718
  /** The content rendered within the badge */
719
  badgeContent?: React.ReactNode;
720
  /** The color of the component */
721
  color?: 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning' | 'default';
722
  /** The component used for the root node */
723
  component?: React.ElementType;
724
  /** If true, the badge is invisible */
725
  invisible?: boolean;
726
  /** Max count to show */
727
  max?: number;
728
  /** Wrapped shape the badge should overlap */
729
  overlap?: 'rectangular' | 'circular';
730
  /** Controls whether the badge is hidden when badgeContent is zero */
731
  showZero?: boolean;
732
  /** The variant to use */
733
  variant?: 'standard' | 'dot';
734
  children?: React.ReactNode;
735
}
736
```
737

738
**Usage Examples:**
739

740
```typescript
741
import { Avatar, Badge, AvatarGroup } from "@mui/material";
742
import { deepOrange, deepPurple } from "@mui/material/colors";
743

744
// Basic avatars
745
<Avatar alt="John Doe" src="/path/to/image.jpg" />
746
<Avatar sx={{ bgcolor: deepOrange[500] }}>JD</Avatar>
747
<Avatar sx={{ bgcolor: deepPurple[500] }}>
748
  <PersonIcon />
749
</Avatar>
750

751
// Avatar group
752
<AvatarGroup max={4}>
753
  <Avatar alt="User 1" src="/user1.jpg" />
754
  <Avatar alt="User 2" src="/user2.jpg" />
755
  <Avatar alt="User 3" src="/user3.jpg" />
756
  <Avatar alt="User 4" src="/user4.jpg" />
757
  <Avatar alt="User 5" src="/user5.jpg" />
758
</AvatarGroup>
759

760
// Badge with avatar
761
<Badge badgeContent={4} color="primary">
762
  <Avatar alt="User" src="/user.jpg" />
763
</Badge>
764
```
765

766
### ImageList
767

768
Components for displaying collections of images in a structured grid layout.
769

770
```typescript { .api }
771
/**
772
 * Image list for displaying a collection of images
773
 * @param props - ImageList configuration
774
 * @returns ImageList component
775
 */
776
function ImageList(props: ImageListProps): JSX.Element;
777

778
/**
779
 * Individual item in an image list
780
 * @param props - ImageListItem configuration
781
 * @returns ImageListItem component
782
 */
783
function ImageListItem(props: ImageListItemProps): JSX.Element;
784

785
/**
786
 * Bar overlay for image list items
787
 * @param props - ImageListItemBar configuration
788
 * @returns ImageListItemBar component
789
 */
790
function ImageListItemBar(props: ImageListItemBarProps): JSX.Element;
791

792
interface ImageListProps extends CommonProps {
793
  /** Number of columns */
794
  cols?: number;
795
  /** The component used for the root node */
796
  component?: React.ElementType;
797
  /** The gap between items in px */
798
  gap?: number;
799
  /** The height of one row in px */
800
  rowHeight?: number | 'auto';
801
  /** The variant to use */
802
  variant?: 'masonry' | 'quilted' | 'standard' | 'woven';
803
  children?: React.ReactNode;
804
}
805

806
interface ImageListItemProps extends CommonProps {
807
  /** Number of columns the item should span */
808
  cols?: number;
809
  /** The component used for the root node */
810
  component?: React.ElementType;
811
  /** Number of rows the item should span */
812
  rows?: number;
813
  children?: React.ReactNode;
814
}
815

816
interface ImageListItemBarProps extends CommonProps {
817
  /** An IconButton element to be used as secondary action target */
818
  actionIcon?: React.ReactNode;
819
  /** Position of secondary action IconButton */
820
  actionPosition?: 'left' | 'right';
821
  /** Position of the title bar */
822
  position?: 'below' | 'bottom' | 'top';
823
  /** String or element serving as subtitle */
824
  subtitle?: React.ReactNode;
825
  /** String or element serving as title */
826
  title?: React.ReactNode;
827
}
828
```
829

830
**Usage Examples:**
831

832
```typescript
833
import { 
834
  ImageList, 
835
  ImageListItem, 
836
  ImageListItemBar,
837
  IconButton 
838
} from "@mui/material";
839
import InfoIcon from "@mui/icons-material/Info";
840

841
// Standard image list
842
<ImageList cols={3} rowHeight={164}>
843
  {itemData.map((item) => (
844
    <ImageListItem key={item.img}>
845
      <img
846
        src={`${item.img}?w=164&h=164&fit=crop&auto=format`}
847
        alt={item.title}
848
        loading="lazy"
849
      />
850
      <ImageListItemBar
851
        title={item.title}
852
        subtitle={item.author}
853
        actionIcon={
854
          <IconButton>
855
            <InfoIcon />
856
          </IconButton>
857
        }
858
      />
859
    </ImageListItem>
860
  ))}
861
</ImageList>
862

863
// Masonry image list
864
<ImageList variant="masonry" cols={3} gap={8}>
865
  {itemData.map((item) => (
866
    <ImageListItem key={item.img}>
867
      <img src={item.img} alt={item.title} loading="lazy" />
868
    </ImageListItem>
869
  ))}
870
</ImageList>
871
```
872

873
### Divider
874

875
Visual content separator for organizing sections and content.
876

877
```typescript { .api }
878
/**
879
 * Visual content separator for organizing sections and content
880
 * @param props - Divider configuration
881
 * @returns Divider component
882
 */
883
function Divider(props: DividerProps): JSX.Element;
884

885
interface DividerProps extends CommonProps {
886
  /** Absolutely position the element */
887
  absolute?: boolean;
888
  /** The component orientation */
889
  orientation?: 'horizontal' | 'vertical';
890
  /** If true, a vertical divider will have the correct height when used in flex container */
891
  flexItem?: boolean;
892
  /** If true, the divider will have a lighter color */
893
  light?: boolean;
894
  /** The text alignment */
895
  textAlign?: 'center' | 'left' | 'right';
896
  /** The variant to use */
897
  variant?: 'fullWidth' | 'inset' | 'middle';
898
  /** The content of the component */
899
  children?: React.ReactNode;
900
}
901
```
902

903
**Usage Examples:**
904

905
```typescript
906
import { Divider, List, ListItem, ListItemText } from "@mui/material";
907

908
// Basic horizontal divider
909
<Divider />
910

911
// Divider with text
912
<Divider>OR</Divider>
913

914
// Vertical divider
915
<Divider orientation="vertical" flexItem />
916

917
// Divider with different variants
918
<Divider variant="inset" />
919
<Divider variant="middle" />
920

921
// Divider in a list
922
<List>
923
  <ListItem>
924
    <ListItemText primary="Item 1" />
925
  </ListItem>
926
  <Divider />
927
  <ListItem>
928
    <ListItemText primary="Item 2" />
929
  </ListItem>
930
</List>
931
```
932

933
### Icon
934

935
Component for displaying font icons and icon fonts.
936

937
```typescript { .api }
938
/**
939
 * Component for displaying font icons and icon fonts
940
 * @param props - Icon configuration
941
 * @returns Icon component
942
 */
943
function Icon(props: IconProps): JSX.Element;
944

945
interface IconProps extends CommonProps {
946
  /** The name of the icon font ligature */
947
  children?: React.ReactNode;
948
  /** The color of the component */
949
  color?: 'inherit' | 'action' | 'disabled' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning';
950
  /** The fontSize applied to the icon */
951
  fontSize?: 'inherit' | 'large' | 'medium' | 'small';
952
  /** The base class name according to the icon font */
953
  baseClassName?: string;
954
}
955
```
956

957
**Usage Examples:**
958

959
```typescript
960
import { Icon } from "@mui/material";
961

962
// Material Icons font
963
<Icon>star</Icon>
964

965
// Font Awesome (with proper setup)
966
<Icon baseClassName="fas" className="fa-heart" />
967

968
// Different sizes
969
<Icon fontSize="small">home</Icon>
970
<Icon fontSize="large">settings</Icon>
971

972
// Different colors
973
<Icon color="primary">favorite</Icon>
974
<Icon color="error">error</Icon>
975
```
976

977
### SvgIcon
978

979
Wrapper component for displaying SVG icons with Material-UI styling.
980

981
```typescript { .api }
982
/**
983
 * Wrapper component for displaying SVG icons with Material-UI styling
984
 * @param props - SvgIcon configuration
985
 * @returns SvgIcon component
986
 */
987
function SvgIcon(props: SvgIconProps): JSX.Element;
988

989
interface SvgIconProps extends CommonProps {
990
  /** The color of the component */
991
  color?: 'inherit' | 'action' | 'disabled' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning';
992
  /** The fontSize applied to the icon */
993
  fontSize?: 'inherit' | 'large' | 'medium' | 'small';
994
  /** Applies a color attribute to the SVG element */
995
  htmlColor?: string;
996
  /** If true, the root node will inherit the custom component's viewBox */
997
  inheritViewBox?: boolean;
998
  /** The shape-rendering attribute */
999
  shapeRendering?: string;
1000
  /** The title attribute for accessibility */
1001
  titleAccess?: string;
1002
  /** Allows you to redefine what the coordinates without units mean inside an SVG element */
1003
  viewBox?: string;
1004
  /** SVG path or element content */
1005
  children?: React.ReactNode;
1006
}
1007
```
1008

1009
**Usage Examples:**
1010

1011
```typescript
1012
import { SvgIcon } from "@mui/material";
1013

1014
// Custom SVG icon
1015
<SvgIcon>
1016
  <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />
1017
</SvgIcon>
1018

1019
// Custom icon with color
1020
<SvgIcon color="primary">
1021
  <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
1022
</SvgIcon>
1023

1024
// Custom icon component
1025
function HomeIcon(props) {
1026
  return (
1027
    <SvgIcon {...props}>
1028
      <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />
1029
    </SvgIcon>
1030
  );
1031
}
1032

1033
<HomeIcon color="action" />
1034
```
1035

1036
### AvatarGroup
1037

1038
Component for displaying multiple avatars in a group with overflow management.
1039

1040
```typescript { .api }
1041
/**
1042
 * Component for displaying multiple avatars in a group with overflow management
1043
 * @param props - AvatarGroup configuration
1044
 * @returns AvatarGroup component
1045
 */
1046
function AvatarGroup(props: AvatarGroupProps): JSX.Element;
1047

1048
interface AvatarGroupProps extends CommonProps {
1049
  /** The avatars to render */
1050
  children?: React.ReactNode;
1051
  /** Max avatars to show before +x indicator */
1052
  max?: number;
1053
  /** Spacing between avatars */
1054
  spacing?: number | string;
1055
  /** The total number of avatars (for +x calculation) */
1056
  total?: number;
1057
  /** The variant to use for the avatars */
1058
  variant?: 'circular' | 'rounded' | 'square';
1059
}
1060
```
1061

1062
**Usage Examples:**
1063

1064
```typescript
1065
import { AvatarGroup, Avatar } from "@mui/material";
1066

1067
// Basic avatar group
1068
<AvatarGroup max={4}>
1069
  <Avatar alt="Remy Sharp" src="/avatars/1.jpg" />
1070
  <Avatar alt="Travis Howard" src="/avatars/2.jpg" />
1071
  <Avatar alt="Cindy Baker" src="/avatars/3.jpg" />
1072
  <Avatar alt="Agnes Walker" src="/avatars/4.jpg" />
1073
  <Avatar alt="Trevor Henderson" src="/avatars/5.jpg" />
1074
</AvatarGroup>
1075

1076
// Avatar group with total count
1077
<AvatarGroup max={3} total={24}>
1078
  <Avatar alt="Remy Sharp" src="/avatars/1.jpg" />
1079
  <Avatar alt="Travis Howard" src="/avatars/2.jpg" />
1080
  <Avatar alt="Cindy Baker" src="/avatars/3.jpg" />
1081
</AvatarGroup>
1082

1083
// Avatar group with custom spacing
1084
<AvatarGroup max={4} spacing="medium">
1085
  <Avatar>H</Avatar>
1086
  <Avatar>O</Avatar>
1087
  <Avatar>P</Avatar>
1088
  <Avatar>E</Avatar>
1089
</AvatarGroup>
1090
```