Skip to content
Edit this page

LoadingButton API

API reference docs for the React LoadingButton component. Learn about the props, CSS, and other APIs of this exported module.

Demos

For examples and details on the usage of this React component, visit the component demo pages:

Import

import LoadingButton from '@mui/lab/LoadingButton';
// or
import { LoadingButton } from '@mui/lab';
Learn about the difference by reading this guide on minimizing bundle size.

Props

Props of the Button component are also available.

children

The content of the component.

Type:

node
classes

Override or extend the styles applied to the component.

See CSS API below for more details.

Type:

object
disabled

If true, the component is disabled.

Type:

bool

Default:

false
loading

If true, the loading indicator is shown and the button becomes disabled.

Type:

bool

Default:

false
loadingIndicator

Element placed before the children if the button is in loading state. The node should contain an element with role="progressbar" with an accessible name. By default we render a CircularProgress that is labelled by the button itself.

Type:

node

Default:

<CircularProgress color="inherit" size={16} />
loadingPosition

The loading indicator can be positioned on the start, end, or the center of the button.

Type:

'start' | 'end' | 'center'

Default:

'center'
sx

The system prop that allows defining system overrides as well as additional CSS styles.

See the `sx` page for more details.

Type:

Array<func | object | bool> | func | object
variant

The variant to use.

Type:

'contained' | 'outlined' | 'text' | string

Default:

'text'
The ref is forwarded to the root element.

Inheritance

While not explicitly documented above, the props of the Button component are also available in LoadingButton. You can take advantage of this to target nested components.

Theme default props

You can use MuiLoadingButton to change the default props of this component with the theme.

CSS

The following class names are useful for styling with CSS (the state classes are marked).
To learn more, visit the component customization page.


.MuiLoadingButton-rootroot

Styles applied to the root element.

.MuiLoadingButton-texttext

Styles applied to the root element if variant="text".

.MuiLoadingButton-textInherittextInherit

Styles applied to the root element if variant="text" and color="inherit".

.MuiLoadingButton-textPrimarytextPrimary

Styles applied to the root element if variant="text" and color="primary".

.MuiLoadingButton-textSecondarytextSecondary

Styles applied to the root element if variant="text" and color="secondary".

.MuiLoadingButton-textSuccesstextSuccess

Styles applied to the root element if variant="text" and color="success".

.MuiLoadingButton-textErrortextError

Styles applied to the root element if variant="text" and color="error".

.MuiLoadingButton-textInfotextInfo

Styles applied to the root element if variant="text" and color="info".

.MuiLoadingButton-textWarningtextWarning

Styles applied to the root element if variant="text" and color="warning".

.MuiLoadingButton-outlinedoutlined

Styles applied to the root element if variant="outlined".

.MuiLoadingButton-outlinedInheritoutlinedInherit

Styles applied to the root element if variant="outlined" and color="inherit".

.MuiLoadingButton-outlinedPrimaryoutlinedPrimary

Styles applied to the root element if variant="outlined" and color="primary".

.MuiLoadingButton-outlinedSecondaryoutlinedSecondary

Styles applied to the root element if variant="outlined" and color="secondary".

.MuiLoadingButton-outlinedSuccessoutlinedSuccess

Styles applied to the root element if variant="outlined" and color="success".

.MuiLoadingButton-outlinedErroroutlinedError

Styles applied to the root element if variant="outlined" and color="error".

.MuiLoadingButton-outlinedInfooutlinedInfo

Styles applied to the root element if variant="outlined" and color="info".

.MuiLoadingButton-outlinedWarningoutlinedWarning

Styles applied to the root element if variant="outlined" and color="warning".

.MuiLoadingButton-containedcontained

Styles applied to the root element if variant="contained".

.MuiLoadingButton-containedInheritcontainedInherit

Styles applied to the root element if variant="contained" and color="inherit".

.MuiLoadingButton-containedPrimarycontainedPrimary

Styles applied to the root element if variant="contained" and color="primary".

.MuiLoadingButton-containedSecondarycontainedSecondary

