Package-level declarations

ButtonBase contains as few styles as possible. It aims to be a simple building block for creating a button. It contains a load of style reset and some focus/ripple logic.

buttonBaseClasses

external val buttonBaseClasses: ButtonBaseClasses

buttonClasses

external val buttonClasses: ButtonClasses

ButtonGroup

external val ButtonGroup: FC<ButtonGroupProps>

Demos:

buttonGroupClasses

external val buttonGroupClasses: ButtonGroupClasses

Card

external val Card: FC<CardProps>

Demos:

CardActionArea

external val CardActionArea: FC<CardActionAreaProps>

Demos:

cardActionAreaClasses

external val cardActionAreaClasses: CardActionAreaClasses

CardActions

external val CardActions: FC<CardActionsProps>

Demos:

cardActionsClasses

external val cardActionsClasses: CardActionsClasses

cardClasses

external val cardClasses: CardClasses

CardContent

external val CardContent: FC<CardContentProps>

Demos:

cardContentClasses

external val cardContentClasses: CardContentClasses

CardHeader

external val CardHeader: FC<CardHeaderProps>

Demos:

cardHeaderClasses

external val cardHeaderClasses: CardHeaderClasses

CardMedia

external val CardMedia: FC<CardMediaProps>

Demos:

cardMediaClasses

external val cardMediaClasses: CardMediaClasses

Checkbox

external val Checkbox: FC<CheckboxProps>

Demos:

checkboxClasses

external val checkboxClasses: CheckboxClasses

Chip

external val Chip: FC<ChipProps>

Chips represent complex entities in small blocks, such as a contact.

chipClasses

external val chipClasses: ChipClasses

CircularProgress

external val CircularProgress: FC<CircularProgressProps>

If the progress bar is describing the loading progress of a particular region of a page, you should use aria-describedby to point to the progress bar, and set the aria-busy attribute to true on that region until it has finished loading.

circularProgressClasses

external val circularProgressClasses: CircularProgressClasses

ClickAwayListener

external val ClickAwayListener: FC<ClickAwayListenerProps>

Listen for click events that occur somewhere in the document, outside of the element itself. For instance, if you need to hide a menu when people click anywhere else on your page.

Collapse

external val Collapse: FC<CollapseProps>

The Collapse transition is used by the Vertical Stepper StepContent component. It uses react-transition-group internally.

collapseClasses

external val collapseClasses: CollapseClasses

Container

external val Container: FC<ContainerProps>

Demos:

CssBaseline

external val CssBaseline: FC<CssBaselineProps>

Kickstart an elegant, consistent, and simple baseline to build upon.

Dialog

external val Dialog: FC<DialogProps>

Dialogs are overlaid modal paper based components with a backdrop.

DialogActions

external val DialogActions: FC<DialogActionsProps>

Demos:

dialogActionsClasses

external val dialogActionsClasses: DialogActionsClasses

dialogClasses

external val dialogClasses: DialogClasses

DialogContent

external val DialogContent: FC<DialogContentProps>

Demos:

dialogContentClasses

external val dialogContentClasses: DialogContentClasses

DialogContentText

external val DialogContentText: FC<DialogContentTextProps>

Demos:

dialogContentTextClasses

external val dialogContentTextClasses: DialogContentTextClasses

DialogTitle

external val DialogTitle: FC<DialogTitleProps>

Demos:

dialogTitleClasses

external val dialogTitleClasses: DialogTitleClasses

Divider

external val Divider: FC<DividerProps>

Demos:

dividerClasses

external val dividerClasses: DividerClasses

Drawer

external val Drawer: FC<DrawerProps>

The props of the Modal component are available when variant="temporary" is set.

drawerClasses

external val drawerClasses: DrawerClasses

Fab

external val Fab: FC<FabProps>

Demos:

fabClasses

external val fabClasses: FabClasses

Fade

external val Fade: FC<FadeProps>

The Fade transition is used by the Modal component. It uses react-transition-group internally.

FilledInput

external val FilledInput: FC<FilledInputProps>

Demos:

filledInputClasses

external val filledInputClasses: FilledInputClasses

FormControl

external val FormControl: FC<FormControlProps>

Provides context such as filled/focused/error/required for form inputs. Relying on the context provides high flexibility and ensures that the state always stays consistent across the children of the FormControl. This context is used by the following components:

