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

IconButton API

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

Importação

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

Refer to the Icons section of the documentation regarding the available icon options.

Nome do componente

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

Propriedades

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

NomeTipoPadrãoDescrição
childrennode
The icon element.
classesobject
Sobrescreve ou extende os estilos aplicados para o componente. Veja a API CSS abaixo para maiores detalhes.
color'inherit'
| 'default'
| 'primary'
| 'secondary'
| 'error'
| 'info'
| 'success'
| 'warning'
| string		'default'
The color of the component. It supports both default and custom theme colors, which can be added as shown in the palette customization guide.
disabledboolfalse
Se true, o componente está desabilitado.
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.
edge'end'
| 'start'
| false		false
If given, uses a negative margin to counteract the padding on one side (this is often helpful for aligning the left or right side of the icon with content above or below, without ruining the border size and shape).
size'small'
| 'medium'
| 'large'
| string		'medium'
The size of the button. small is equivalent to the dense button styling.
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.

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 IconButton. Você pode tirar vantagem disso para manipular componentes aninhados.

CSS

Nome da regraClasse globalDescrição
root.MuiIconButton-rootEstilos aplicados ao elemento raiz.
edgeStart.MuiIconButton-edgeStartEstilos aplicados para o elemento raiz se edge="start".
edgeEnd.MuiIconButton-edgeEndEstilos aplicados para o elemento raiz se edge="end".
colorInherit.MuiIconButton-colorInheritEstilos aplicados para o elemento raiz se color="inherit".
colorPrimary.MuiIconButton-colorPrimaryEstilos aplicados para o elemento raiz se color="primary".
colorSecondary.MuiIconButton-colorSecondaryEstilos aplicados para o elemento raiz se color="secondary".
disabled.Mui-disabledPseudo-class aplicada a o elemento raiz se disabled={true}.
sizeSmall.MuiIconButton-sizeSmallEstilos aplicados para o elemento raiz se size="small".
sizeMedium.MuiIconButton-sizeMediumEstilos aplicados para o elemento raiz se size="medium".
sizeLarge.MuiIconButton-sizeLargeEstilos aplicados para o elemento raiz se size="large".

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

Demonstrações