Pular para o conteúdo
Ajude a traduzir esta página

LoadingButton API

Documentação da API para o componente React LoadingButton . Aprenda sobre as propriedades disponíveis e a API CSS.

Importação

import LoadingButton from '@mui/lab/LoadingButton';
// ou
import { LoadingButton } from '@mui/lab';
Você pode aprender sobre a diferença lendo este guia sobre como minimizar o tamanho do pacote.

Nome do componente

The name MuiLoadingButton can be used when providing default props or style overrides in the theme.

Propriedades

Propriedades do componente Button também estão disponíveis.

NomeTipoPadrãoDescrição
childrennode
O conteúdo do componente.
classesobject
Sobrescreve ou extende os estilos aplicados para o componente. Veja a API CSS abaixo para maiores detalhes.
disabledboolfalse
Se true, o componente está desabilitado.
loadingboolfalse
If true, the loading indicator is shown.
loadingIndicatornode<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.
sxArray<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.

O ref é encaminhado para o elemento raiz.

Herança

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

CSS

Nome da regraClasse globalDescrição
root.MuiLoadingButton-rootEstilos aplicados ao elemento raiz.
text.MuiLoadingButton-textEstilos aplicados para o elemento raiz se variant="text".
textInherit.MuiLoadingButton-textInheritEstilos aplicados para o elemento raiz se variant="text" and color="inherit".
textPrimary.MuiLoadingButton-textPrimaryEstilos aplicados para o elemento raiz se variant="text" and color="primary".
textSecondary.MuiLoadingButton-textSecondaryEstilos aplicados para o elemento raiz se variant="text" and color="secondary".
textSuccess.MuiLoadingButton-textSuccessStyles applied to the root element if variant="text" and color="success".
textError.MuiLoadingButton-textErrorStyles applied to the root element if variant="text" and color="error".
textInfo.MuiLoadingButton-textInfoStyles applied to the root element if variant="text" and color="info".
textWarning.MuiLoadingButton-textWarningStyles applied to the root element if variant="text" and color="warning".
outlined.MuiLoadingButton-outlinedEstilos aplicados para o elemento raiz se variant="outlined".
outlinedInherit.MuiLoadingButton-outlinedInheritEstilos aplicados para o elemento raiz se variant="outlined" and color="inherit".
outlinedPrimary.MuiLoadingButton-outlinedPrimaryEstilos aplicados para o elemento raiz se variant="outlined" and color="primary".
outlinedSecondary.MuiLoadingButton-outlinedSecondaryEstilos aplicados para o elemento raiz se variant="outlined" and color="secondary".
outlinedSuccess.MuiLoadingButton-outlinedSuccessStyles applied to the root element if variant="outlined" and color="success".
outlinedError.MuiLoadingButton-outlinedErrorStyles applied to the root element if variant="outlined" and color="error".
outlinedInfo.MuiLoadingButton-outlinedInfoStyles applied to the root element if variant="outlined" and color="info".
outlinedWarning.MuiLoadingButton-outlinedWarningStyles applied to the root element if variant="outlined" and color="warning".
contained.MuiLoadingButton-containedEstilos aplicados para o elemento raiz se variant="contained".
containedInherit.MuiLoadingButton-containedInheritEstilos aplicados para o elemento raiz se variant="contained" and color="inherit".
containedPrimary.MuiLoadingButton-containedPrimaryEstilos aplicados para o elemento raiz se variant="contained" and color="primary".
containedSecondary.MuiLoadingButton-containedSecondaryEstilos aplicados para o elemento raiz se variant="contained" and color="secondary".
containedSuccess.MuiLoadingButton-containedSuccessStyles applied to the root element if variant="contained" and color="success".
containedInfo.MuiLoadingButton-containedInfoStyles applied to the root element if variant="contained" and color="info".
containedError.MuiLoadingButton-containedErrorStyles applied to the root element if variant="contained" and color="error".
containedWarning.MuiLoadingButton-containedWarningStyles applied to the root element if variant="contained" and color="warning".
disableElevation.MuiLoadingButton-disableElevationEstilos aplicados para o elemento raiz se disableElevation={true}.
focusVisible.Mui-focusVisiblePseudo-class aplicada a o elemento raiz ButtonBase se o botão está focado no teclado.
disabled.Mui-disabledPseudo-class aplicada a o elemento raiz se disabled={true}.
colorInherit.MuiLoadingButton-colorInheritEstilos aplicados para o elemento raiz se color="inherit".
textSizeSmall.MuiLoadingButton-textSizeSmallEstilos aplicados para o elemento raiz se size="small" and variant="text".
textSizeMedium.MuiLoadingButton-textSizeMediumEstilos aplicados para o elemento raiz se size="medium" and variant="text".
textSizeLarge.MuiLoadingButton-textSizeLargeEstilos aplicados para o elemento raiz se size="large" and variant="text".
outlinedSizeSmall.MuiLoadingButton-outlinedSizeSmallEstilos aplicados para o elemento raiz se size="small" and variant="outlined".
outlinedSizeMedium.MuiLoadingButton-outlinedSizeMediumEstilos aplicados para o elemento raiz se size="medium" and variant="outlined".
outlinedSizeLarge.MuiLoadingButton-outlinedSizeLargeEstilos aplicados para o elemento raiz se size="large" and variant="outlined".
containedSizeSmall.MuiLoadingButton-containedSizeSmallEstilos aplicados para o elemento raiz se size="small" and variant="contained".
containedSizeMedium.MuiLoadingButton-containedSizeMediumEstilos aplicados para o elemento raiz se size="small" and variant="contained".
containedSizeLarge.MuiLoadingButton-containedSizeLargeEstilos aplicados para o elemento raiz se size="large" and variant="contained".
sizeSmall.MuiLoadingButton-sizeSmallEstilos aplicados para o elemento raiz se size="small".
sizeMedium.MuiLoadingButton-sizeMediumEstilos aplicados para o elemento raiz se size="medium".
sizeLarge.MuiLoadingButton-sizeLargeEstilos aplicados para o elemento raiz se size="large".
fullWidth.MuiLoadingButton-fullWidthEstilos aplicados para o elemento raiz se fullWidth={true}.
startIcon.MuiLoadingButton-startIconEstilos aplicados para the startIcon element se supplied.
endIcon.MuiLoadingButton-endIconEstilos aplicados para the endIcon element se supplied.
iconSizeSmall.MuiLoadingButton-iconSizeSmallEstilos aplicados para the icon element se supplied and size="small".
iconSizeMedium.MuiLoadingButton-iconSizeMediumEstilos aplicados para the icon element se supplied and size="medium".
iconSizeLarge.MuiLoadingButton-iconSizeLargeEstilos aplicados para the icon element se supplied and size="large".
loading.MuiLoadingButton-loadingEstilos aplicados para o elemento raiz se loading={true}.
loadingIndicator.MuiLoadingButton-loadingIndicatorEstilos aplicados a the loadingIndicator element.
loadingIndicatorCenter.MuiLoadingButton-loadingIndicatorCenterEstilos aplicados para the loadingIndicator element se loadingPosition="center".
loadingIndicatorStart.MuiLoadingButton-loadingIndicatorStartEstilos aplicados para the loadingIndicator element se loadingPosition="start".
loadingIndicatorEnd.MuiLoadingButton-loadingIndicatorEndEstilos aplicados para the loadingIndicator element se loadingPosition="end".
endIconLoadingEnd.MuiLoadingButton-endIconLoadingEndEstilos aplicados para the endIcon element se loading={true} and loadingPosition="end".
startIconLoadingStart.MuiLoadingButton-startIconLoadingStartEstilos aplicados para the startIcon element se loading={true} and loadingPosition="start".

Você pode sobrescrever o estilo do componente usando uma dessas opções de customização:

Demonstrações