LoadingButton API

想要学习更多组件属性和 CSS API，可以查阅 React LoadingButton 组件的 API 文档。

导入

import LoadingButton from '@mui/lab/LoadingButton';
// 或
import { LoadingButton } from '@mui/lab';

你可以阅读这个关于最小化捆绑包的指南以了解以上二者的差异。

组件名称

在主题中，名称“MuiLoadingButton”可用于提供默认属性（props），或者样式覆盖

属性

Button 组件的属性也是可用的。

名称	类型	默认值	描述
children	node		The content of the component.
classes	object		Override or extend the styles applied to the component. See CSS API below for more details.
disabled	bool	false	如果被设置为 `true`，那么该组件将会被禁用。
loading	bool	false	If `true`, the loading indicator is shown.
loadingIndicator	node	<CircularProgress color="inherit" size={16} />	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.
loadingPosition	'start' \| 'end' \| 'center'	'center'	The loading indicator can be positioned on the start, end, or the center of the button.
sx	Array<func \| object \| bool> \| func \| object		The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.
variant	'contained' \| 'outlined' \| 'text' \| string	'text'	The variant to use.

ref 则会被传递到根元素中。

继承

尽管上文没有明文记录， Button 组件的属性(props) 在组件LoadingButton上同样是可用的。你可以利用这一点来指向嵌套组件

CSS

