跳到内容

加载按钮API

React LoadingButton 组件的 API 参考文档。了解此导出模块的 props、CSS 和其他 API。

演示

导入

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

通过阅读这篇关于最小化包大小的指南来了解差异。

Props

也可使用Button组件的 Props。

名称类型默认值描述
children节点-

组件的内容。

classes对象-

覆盖或扩展应用于组件的样式。

有关详细信息，请参阅下面的CSS 类 API。

disabled布尔值false

如果为true，则禁用该组件。

loading布尔值false

如果为true，则显示加载指示器并禁用按钮。

loadingIndicator节点<CircularProgress color="inherit" size={16} />

如果按钮处于加载状态，则放置在子元素之前的元素。该节点应包含一个带有role="progressbar"且具有可访问名称的元素。默认情况下，我们会渲染一个由按钮本身标记的CircularProgress。

loadingPosition'start'
| 'end'
| 'center'		'center'

加载指示器可以位于按钮的开始、结束或中心位置。

sx数组<函数
| 对象
| 布尔值>
| 函数
| 对象		-

允许定义系统覆盖以及其他 CSS 样式的系统 prop。

有关详细信息，请参阅`sx` 页面。

variant'contained'
| 'outlined'
| 'text'
| 字符串		'text'

要使用的变体。

ref 被转发到根元素。

继承

尽管上面没有明确记录，但Button组件的 props 也可在 LoadingButton 中使用。您可以利用这一点来定位嵌套组件。

主题默认 props

您可以使用 MuiLoadingButton 使用主题来更改此组件的默认 props。

CSS 类

这些类名对于使用 CSS 设置样式非常有用。当触发特定状态时，它们将应用于组件的插槽。