Styles applied to the root element if variant="contained" and color="secondary".

.MuiLoadingButton-containedSuccesscontainedSuccess

Styles applied to the root element if variant="contained" and color="success".

.MuiLoadingButton-containedInfocontainedInfo

Styles applied to the root element if variant="contained" and color="info".

.MuiLoadingButton-containedErrorcontainedError

Styles applied to the root element if variant="contained" and color="error".

.MuiLoadingButton-containedWarningcontainedWarning

Styles applied to the root element if variant="contained" and color="warning".

.MuiLoadingButton-disableElevationdisableElevation

Styles applied to the root element if disableElevation={true}.

.Mui-focusVisiblefocusVisibleSTATE

State class applied to the ButtonBase root element if the button is keyboard focused.

.Mui-disableddisabledSTATE

State class applied to the root element if disabled={true}.

.MuiLoadingButton-colorInheritcolorInherit

Styles applied to the root element if color="inherit".

.MuiLoadingButton-textSizeSmalltextSizeSmall

Styles applied to the root element if size="small" and variant="text".

.MuiLoadingButton-textSizeMediumtextSizeMedium

Styles applied to the root element if size="medium" and variant="text".

.MuiLoadingButton-textSizeLargetextSizeLarge

Styles applied to the root element if size="large" and variant="text".

.MuiLoadingButton-outlinedSizeSmalloutlinedSizeSmall

Styles applied to the root element if size="small" and variant="outlined".

.MuiLoadingButton-outlinedSizeMediumoutlinedSizeMedium

Styles applied to the root element if size="medium" and variant="outlined".

.MuiLoadingButton-outlinedSizeLargeoutlinedSizeLarge

Styles applied to the root element if size="large" and variant="outlined".

.MuiLoadingButton-containedSizeSmallcontainedSizeSmall

Styles applied to the root element if size="small" and variant="contained".

.MuiLoadingButton-containedSizeMediumcontainedSizeMedium

Styles applied to the root element if size="medium" and variant="contained".

.MuiLoadingButton-containedSizeLargecontainedSizeLarge

Styles applied to the root element if size="large" and variant="contained".

.MuiLoadingButton-sizeSmallsizeSmall

Styles applied to the root element if size="small".

.MuiLoadingButton-sizeMediumsizeMedium

Styles applied to the root element if size="medium".

.MuiLoadingButton-sizeLargesizeLarge

Styles applied to the root element if size="large".

.MuiLoadingButton-fullWidthfullWidth

Styles applied to the root element if fullWidth={true}.

.MuiLoadingButton-startIconstartIcon

Styles applied to the startIcon element if supplied.

.MuiLoadingButton-endIconendIcon

Styles applied to the endIcon element if supplied.

.MuiLoadingButton-iconSizeSmalliconSizeSmall

Styles applied to the icon element if supplied and size="small".

.MuiLoadingButton-iconSizeMediumiconSizeMedium

Styles applied to the icon element if supplied and size="medium".

.MuiLoadingButton-iconSizeLargeiconSizeLarge

Styles applied to the icon element if supplied and size="large".

.MuiLoadingButton-loadingloading

Styles applied to the root element if loading={true}.

.MuiLoadingButton-loadingIndicatorloadingIndicator

Styles applied to the loadingIndicator element.

.MuiLoadingButton-loadingIndicatorCenterloadingIndicatorCenter

Styles applied to the loadingIndicator element if loadingPosition="center".

.MuiLoadingButton-loadingIndicatorStartloadingIndicatorStart

Styles applied to the loadingIndicator element if loadingPosition="start".

.MuiLoadingButton-loadingIndicatorEndloadingIndicatorEnd

Styles applied to the loadingIndicator element if loadingPosition="end".

.MuiLoadingButton-endIconLoadingEndendIconLoadingEnd

Styles applied to the endIcon element if loading={true} and loadingPosition="end".

.MuiLoadingButton-startIconLoadingStartstartIconLoadingStart

Styles applied to the startIcon element if loading={true} and loadingPosition="start".

You can override the style of the component using one of these customization options: