跳至內容

載入按鈕API

React LoadingButton 元件的 API 參考文件。瞭解此匯出模組的屬性、CSS 和其他 API。

展示

導入

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

閱讀此最小化套件大小指南以了解差異。

屬性

Button 元件的屬性也適用。

名稱類型預設值說明
childrennode-

元件的內容。

classesobject-

覆寫或擴展套用到元件的樣式。

有關更多詳細資訊，請參閱下面的 CSS 類別 API。

disabledboolfalse

如果為 true，則停用元件。

loadingboolfalse

如果為 true，則顯示載入指示器，且按鈕會變成停用狀態。

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

如果按鈕處於載入狀態，則放置在子項之前的元素。該節點應包含一個具有 role="progressbar" 且具有可訪問名稱的元素。預設情況下，我們會渲染一個由按鈕本身標記的 CircularProgress。

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

載入指示器可以放置在按鈕的開頭、結尾或中央。

sxArray<func
| object
| bool>
| func
| object		-

系統屬性，允許定義系統覆寫以及其他 CSS 樣式。

有關更多詳細資訊，請參閱 `sx` 頁面。

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

要使用的變體。

ref 會轉送至根元素。

繼承

雖然上面沒有明確記載，但 Button 元件的屬性在 LoadingButton 中也可用。您可以利用這個優勢來 設定目標巢狀元件。

主題預設屬性

您可以使用 MuiLoadingButton 透過主題更改此元件的預設屬性。

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"，則套用至 icon 元素的樣式。
.MuiLoadingButton-iconSizeMediumiconSizeMedium如果有提供 icon 元素且 size="medium"，則套用至 icon 元素的樣式。
.MuiLoadingButton-iconSizeSmalliconSizeSmall如果有提供 icon 元素且 size="small"，則套用至 icon 元素的樣式。
.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"，則套用至根元素的樣式。

您可以使用以下其中一種自訂選項來覆寫元件的樣式

原始程式碼

如果您在此頁面中找不到資訊，請考慮查看元件的實作以取得更多詳細資訊。