0
# Data Display Components
1

2
Data display components present information and content in structured, accessible formats including tables, lists, cards, typography, and iconography.
3

4
## Capabilities
5

6
### Typography
7

8
Flexible text component for displaying text content with Material Design typography variants.
9

10
```typescript { .api }
11
/**
12
 * Flexible text component for displaying text content with Material Design typography variants
13
 * @param props - Typography props
14
 * @returns Typography React component
15
 */
16
function Typography<C extends React.ElementType = 'span'>(props: TypographyProps<C>): JSX.Element;
17

18
interface TypographyProps<C extends React.ElementType = React.ElementType> extends StandardProps<React.HTMLAttributes<HTMLElement>, TypographyClassKey> {
19
  align?: 'inherit' | 'left' | 'center' | 'right' | 'justify';
20
  children?: React.ReactNode;
21
  color?: 'inherit' | 'primary' | 'secondary' | 'textPrimary' | 'textSecondary' | 'error' | 'initial';
22
  component?: C;
23
  display?: 'initial' | 'block' | 'inline';
24
  gutterBottom?: boolean;
25
  noWrap?: boolean;
26
  paragraph?: boolean;
27
  variant?: TypographyVariant | 'srOnly' | 'inherit';
28
  variantMapping?: Partial<Record<TypographyVariant, string>>;
29
}
30

31
type TypographyVariant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'subtitle1' | 'subtitle2' | 'body1' | 'body2' | 'caption' | 'button' | 'overline';
32
type TypographyClassKey = 'root' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'subtitle1' | 'subtitle2' | 'body1' | 'body2' | 'caption' | 'button' | 'overline' | 'srOnly' | 'alignLeft' | 'alignCenter' | 'alignRight' | 'alignJustify' | 'noWrap' | 'gutterBottom' | 'paragraph' | 'colorInherit' | 'colorPrimary' | 'colorSecondary' | 'colorTextPrimary' | 'colorTextSecondary' | 'colorError' | 'displayInline' | 'displayBlock';
33
```
34

35
**Usage Examples:**
36

37
```typescript
38
import { Typography } from '@material-ui/core';
39

40
// Different variants
41
<Typography variant="h1">Heading 1</Typography>
42
<Typography variant="h2" color="primary">Heading 2</Typography>
43
<Typography variant="body1" paragraph>
44
  This is a paragraph of body text with bottom margin.
45
</Typography>
46
<Typography variant="caption" color="textSecondary">
47
  Caption text
48
</Typography>
49

50
// Custom component
51
<Typography variant="h4" component="h2" gutterBottom>
52
  h4 styled as h2 element
53
</Typography>
54
```
55

56
### List
57

58
Container component for displaying a series of items.
59

60
```typescript { .api }
61
/**
62
 * Container component for displaying a series of items
63
 * @param props - List props
64
 * @returns List React component
65
 */
66
function List(props: ListProps): JSX.Element;
67

68
interface ListProps extends StandardProps<React.HTMLAttributes<HTMLUListElement>, ListClassKey> {
69
  children?: React.ReactNode;
70
  component?: React.ElementType;
71
  dense?: boolean;
72
  disablePadding?: boolean;
73
  subheader?: React.ReactNode;
74
}
75

76
type ListClassKey = 'root' | 'padding' | 'dense' | 'subheader';
77
```
78

79
### List Item
80

81
Individual item within a list component.
82

83
```typescript { .api }
84
/**
85
 * Individual item within a list component
86
 * @param props - List item props
87
 * @returns List item React component
88
 */
89
function ListItem(props: ListItemProps): JSX.Element;
90

91
interface ListItemProps extends StandardProps<ListItemTypeMap['props'], ListItemClassKey> {
92
  alignItems?: 'flex-start' | 'center';
93
  autoFocus?: boolean;
94
  button?: boolean;
95
  ContainerComponent?: React.ElementType;
96
  ContainerProps?: React.HTMLAttributes<HTMLDivElement>;
97
  dense?: boolean;
98
  disabled?: boolean;
99
  disableGutters?: boolean;
100
  divider?: boolean;
101
  selected?: boolean;
102
}
103

104
type ListItemClassKey = 'root' | 'container' | 'focusVisible' | 'dense' | 'alignItemsFlexStart' | 'disabled' | 'divider' | 'gutters' | 'button' | 'secondaryAction' | 'selected';
105
```
106

107
### List Item Text
108

109
Text content for list items supporting primary and secondary text.
110

111
```typescript { .api }
112
/**
113
 * Text content for list items supporting primary and secondary text
114
 * @param props - List item text props
115
 * @returns List item text React component
116
 */
117
function ListItemText(props: ListItemTextProps): JSX.Element;
118

119
interface ListItemTextProps extends StandardProps<React.HTMLAttributes<HTMLDivElement>, ListItemTextClassKey> {
120
  disableTypography?: boolean;
121
  inset?: boolean;
122
  primary?: React.ReactNode;
123
  primaryTypographyProps?: TypographyProps;
124
  secondary?: React.ReactNode;
125
  secondaryTypographyProps?: TypographyProps;
126
}
127

128
type ListItemTextClassKey = 'root' | 'multiline' | 'dense' | 'inset' | 'primary' | 'secondary';
129
```
130

131
### List Item Icon
132

133
Icon wrapper for list items.
134

135
```typescript { .api }
136
/**
137
 * Icon wrapper for list items
138
 * @param props - List item icon props
139
 * @returns List item icon React component
140
 */
141
function ListItemIcon(props: ListItemIconProps): JSX.Element;
142

143
interface ListItemIconProps extends StandardProps<React.HTMLAttributes<HTMLDivElement>, ListItemIconClassKey> {
144
  children: React.ReactElement;
145
}
146

147
type ListItemIconClassKey = 'root' | 'alignItemsFlexStart';
148
```
149

150
### List Item Avatar
151

152
Avatar wrapper for list items.
153

154
```typescript { .api }
155
/**
156
 * Avatar wrapper for list items
157
 * @param props - List item avatar props
158
 * @returns List item avatar React component
159
 */
160
function ListItemAvatar(props: ListItemAvatarProps): JSX.Element;
161

162
interface ListItemAvatarProps extends StandardProps<React.HTMLAttributes<HTMLDivElement>, ListItemAvatarClassKey> {
163
  children: React.ReactElement;
164
}
165

166
type ListItemAvatarClassKey = 'root' | 'alignItemsFlexStart';
167
```
168

169
### List Item Secondary Action
170

171
Secondary action area for list items.
172

173
```typescript { .api }
174
/**
175
 * Secondary action area for list items
176
 * @param props - List item secondary action props
177
 * @returns List item secondary action React component
178
 */
179
function ListItemSecondaryAction(props: ListItemSecondaryActionProps): JSX.Element;
180

181
interface ListItemSecondaryActionProps extends StandardProps<React.HTMLAttributes<HTMLDivElement>, ListItemSecondaryActionClassKey> {
182
  children?: React.ReactNode;
183
}
184

185
type ListItemSecondaryActionClassKey = 'root';
186
```
187

188
### List Subheader
189

190
Subheader for grouping related list items.
191

192
```typescript { .api }
193
/**
194
 * Subheader for grouping related list items
195
 * @param props - List subheader props
196
 * @returns List subheader React component
197
 */
198
function ListSubheader(props: ListSubheaderProps): JSX.Element;
199

200
interface ListSubheaderProps extends StandardProps<React.HTMLAttributes<HTMLLIElement>, ListSubheaderClassKey> {
201
  children?: React.ReactNode;
202
  color?: 'default' | 'primary' | 'inherit';
203
  component?: React.ElementType;
204
  disableGutters?: boolean;
205
  disableSticky?: boolean;
206
  inset?: boolean;
207
}
208

209
type ListSubheaderClassKey = 'root' | 'colorPrimary' | 'colorInherit' | 'gutters' | 'inset' | 'sticky';
210
```
211

212
### Table Components
213

214
#### Table
215

216
Root table component for displaying tabular data.
217

218
```typescript { .api }
219
/**
220
 * Root table component for displaying tabular data
221
 * @param props - Table props
222
 * @returns Table React component
223
 */
224
function Table(props: TableProps): JSX.Element;
225

226
interface TableProps extends StandardProps<React.TableHTMLAttributes<HTMLTableElement>, TableClassKey> {
227
  children: React.ReactNode;
228
  component?: React.ElementType;
229
  padding?: 'default' | 'checkbox' | 'none';
230
  size?: 'small' | 'medium';
231
  stickyHeader?: boolean;
232
}
233

234
type TableClassKey = 'root' | 'stickyHeader';
235
```
236