类名规则名称描述
.Mui-disabled如果 disabled={true}，则应用于根元素的状态类。
.Mui-focusVisible如果按钮是通过键盘聚焦的，则应用于 ButtonBase 根元素的状态类。
.MuiLoadingButton-colorErrorcolorError如果 color="error"，则应用于根元素的样式。
.MuiLoadingButton-colorInfocolorInfo如果 color="info"，则应用于根元素的样式。
.MuiLoadingButton-colorInheritcolorInherit如果 color="inherit"，则应用于根元素的样式。
.MuiLoadingButton-colorPrimarycolorPrimary如果 color="primary"，则应用于根元素的样式。
.MuiLoadingButton-colorSecondarycolorSecondary如果 color="secondary"，则应用于根元素的样式。
.MuiLoadingButton-colorSuccesscolorSuccess如果 color="success"，则应用于根元素的样式。
.MuiLoadingButton-colorWarningcolorWarning如果 color="warning"，则应用于根元素的样式。
.MuiLoadingButton-containedcontained如果 variant="contained"，则应用于根元素的样式。
.MuiLoadingButton-containedErrorcontainedError如果 variant="contained" 且 color="error"，则应用于根元素的样式。
.MuiLoadingButton-containedInfocontainedInfo如果 variant="contained" 且 color="info"，则应用于根元素的样式。
.MuiLoadingButton-containedInheritcontainedInherit如果 variant="contained" 且 color="inherit"，则应用于根元素的样式。
.MuiLoadingButton-containedPrimarycontainedPrimary如果 variant="contained" 且 color="primary"，则应用于根元素的样式。
.MuiLoadingButton-containedSecondarycontainedSecondary如果 variant="contained" 且 color="secondary"，则应用于根元素的样式。
.MuiLoadingButton-containedSizeLargecontainedSizeLarge如果 size="large" 且 variant="contained"，则应用于根元素的样式。
.MuiLoadingButton-containedSizeMediumcontainedSizeMedium如果 size="medium" 且 variant="contained"，则应用于根元素的样式。
.MuiLoadingButton-containedSizeSmallcontainedSizeSmall如果 size="small" 且 variant="contained"，则应用于根元素的样式。
.MuiLoadingButton-containedSuccesscontainedSuccess如果 variant="contained" 且 color="success"，则应用于根元素的样式。
.MuiLoadingButton-containedWarningcontainedWarning如果 variant="contained" 且 color="warning"，则应用于根元素的样式。
.MuiLoadingButton-disableElevationdisableElevation当 disableElevation={true} 时，应用于根元素的样式。
.MuiLoadingButton-endIconendIcon如果提供了 endIcon 元素，则应用于该元素的样式。
.MuiLoadingButton-endIconLoadingEndendIconLoadingEnd当 loading={true} 且 loadingPosition="end" 时，应用于 endIcon 元素的样式。
.MuiLoadingButton-fullWidthfullWidth当 fullWidth={true} 时，应用于根元素的样式。
.MuiLoadingButton-iconicon如果提供了 icon 元素，则应用于该元素的样式
.MuiLoadingButton-iconSizeLargeiconSizeLarge如果提供了 icon 元素且 size="large"，则应用于该元素的样式。
.MuiLoadingButton-iconSizeMediumiconSizeMedium如果提供了 icon 元素且 size="medium"，则应用于该元素的样式。
.MuiLoadingButton-iconSizeSmalliconSizeSmall如果提供了 icon 元素且 size="small"，则应用于该元素的样式。
.MuiLoadingButton-labellabel应用于包裹子元素的 span 元素的样式。
.MuiLoadingButton-loadingloading当 loading={true} 时，应用于根元素的样式。
.MuiLoadingButton-loadingIndicatorloadingIndicator应用于 loadingIndicator 元素的样式。
.MuiLoadingButton-loadingIndicatorCenterloadingIndicatorCenter当 loadingPosition="center" 时，应用于 loadingIndicator 元素的样式。
.MuiLoadingButton-loadingIndicatorEndloadingIndicatorEnd当 loadingPosition="end" 时，应用于 loadingIndicator 元素的样式。
.MuiLoadingButton-loadingIndicatorStartloadingIndicatorStart当 loadingPosition="start" 时，应用于 loadingIndicator 元素的样式。
.MuiLoadingButton-outlinedoutlined当 variant="outlined" 时，应用于根元素的样式。
.MuiLoadingButton-outlinedErroroutlinedError当 variant="outlined" 且 color="error" 时，应用于根元素的样式。
.MuiLoadingButton-outlinedInfooutlinedInfo当 variant="outlined" 且 color="info" 时，应用于根元素的样式。
.MuiLoadingButton-outlinedInheritoutlinedInherit当 variant="outlined" 且 color="inherit" 时，应用于根元素的样式。
.MuiLoadingButton-outlinedPrimaryoutlinedPrimary当 variant="outlined" 且 color="primary" 时，应用于根元素的样式。
.MuiLoadingButton-outlinedSecondaryoutlinedSecondary当 variant="outlined" 且 color="secondary" 时，应用于根元素的样式。
.MuiLoadingButton-outlinedSizeLargeoutlinedSizeLarge当 size="large" 且 variant="outlined" 时，应用于根元素的样式。
.MuiLoadingButton-outlinedSizeMediumoutlinedSizeMedium当 size="medium" 且 variant="outlined" 时，应用于根元素的样式。
.MuiLoadingButton-outlinedSizeSmalloutlinedSizeSmall当 size="small" 且 variant="outlined" 时，应用于根元素的样式。
.MuiLoadingButton-outlinedSuccessoutlinedSuccess当 variant="outlined" 且 color="success" 时，应用于根元素的样式。
.MuiLoadingButton-outlinedWarningoutlinedWarning当 variant="outlined" 且 color="warning" 时，应用于根元素的样式。
.MuiLoadingButton-rootroot应用于根元素的样式。
.MuiLoadingButton-sizeLargesizeLarge当 size="large" 时，应用于根元素的样式。
.MuiLoadingButton-sizeMediumsizeMedium当 size="medium" 时，应用于根元素的样式。
.MuiLoadingButton-sizeSmallsizeSmall当 size="small" 时，应用于根元素的样式。
.MuiLoadingButton-startIconstartIcon如果提供了 startIcon 元素，则应用于该元素的样式。
.MuiLoadingButton-startIconLoadingStartstartIconLoadingStart当 loading={true} 且 loadingPosition="start" 时，应用于 startIcon 元素的样式。
.MuiLoadingButton-texttext当 variant="text" 时，应用于根元素的样式。
.MuiLoadingButton-textErrortextError当 variant="text" 且 color="error" 时，应用于根元素的样式。
.MuiLoadingButton-textInfotextInfo当 variant="text" 且 color="info" 时，应用于根元素的样式。
.MuiLoadingButton-textInherittextInherit当 variant="text" 且 color="inherit" 时，应用于根元素的样式。
.MuiLoadingButton-textPrimarytextPrimary当 variant="text" 且 color="primary" 时，应用于根元素的样式。
.MuiLoadingButton-textSecondarytextSecondary当 variant="text" 且 color="secondary" 时，应用于根元素的样式。
.MuiLoadingButton-textSizeLargetextSizeLarge当 size="large" 且 variant="text" 时，应用于根元素的样式。
.MuiLoadingButton-textSizeMediumtextSizeMedium当 size="medium" 且 variant="text" 时，应用于根元素的样式。
.MuiLoadingButton-textSizeSmalltextSizeSmall当 size="small" 且 variant="text" 时，应用于根元素的样式。
.MuiLoadingButton-textSuccesstextSuccess当 variant="text" 且 color="success" 时，应用于根元素的样式。
.MuiLoadingButton-textWarningtextWarning如果 variant="text" 且 color="warning"，则应用于根元素的样式。

您可以使用以下自定义选项之一来覆盖组件的样式

源代码

如果您在此页面中没有找到信息，请查看组件的实现以获取更多详细信息。