formControlClasses

external val formControlClasses: FormControlClasses

FormControlLabel

external val FormControlLabel: FC<FormControlLabelProps>

Drop-in replacement of the Radio, Switch and Checkbox component. Use this component if you want to display an extra label.

formControlLabelClasses

external val formControlLabelClasses: FormControlLabelClasses

FormGroup

external val FormGroup: FC<FormGroupProps>

FormGroup wraps controls such as Checkbox and Switch. It provides compact row layout. For the Radio, you should be using the RadioGroup component instead of this one.

formGroupClasses

external val formGroupClasses: FormGroupClasses

FormHelperText

external val FormHelperText: FC<FormHelperTextProps>

Demos:

formHelperTextClasses

external val formHelperTextClasses: FormHelperTextClasses

FormLabel

external val FormLabel: FC<FormLabelProps>

Demos:

formLabelClasses

external val formLabelClasses: FormLabelClasses

Grid

external val Grid: FC<GridProps>

Demos:

gridClasses

external val gridClasses: GridClasses

Grow

external val Grow: FC<GrowProps>

The Grow transition is used by the Tooltip and Popover components. It uses react-transition-group internally.

Hidden

external val Hidden: FC<HiddenProps>

Responsively hides children based on the selected implementation.

Icon

external val Icon: FC<IconProps>

Demos:

IconButton

external val IconButton: FC<IconButtonProps>

Refer to the Icons section of the documentation regarding the available icon options.

iconButtonClasses

external val iconButtonClasses: IconButtonClasses

iconClasses

external val iconClasses: IconClasses

ImageList

external val ImageList: FC<ImageListProps>

Demos:

imageListClasses

external val imageListClasses: ImageListClasses

ImageListItem

external val ImageListItem: FC<ImageListItemProps>

Demos:

ImageListItemBar

external val ImageListItemBar: FC<ImageListItemBarProps>

Demos:

imageListItemBarClasses

external val imageListItemBarClasses: ImageListItemBarClasses

imageListItemClasses

external val imageListItemClasses: ImageListItemClasses

InitColorSchemeScript

external val InitColorSchemeScript: FC<InitColorSchemeScriptProps>

Input

external val Input: FC<InputProps>

Demos:

InputAdornment

external val InputAdornment: FC<InputAdornmentProps>

Demos:

inputAdornmentClasses

external val inputAdornmentClasses: InputAdornmentClasses

InputBase

external val InputBase: FC<InputBaseProps>

InputBase contains as few styles as possible. It aims to be a simple building block for creating an input. It contains a load of style reset and some state logic.

inputBaseClasses

external val inputBaseClasses: InputBaseClasses

inputClasses

external val inputClasses: InputClasses

InputLabel

external val InputLabel: FC<InputLabelProps>

Demos:

inputLabelClasses

external val inputLabelClasses: InputLabelClasses

LinearProgress

external val LinearProgress: FC<LinearProgressProps>

linearProgressClasses

external val linearProgressClasses: LinearProgressClasses

Link

external val Link: FC<LinkProps>

Demos:

linkClasses

external val linkClasses: LinkClasses

List

external val List: FC<ListProps>

Demos:

listClasses

external val listClasses: ListClasses

ListItem

external val ListItem: FC<ListItemProps>

Uses an additional container component if ListItemSecondaryAction is the last child.

ListItemAvatar

external val ListItemAvatar: FC<ListItemAvatarProps>

A simple wrapper to apply List styles to an Avatar.

listItemAvatarClasses

external val listItemAvatarClasses: ListItemAvatarClasses

ListItemButton

external val ListItemButton: FC<ListItemButtonProps>

Demos:

listItemButtonClasses

external val listItemButtonClasses: ListItemButtonClasses

listItemClasses

external val listItemClasses: ListItemClasses

ListItemIcon

external val ListItemIcon: FC<ListItemIconProps>

A simple wrapper to apply List styles to an Icon or SvgIcon.

listItemIconClasses

external val listItemIconClasses: ListItemIconClasses

ListItemSecondaryAction

external val ListItemSecondaryAction: FC<ListItemSecondaryActionProps>

Must be used as the last child of ListItem to function properly.

listItemSecondaryActionClasses

external val listItemSecondaryActionClasses: ListItemSecondaryActionClasses

ListItemText