237
#### Table Head
238

239
Header section of a table.
240

241
```typescript { .api }
242
/**
243
 * Header section of a table
244
 * @param props - Table head props
245
 * @returns Table head React component
246
 */
247
function TableHead(props: TableHeadProps): JSX.Element;
248

249
interface TableHeadProps extends StandardProps<React.HTMLAttributes<HTMLTableSectionElement>, TableHeadClassKey> {
250
  children: React.ReactNode;
251
  component?: React.ElementType;
252
}
253

254
type TableHeadClassKey = 'root';
255
```
256

257
#### Table Body
258

259
Body section of a table containing data rows.
260

261
```typescript { .api }
262
/**
263
 * Body section of a table containing data rows
264
 * @param props - Table body props
265
 * @returns Table body React component
266
 */
267
function TableBody(props: TableBodyProps): JSX.Element;
268

269
interface TableBodyProps extends StandardProps<React.HTMLAttributes<HTMLTableSectionElement>, TableBodyClassKey> {
270
  children: React.ReactNode;
271
  component?: React.ElementType;
272
}
273

274
type TableBodyClassKey = 'root';
275
```
276

277
#### Table Footer
278

279
Footer section of a table.
280

281
```typescript { .api }
282
/**
283
 * Footer section of a table
284
 * @param props - Table footer props
285
 * @returns Table footer React component
286
 */
287
function TableFooter(props: TableFooterProps): JSX.Element;
288

289
interface TableFooterProps extends StandardProps<React.HTMLAttributes<HTMLTableSectionElement>, TableFooterClassKey> {
290
  children: React.ReactNode;
291
  component?: React.ElementType;
292
}
293

294
type TableFooterClassKey = 'root';
295
```
296

297
#### Table Row
298

299
Individual row within a table.
300

301
```typescript { .api }
302
/**
303
 * Individual row within a table
304
 * @param props - Table row props
305
 * @returns Table row React component
306
 */
307
function TableRow(props: TableRowProps): JSX.Element;
308

309
interface TableRowProps extends StandardProps<React.HTMLAttributes<HTMLTableRowElement>, TableRowClassKey> {
310
  children: React.ReactNode;
311
  component?: React.ElementType;
312
  hover?: boolean;
313
  selected?: boolean;
314
}
315

316
type TableRowClassKey = 'root' | 'selected' | 'hover' | 'head' | 'footer';
317
```
318

319
#### Table Cell
320

321
Individual cell within a table row.
322

323
```typescript { .api }
324
/**
325
 * Individual cell within a table row
326
 * @param props - Table cell props
327
 * @returns Table cell React component
328
 */
329
function TableCell(props: TableCellProps): JSX.Element;
330

331
interface TableCellProps extends StandardProps<React.TdHTMLAttributes<HTMLTableDataCellElement>, TableCellClassKey> {
332
  align?: 'inherit' | 'left' | 'center' | 'right' | 'justify';
333
  children?: React.ReactNode;
334
  component?: React.ElementType;
335
  padding?: 'default' | 'checkbox' | 'none';
336
  scope?: string;
337
  size?: 'small' | 'medium';
338
  sortDirection?: SortDirection;
339
  variant?: 'head' | 'body' | 'footer';
340
}
341

342
type TableCellClassKey = 'root' | 'head' | 'body' | 'footer' | 'sizeSmall' | 'paddingCheckbox' | 'paddingNone' | 'alignLeft' | 'alignCenter' | 'alignRight' | 'alignJustify' | 'stickyHeader';
343
type SortDirection = 'asc' | 'desc' | false;
344
```
345

346
#### Table Sort Label
347

348
Sortable column header for tables.
349

350
```typescript { .api }
351
/**
352
 * Sortable column header for tables
353
 * @param props - Table sort label props
354
 * @returns Table sort label React component
355
 */
356
function TableSortLabel(props: TableSortLabelProps): JSX.Element;
357

358
interface TableSortLabelProps extends StandardProps<ButtonBaseProps, TableSortLabelClassKey> {
359
  active?: boolean;
360
  children?: React.ReactNode;
361
  direction?: SortDirection;
362
  hideSortIcon?: boolean;
363
  IconComponent?: React.ComponentType<{ className: string }>;
364
}
365

366
type TableSortLabelClassKey = 'root' | 'active' | 'icon' | 'iconDirectionDesc' | 'iconDirectionAsc';
367
```
368

369
#### Table Pagination
370

371
Pagination controls for tables.
372

373
```typescript { .api }
374
/**
375
 * Pagination controls for tables
376
 * @param props - Table pagination props
377
 * @returns Table pagination React component
378
 */
379
function TablePagination(props: TablePaginationProps): JSX.Element;
380

381
interface TablePaginationProps extends StandardProps<TableCellProps, TablePaginationClassKey> {
382
  ActionsComponent?: React.ComponentType<TablePaginationActionsProps>;
383
  backIconButtonProps?: Partial<IconButtonProps>;
384
  count: number;
385
  labelDisplayedRows?: (paginationInfo: { from: number; to: number; count: number; page: number }) => React.ReactNode;
386
  labelRowsPerPage?: React.ReactNode;
387
  nextIconButtonProps?: Partial<IconButtonProps>;
388
  onChangePage: (event: React.MouseEvent<HTMLButtonElement> | null, page: number) => void;
389
  onChangeRowsPerPage?: React.ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement>;
390
  page: number;
391
  rowsPerPage: number;
392
  rowsPerPageOptions?: Array<number | { value: number; label: string }>;
393
  SelectProps?: Partial<SelectProps>;
394
}
395

396
type TablePaginationClassKey = 'root' | 'toolbar' | 'spacer' | 'caption' | 'selectRoot' | 'select' | 'selectIcon' | 'input' | 'menuItem' | 'actions';
397
```
398

399
### Card Components
400

401
#### Card
402

403
Container component implementing Material Design card pattern.
404

405
```typescript { .api }
406
/**
407
 * Container component implementing Material Design card pattern
408
 * @param props - Card props
409
 * @returns Card React component
410
 */
411
function Card(props: CardProps): JSX.Element;
412

413
interface CardProps extends StandardProps<PaperProps, CardClassKey> {
414
  raised?: boolean;
415
}
416

417
type CardClassKey = 'root';
418
```
419

420
#### Card Header
421

422
Header section of a card with title, subtitle, and action area.
423

424
```typescript { .api }
425
/**
426
 * Header section of a card with title, subtitle, and action area
427
 * @param props - Card header props
428
 * @returns Card header React component
429
 */
430
function CardHeader(props: CardHeaderProps): JSX.Element;
431

432
interface CardHeaderProps extends StandardProps<React.HTMLAttributes<HTMLDivElement>, CardHeaderClassKey> {
433
  action?: React.ReactNode;
434
  avatar?: React.ReactNode;
435
  component?: React.ElementType;
436
  disableTypography?: boolean;
437
  subheader?: React.ReactNode;
438
  subheaderTypographyProps?: Partial<TypographyProps>;
439
  title?: React.ReactNode;
440
  titleTypographyProps?: Partial<TypographyProps>;
441
}
442

443
type CardHeaderClassKey = 'root' | 'avatar' | 'action' | 'content' | 'title' | 'subheader';
444
```
445

446
#### Card Content
447

448
Main content area of a card.
449

450
```typescript { .api }
451
/**
452
 * Main content area of a card
453
 * @param props - Card content props
454
 * @returns Card content React component
455
 */
456
function CardContent(props: CardContentProps): JSX.Element;
457

458
interface CardContentProps extends StandardProps<React.HTMLAttributes<HTMLDivElement>, CardContentClassKey> {
459
  children?: React.ReactNode;
460
  component?: React.ElementType;
461
}
462

463
type CardContentClassKey = 'root';
464
```
465

466
#### Card Media
467

468
Media area of a card for images and videos.
469

470
```typescript { .api }
471
/**
472
 * Media area of a card for images and videos
473
 * @param props - Card media props
474
 * @returns Card media React component
475
 */
476
function CardMedia(props: CardMediaProps): JSX.Element;
477

478
interface CardMediaProps extends StandardProps<React.HTMLAttributes<HTMLDivElement>, CardMediaClassKey> {
479
  children?: React.ReactNode;
480
  component?: React.ElementType;
481
  image?: string;
482
  src?: string;
483
}
484

485
type CardMediaClassKey = 'root' | 'media';
486
```
487