规则名称	全局类名	描述
root	.MuiLoadingButton-root	Styles applied to the root element.
text	.MuiLoadingButton-text	Styles applied to the root element if `variant="text"`.
textInherit	.MuiLoadingButton-textInherit	Styles applied to the root element if `variant="text"` and `color="inherit"`.
textPrimary	.MuiLoadingButton-textPrimary	Styles applied to the root element if `variant="text"` and `color="primary"`.
textSecondary	.MuiLoadingButton-textSecondary	Styles applied to the root element if `variant="text"` and `color="secondary"`.
textSuccess	.MuiLoadingButton-textSuccess	Styles applied to the root element if `variant="text"` and `color="success"`.
textError	.MuiLoadingButton-textError	Styles applied to the root element if `variant="text"` and `color="error"`.
textInfo	.MuiLoadingButton-textInfo	Styles applied to the root element if `variant="text"` and `color="info"`.
textWarning	.MuiLoadingButton-textWarning	Styles applied to the root element if `variant="text"` and `color="warning"`.
outlined	.MuiLoadingButton-outlined	Styles applied to the root element if `variant="outlined"`.
outlinedInherit	.MuiLoadingButton-outlinedInherit	Styles applied to the root element if `variant="outlined"` and `color="inherit"`.
outlinedPrimary	.MuiLoadingButton-outlinedPrimary	Styles applied to the root element if `variant="outlined"` and `color="primary"`.
outlinedSecondary	.MuiLoadingButton-outlinedSecondary	Styles applied to the root element if `variant="outlined"` and `color="secondary"`.
outlinedSuccess	.MuiLoadingButton-outlinedSuccess	Styles applied to the root element if `variant="outlined"` and `color="success"`.
outlinedError	.MuiLoadingButton-outlinedError	Styles applied to the root element if `variant="outlined"` and `color="error"`.
outlinedInfo	.MuiLoadingButton-outlinedInfo	Styles applied to the root element if `variant="outlined"` and `color="info"`.
outlinedWarning	.MuiLoadingButton-outlinedWarning	Styles applied to the root element if `variant="outlined"` and `color="warning"`.
contained	.MuiLoadingButton-contained	Styles applied to the root element if `variant="contained"`.
containedInherit	.MuiLoadingButton-containedInherit	Styles applied to the root element if `variant="contained"` and `color="inherit"`.
containedPrimary	.MuiLoadingButton-containedPrimary	Styles applied to the root element if `variant="contained"` and `color="primary"`.
containedSecondary	.MuiLoadingButton-containedSecondary	Styles applied to the root element if `variant="contained"` and `color="secondary"`.
containedSuccess	.MuiLoadingButton-containedSuccess	Styles applied to the root element if `variant="contained"` and `color="success"`.
containedInfo	.MuiLoadingButton-containedInfo	Styles applied to the root element if `variant="contained"` and `color="info"`.
containedError	.MuiLoadingButton-containedError	Styles applied to the root element if `variant="contained"` and `color="error"`.
containedWarning	.MuiLoadingButton-containedWarning	Styles applied to the root element if `variant="contained"` and `color="warning"`.
disableElevation	.MuiLoadingButton-disableElevation	Styles applied to the root element if `disableElevation={true}`.
focusVisible	.Mui-focusVisible	Pseudo-class applied to the ButtonBase root element if the button is keyboard focused.
disabled	.Mui-disabled	Pseudo-class applied to the root element if `disabled={true}`.
colorInherit	.MuiLoadingButton-colorInherit	Styles applied to the root element if `color="inherit"`.
textSizeSmall	.MuiLoadingButton-textSizeSmall	Styles applied to the root element if `size="small"` and `variant="text"`.
textSizeMedium	.MuiLoadingButton-textSizeMedium	Styles applied to the root element if `size="medium"` and `variant="text"`.
textSizeLarge	.MuiLoadingButton-textSizeLarge	Styles applied to the root element if `size="large"` and `variant="text"`.
outlinedSizeSmall	.MuiLoadingButton-outlinedSizeSmall	Styles applied to the root element if `size="small"` and `variant="outlined"`.
outlinedSizeMedium	.MuiLoadingButton-outlinedSizeMedium	Styles applied to the root element if `size="medium"` and `variant="outlined"`.
outlinedSizeLarge	.MuiLoadingButton-outlinedSizeLarge	Styles applied to the root element if `size="large"` and `variant="outlined"`.
containedSizeSmall	.MuiLoadingButton-containedSizeSmall	Styles applied to the root element if `size="small"` and `variant="contained"`.
containedSizeMedium	.MuiLoadingButton-containedSizeMedium	Styles applied to the root element if `size="small"` and `variant="contained"`.
containedSizeLarge	.MuiLoadingButton-containedSizeLarge	Styles applied to the root element if `size="large"` and `variant="contained"`.
sizeSmall	.MuiLoadingButton-sizeSmall	Styles applied to the root element if `size="small"`.
sizeMedium	.MuiLoadingButton-sizeMedium	Styles applied to the root element if `size="medium"`.
sizeLarge	.MuiLoadingButton-sizeLarge	Styles applied to the root element if `size="large"`.
fullWidth	.MuiLoadingButton-fullWidth	Styles applied to the root element if `fullWidth={true}`.
startIcon	.MuiLoadingButton-startIcon	Styles applied to the startIcon element if supplied.
endIcon	.MuiLoadingButton-endIcon	Styles applied to the endIcon element if supplied.
iconSizeSmall	.MuiLoadingButton-iconSizeSmall	Styles applied to the icon element if supplied and `size="small"`.
iconSizeMedium	.MuiLoadingButton-iconSizeMedium	Styles applied to the icon element if supplied and `size="medium"`.
iconSizeLarge	.MuiLoadingButton-iconSizeLarge	Styles applied to the icon element if supplied and `size="large"`.
loading	.MuiLoadingButton-loading	Styles applied to the root element if `loading={true}`.
loadingIndicator	.MuiLoadingButton-loadingIndicator	Styles applied to the loadingIndicator element.
loadingIndicatorCenter	.MuiLoadingButton-loadingIndicatorCenter	Styles applied to the loadingIndicator element if `loadingPosition="center"`.
loadingIndicatorStart	.MuiLoadingButton-loadingIndicatorStart	Styles applied to the loadingIndicator element if `loadingPosition="start"`.
loadingIndicatorEnd	.MuiLoadingButton-loadingIndicatorEnd	Styles applied to the loadingIndicator element if `loadingPosition="end"`.
endIconLoadingEnd	.MuiLoadingButton-endIconLoadingEnd	Styles applied to the endIcon element if `loading={true}` and `loadingPosition="end"`.
startIconLoadingStart	.MuiLoadingButton-startIconLoadingStart	Styles applied to the startIcon element if `loading={true}` and `loadingPosition="start"`.

您可以使用组件自定义选项对组件进行个性化：

具备全局类名.
在自定义主体中，设定一个规则名称作为组件的styleOverrides属性的一部分。

演示项目

Button