external val ListItemText: FC<ListItemTextProps>

Demos:

listItemTextClasses

external val listItemTextClasses: ListItemTextClasses

ListSubheader

external val ListSubheader: FC<ListSubheaderProps>

Demos:

listSubheaderClasses

external val listSubheaderClasses: ListSubheaderClasses

external val Menu: FC<MenuProps>

Demos:

menuClasses

external val menuClasses: MenuClasses

MenuItem

external val MenuItem: FC<MenuItemProps>

Demos:

menuItemClasses

external val menuItemClasses: MenuItemClasses

MenuList

external val MenuList: FC<MenuListProps>

A permanently displayed menu following https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/. It's exposed to help customization of the Menu component if you use it separately you need to move focus into the component manually. Once the focus is placed inside the component it is fully keyboard accessible.

MobileStepper

external val MobileStepper: FC<MobileStepperProps>

Demos:

mobileStepperClasses

external val mobileStepperClasses: MobileStepperClasses

Modal

external val Modal: FC<ModalProps>

Modal is a lower-level construct that is leveraged by the following components:

modalClasses

external val modalClasses: ModalClasses

NativeSelect

external val NativeSelect: FC<NativeSelectProps>

An alternative to <Select native /> with a much smaller bundle size footprint.

nativeSelectClasses

external val nativeSelectClasses: NativeSelectClasses

NoSsr

external val NoSsr: FC<NoSsrProps>

NoSsr purposely removes components from the subject of Server Side Rendering (SSR).

OutlinedInput

external val OutlinedInput: FC<OutlinedInputProps>

Demos:

outlinedInputClasses

external val outlinedInputClasses: OutlinedInputClasses

Pagination

external val Pagination: FC<PaginationProps>

Demos:

paginationClasses

external val paginationClasses: PaginationClasses

PaginationItem

external val PaginationItem: FC<PaginationItemProps>

Demos:

paginationItemClasses

external val paginationItemClasses: PaginationItemClasses

Paper

external val Paper: FC<PaperProps>

Demos:

paperClasses

external val paperClasses: PaperClasses

Popover

external val Popover: FC<PopoverProps>

Demos:

popoverClasses

external val popoverClasses: PopoverClasses

Popper

external val Popper: FC<PopperProps>

Demos:

popperClasses

external val popperClasses: PopperClasses

Portal

external val Portal: FC<PortalProps>

Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component.

Radio

external val Radio: FC<RadioProps>

Demos:

radioClasses

external val radioClasses: RadioClasses

RadioGroup

external val RadioGroup: FC<RadioGroupProps>

Demos:

Rating

external val Rating: FC<RatingProps>

Demos:

ratingClasses

external val ratingClasses: RatingClasses

ScopedCssBaseline

external val ScopedCssBaseline: FC<ScopedCssBaselineProps>

Demos:

scopedCssBaselineClasses

external val scopedCssBaselineClasses: ScopedCssBaselineClasses

Select

external val Select: FC<SelectProps<*>>

Demos:

selectClasses

external val selectClasses: SelectClasses

Skeleton

external val Skeleton: FC<SkeletonProps>

Demos:

skeletonClasses

external val skeletonClasses: SkeletonClasses

Slide

external val Slide: FC<SlideProps>

The Slide transition is used by the Drawer component. It uses react-transition-group internally.

Slider

external val Slider: FC<SliderProps>

Demos:

sliderClasses

external val sliderClasses: SliderClasses

Snackbar

external val Snackbar: FC<SnackbarProps>

Demos:

snackbarClasses

external val snackbarClasses: SnackbarClasses

SnackbarContent

external val SnackbarContent: FC<SnackbarContentProps>

Demos:

snackbarContentClasses

external val snackbarContentClasses: SnackbarContentClasses

SpeedDial

external val SpeedDial: FC<SpeedDialProps>

Demos:

SpeedDialAction

external val SpeedDialAction: FC<SpeedDialActionProps>

Demos:

speedDialActionClasses

external val speedDialActionClasses: SpeedDialActionClasses

speedDialClasses

external val speedDialClasses: SpeedDialClasses

SpeedDialIcon

external val SpeedDialIcon: FC<SpeedDialIconProps>

Demos:

speedDialIconClasses

external val speedDialIconClasses: SpeedDialIconClasses

Stack

