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

Button API

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

Importação

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

Nome do componente

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

Propriedades

Props of the ButtonBase component are also available.

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.
color'inherit'
| 'primary'
| 'secondary'
| 'success'
| 'error'
| 'info'
| 'warning'
| string		'primary'
A cor do componente. Ela da suporte para as cores do tema que fazem sentido para este componente.
componentelementType
The component used for the root node. Either a string to use a HTML element or a component.
disabledboolfalse
Se true, o componente está desabilitado.
disableElevationboolfalse
If true, no elevation is used.
disableFocusRippleboolfalse
If true, the keyboard focus ripple is disabled.
disableRippleboolfalse
If true, the ripple effect is disabled.
⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure to highlight the element by applying separate styles with the focusVisibleClassName.
endIconnode
Element placed after the children.
fullWidthboolfalse
If true, the button will take up the full width of its container.
hrefstring
The URL to link to when the button is clicked. If defined, an a element will be used as the root node.
size'small'
| 'medium'
| 'large'
| string		'medium'
The size of the button. small is equivalent to the dense button styling.
startIconnode
Element placed before the children.
sxfunc
| 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'
A variante a usar.

O ref é encaminhado para o elemento raiz.

Herança

Embora não explicitamente documentado acima, as propriedades do componente ButtonBase também estão disponíveis em Button. Você pode tirar vantagem disso para manipular componentes aninhados.

CSS

Nome da regraClasse globalDescrição
root.MuiButton-rootEstilos aplicados ao elemento raiz.
text.MuiButton-textEstilos aplicados para o elemento raiz se variant="text".
textInherit.MuiButton-textInheritEstilos aplicados para o elemento raiz se variant="text" and color="inherit".
textPrimary.MuiButton-textPrimaryEstilos aplicados para o elemento raiz se variant="text" and color="primary".
textSecondary.MuiButton-textSecondaryEstilos aplicados para o elemento raiz se variant="text" and color="secondary".
outlined.MuiButton-outlinedEstilos aplicados para o elemento raiz se variant="outlined".
outlinedInherit.MuiButton-outlinedInheritEstilos aplicados para o elemento raiz se variant="outlined" and color="inherit".
outlinedPrimary.MuiButton-outlinedPrimaryEstilos aplicados para o elemento raiz se variant="outlined" and color="primary".
outlinedSecondary.MuiButton-outlinedSecondaryEstilos aplicados para o elemento raiz se variant="outlined" and color="secondary".
contained.MuiButton-containedEstilos aplicados para o elemento raiz se variant="contained".
containedInherit.MuiButton-containedInheritEstilos aplicados para o elemento raiz se variant="contained" and color="inherit".
containedPrimary.MuiButton-containedPrimaryEstilos aplicados para o elemento raiz se variant="contained" and color="primary".
containedSecondary.MuiButton-containedSecondaryEstilos aplicados para o elemento raiz se variant="contained" and color="secondary".
disableElevation.MuiButton-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.MuiButton-colorInheritEstilos aplicados para o elemento raiz se color="inherit".
textSizeSmall.MuiButton-textSizeSmallEstilos aplicados para o elemento raiz se size="small" and variant="text".
textSizeMedium.MuiButton-textSizeMediumEstilos aplicados para o elemento raiz se size="medium" and variant="text".
textSizeLarge.MuiButton-textSizeLargeEstilos aplicados para o elemento raiz se size="large" and variant="text".
outlinedSizeSmall.MuiButton-outlinedSizeSmallEstilos aplicados para o elemento raiz se size="small" and variant="outlined".
outlinedSizeMedium.MuiButton-outlinedSizeMediumEstilos aplicados para o elemento raiz se size="medium" and variant="outlined".
outlinedSizeLarge.MuiButton-outlinedSizeLargeEstilos aplicados para o elemento raiz se size="large" and variant="outlined".
containedSizeSmall.MuiButton-containedSizeSmallEstilos aplicados para o elemento raiz se size="small" and variant="contained".
containedSizeMedium.MuiButton-containedSizeMediumEstilos aplicados para o elemento raiz se size="small" and variant="contained".
containedSizeLarge.MuiButton-containedSizeLargeEstilos aplicados para o elemento raiz se size="large" and variant="contained".
sizeSmall.MuiButton-sizeSmallEstilos aplicados para o elemento raiz se size="small".
sizeMedium.MuiButton-sizeMediumEstilos aplicados para o elemento raiz se size="medium".
sizeLarge.MuiButton-sizeLargeEstilos aplicados para o elemento raiz se size="large".
fullWidth.MuiButton-fullWidthEstilos aplicados para o elemento raiz se fullWidth={true}.
startIcon.MuiButton-startIconEstilos aplicados para the startIcon element se supplied.
endIcon.MuiButton-endIconEstilos aplicados para the endIcon element se supplied.
iconSizeSmall.MuiButton-iconSizeSmallEstilos aplicados para the icon element se supplied and size="small".
iconSizeMedium.MuiButton-iconSizeMediumEstilos aplicados para the icon element se supplied and size="medium".
iconSizeLarge.MuiButton-iconSizeLargeEstilos aplicados para the icon element se supplied and size="large".

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

Demonstrações