488
#### Card Actions
489

490
Action area of a card for buttons and other interactive elements.
491

492
```typescript { .api }
493
/**
494
 * Action area of a card for buttons and other interactive elements
495
 * @param props - Card actions props
496
 * @returns Card actions React component
497
 */
498
function CardActions(props: CardActionsProps): JSX.Element;
499

500
interface CardActionsProps extends StandardProps<React.HTMLAttributes<HTMLDivElement>, CardActionsClassKey> {
501
  children?: React.ReactNode;
502
  disableSpacing?: boolean;
503
}
504

505
type CardActionsClassKey = 'root' | 'spacing';
506
```
507

508
#### Card Action Area
509

510
Clickable area of a card.
511

512
```typescript { .api }
513
/**
514
 * Clickable area of a card
515
 * @param props - Card action area props
516
 * @returns Card action area React component
517
 */
518
function CardActionArea(props: CardActionAreaProps): JSX.Element;
519

520
interface CardActionAreaProps extends StandardProps<ButtonBaseProps, CardActionAreaClassKey> {
521
  children?: React.ReactNode;
522
}
523

524
type CardActionAreaClassKey = 'root' | 'focusVisible' | 'focusHighlight';
525
```
526

527
### Icon Components
528

529
#### Icon
530

531
Icon component for displaying Material icons and custom icons.
532

533
```typescript { .api }
534
/**
535
 * Icon component for displaying Material icons and custom icons
536
 * @param props - Icon props
537
 * @returns Icon React component
538
 */
539
function Icon(props: IconProps): JSX.Element;
540

541
interface IconProps extends StandardProps<React.HTMLAttributes<HTMLSpanElement>, IconClassKey> {
542
  children: React.ReactNode;
543
  color?: 'inherit' | 'primary' | 'secondary' | 'action' | 'error' | 'disabled';
544
  component?: React.ElementType;
545
  fontSize?: 'inherit' | 'default' | 'small' | 'large';
546
}
547

548
type IconClassKey = 'root' | 'colorPrimary' | 'colorSecondary' | 'colorAction' | 'colorError' | 'colorDisabled' | 'fontSizeInherit' | 'fontSizeSmall' | 'fontSizeLarge';
549
```
550

551
#### SVG Icon
552

553
Wrapper for SVG icons with Material-UI styling.
554

555
```typescript { .api }
556
/**
557
 * Wrapper for SVG icons with Material-UI styling
558
 * @param props - SVG icon props
559
 * @returns SVG icon React component
560
 */
561
function SvgIcon(props: SvgIconProps): JSX.Element;
562

563
interface SvgIconProps extends StandardProps<React.SVGAttributes<SVGSVGElement>, SvgIconClassKey> {
564
  children: React.ReactNode;
565
  color?: 'inherit' | 'primary' | 'secondary' | 'action' | 'error' | 'disabled';
566
  component?: React.ComponentType<React.SVGAttributes<SVGSVGElement>>;
567
  fontSize?: 'inherit' | 'default' | 'small' | 'large';
568
  htmlColor?: string;
569
  shapeRendering?: string;
570
  titleAccess?: string;
571
  viewBox?: string;
572
}
573

574
type SvgIconClassKey = 'root' | 'colorPrimary' | 'colorSecondary' | 'colorAction' | 'colorError' | 'colorDisabled' | 'fontSizeInherit' | 'fontSizeSmall' | 'fontSizeLarge';
575
```
576

577
### Other Display Components
578

579
#### Avatar
580

581
Avatar component for displaying user images, initials, or icons.
582

583
```typescript { .api }
584
/**
585
 * Avatar component for displaying user images, initials, or icons
586
 * @param props - Avatar props
587
 * @returns Avatar React component
588
 */
589
function Avatar(props: AvatarProps): JSX.Element;
590

591
interface AvatarProps extends StandardProps<React.HTMLAttributes<HTMLDivElement>, AvatarClassKey> {
592
  alt?: string;
593
  children?: React.ReactNode;
594
  component?: React.ElementType;
595
  imgProps?: React.ImgHTMLAttributes<HTMLImageElement>;
596
  sizes?: string;
597
  src?: string;
598
  srcSet?: string;
599
  variant?: 'circle' | 'rounded' | 'square';
600
}
601

602
type AvatarClassKey = 'root' | 'colorDefault' | 'circle' | 'rounded' | 'square' | 'img' | 'fallback';
603
```
604