external val Stack: FC<StackProps>

Demos:

Step

external val Step: FC<StepProps>

Demos:

StepButton

external val StepButton: FC<StepButtonProps>

Demos:

stepButtonClasses

external val stepButtonClasses: StepButtonClasses

stepClasses

external val stepClasses: StepClasses

StepConnector

external val StepConnector: FC<StepConnectorProps>

Demos:

stepConnectorClasses

external val stepConnectorClasses: StepConnectorClasses

StepContent

external val StepContent: FC<StepContentProps>

Demos:

stepContentClasses

external val stepContentClasses: StepContentClasses

StepIcon

external val StepIcon: FC<StepIconProps>

Demos:

stepIconClasses

external val stepIconClasses: StepIconClasses

StepLabel

external val StepLabel: FC<StepLabelProps>

Demos:

stepLabelClasses

external val stepLabelClasses: StepLabelClasses

Stepper

external val Stepper: FC<StepperProps>

Demos:

stepperClasses

external val stepperClasses: StepperClasses

SvgIcon

external val SvgIcon: FC<SvgIconProps>

Demos:

svgIconClasses

external val svgIconClasses: SvgIconClasses

SwipeableDrawer

external val SwipeableDrawer: FC<SwipeableDrawerProps>

Demos:

Switch

external val Switch: FC<SwitchProps>

Demos:

SwitchBase

external val SwitchBase: FC<SwitchBaseProps>

switchBaseClasses

external val switchBaseClasses: SwitchBaseClasses

switchClasses

external val switchClasses: SwitchClasses

Tab

external val Tab: FC<TabProps>

Demos:

tabClasses

external val tabClasses: TabClasses

Table

external val Table: FC<TableProps>

Demos:

TableBody

external val TableBody: FC<TableBodyProps>

Demos:

tableBodyClasses

external val tableBodyClasses: TableBodyClasses

TableCell

external val TableCell: FC<TableCellProps>

The component renders a <th> element when the parent context is a header or otherwise a <td> element.

tableCellClasses

external val tableCellClasses: TableCellClasses

tableClasses

external val tableClasses: TableClasses

TableContainer

external val TableContainer: FC<TableContainerProps>

Demos:

tableContainerClasses

external val tableContainerClasses: TableContainerClasses

TableFooter

external val TableFooter: FC<TableFooterProps>

Demos:

tableFooterClasses

external val tableFooterClasses: TableFooterClasses

TableHead

external val TableHead: FC<TableHeadProps>

Demos:

tableHeadClasses

external val tableHeadClasses: TableHeadClasses

TablePagination

external val TablePagination: FC<TablePaginationProps>

A TableCell based component for placing inside TableFooter for pagination.

TablePaginationActions

external val TablePaginationActions: FC<TablePaginationActionsProps>

tablePaginationClasses

external val tablePaginationClasses: TablePaginationClasses

TableRow

external val TableRow: FC<TableRowProps>

Will automatically set dynamic row height based on the material table element parent (head, body, etc).

tableRowClasses

external val tableRowClasses: TableRowClasses

TableSortLabel

external val TableSortLabel: FC<TableSortLabelProps>

A button based label for placing inside TableCell for column sorting.

tableSortLabelClasses

external val tableSortLabelClasses: TableSortLabelClasses

Tabs

external val Tabs: FC<TabsProps>

Demos:

tabsClasses

external val tabsClasses: TabsClasses

TabScrollButton

external val TabScrollButton: FC<TabScrollButtonProps>

Demos:

tabScrollButtonClasses

external val tabScrollButtonClasses: TabScrollButtonClasses

TextareaAutosize

external val TextareaAutosize: FC<TextareaAutosizeProps>

Demos:

TextField

external val TextField: FC<TextFieldProps>

The TextField is a convenience wrapper for the most common cases (80%). It cannot be all things to all people, otherwise the API would grow out of control.

textFieldClasses

external val textFieldClasses: TextFieldClasses

ToggleButton

external val ToggleButton: FC<ToggleButtonProps>

Demos:

toggleButtonClasses

external val toggleButtonClasses: ToggleButtonClasses

ToggleButtonGroup

external val ToggleButtonGroup: FC<ToggleButtonGroupProps>

Demos:

toggleButtonGroupClasses

external val toggleButtonGroupClasses: ToggleButtonGroupClasses