605
#### Badge
606

607
Badge component for displaying notifications and status indicators.
608

609
```typescript { .api }
610
/**
611
 * Badge component for displaying notifications and status indicators
612
 * @param props - Badge props
613
 * @returns Badge React component
614
 */
615
function Badge(props: BadgeProps): JSX.Element;
616

617
interface BadgeProps extends StandardProps<React.HTMLAttributes<HTMLSpanElement>, BadgeClassKey> {
618
  anchorOrigin?: {
619
    horizontal: 'left' | 'right';
620
    vertical: 'bottom' | 'top';
621
  };
622
  badgeContent?: React.ReactNode;
623
  children: React.ReactElement<any, any>;
624
  color?: 'default' | 'primary' | 'secondary' | 'error';
625
  component?: React.ElementType;
626
  invisible?: boolean;
627
  max?: number;
628
  overlap?: 'circle' | 'rectangle';
629
  showZero?: boolean;
630
  variant?: 'standard' | 'dot';
631
}
632

633
type BadgeClassKey = 'root' | 'badge' | 'colorPrimary' | 'colorSecondary' | 'colorError' | 'invisible' | 'dot' | 'anchorOriginTopRightRectangle' | 'anchorOriginBottomRightRectangle' | 'anchorOriginTopLeftRectangle' | 'anchorOriginBottomLeftRectangle' | 'anchorOriginTopRightCircle' | 'anchorOriginBottomRightCircle' | 'anchorOriginTopLeftCircle' | 'anchorOriginBottomLeftCircle';
634
```
635

636
#### Chip
637

638
Chip component for displaying tags, filters, and compact information.
639

640
```typescript { .api }
641
/**
642
 * Chip component for displaying tags, filters, and compact information
643
 * @param props - Chip props
644
 * @returns Chip React component
645
 */
646
function Chip(props: ChipProps): JSX.Element;
647

648
interface ChipProps extends StandardProps<React.HTMLAttributes<HTMLDivElement>, ChipClassKey> {
649
  avatar?: React.ReactElement<any, any>;
650
  children?: null;
651
  clickable?: boolean;
652
  color?: 'default' | 'primary' | 'secondary';
653
  component?: React.ElementType;
654
  deleteIcon?: React.ReactElement<any, any>;
655
  disabled?: boolean;
656
  icon?: React.ReactElement<any, any>;
657
  label?: React.ReactNode;
658
  onDelete?: React.EventHandler<any>;
659
  size?: 'small' | 'medium';
660
  variant?: 'default' | 'outlined';
661
}
662

663
type ChipClassKey = 'root' | 'sizeSmall' | 'colorPrimary' | 'colorSecondary' | 'disabled' | 'clickable' | 'clickableColorPrimary' | 'clickableColorSecondary' | 'deletable' | 'deletableColorPrimary' | 'deletableColorSecondary' | 'outlined' | 'outlinedPrimary' | 'outlinedSecondary' | 'avatar' | 'avatarSmall' | 'avatarColorPrimary' | 'avatarColorSecondary' | 'icon' | 'iconSmall' | 'iconColorPrimary' | 'iconColorSecondary' | 'label' | 'labelSmall' | 'deleteIcon' | 'deleteIconSmall' | 'deleteIconColorPrimary' | 'deleteIconColorSecondary' | 'deleteIconOutlinedColorPrimary' | 'deleteIconOutlinedColorSecondary';
664
```
665

666
#### Divider
667

668
Divider component for separating content sections.
669

670
```typescript { .api }
671
/**
672
 * Divider component for separating content sections
673
 * @param props - Divider props
674
 * @returns Divider React component
675
 */
676
function Divider(props: DividerProps): JSX.Element;
677

678
interface DividerProps extends StandardProps<React.HTMLAttributes<HTMLHRElement>, DividerClassKey> {
679
  absolute?: boolean;
680
  component?: React.ElementType;
681
  flexItem?: boolean;
682
  light?: boolean;
683
  orientation?: 'horizontal' | 'vertical';
684
  variant?: 'fullWidth' | 'inset' | 'middle';
685
}
686

687
type DividerClassKey = 'root' | 'absolute' | 'flexItem' | 'light' | 'middle' | 'vertical';
688
```