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';Refer to the Icons section of the documentation regarding the available icon options.
Nome do componente
The nameMuiIconButton can be used when providing default props or style overrides in the theme.Propriedades
Props of the ButtonBase component are also available.
| Nome | Tipo | Padrão | Descrição |
|---|---|---|---|
| children | node | The icon element. | |
| classes | object | 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' | A cor do componente. Ela da suporte para as cores do tema que fazem sentido para este componente. |
| disabled | bool | false | Se true, o componente está desabilitado. |
| disableFocusRipple | bool | false | If true, the keyboard focus ripple is disabled. |
| disableRipple | bool | false | 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. |
| sx | 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 regra | Classe global | Descrição |
|---|---|---|
| root | .MuiIconButton-root | Estilos aplicados ao elemento raiz. |
| edgeStart | .MuiIconButton-edgeStart | Estilos aplicados para o elemento raiz se edge="start". |
| edgeEnd | .MuiIconButton-edgeEnd | Estilos aplicados para o elemento raiz se edge="end". |
| colorInherit | .MuiIconButton-colorInherit | Estilos aplicados para o elemento raiz se color="inherit". |
| colorPrimary | .MuiIconButton-colorPrimary | Estilos aplicados para o elemento raiz se color="primary". |
| colorSecondary | .MuiIconButton-colorSecondary | Estilos aplicados para o elemento raiz se color="secondary". |
| disabled | .Mui-disabled | Pseudo-class aplicada a o elemento raiz se disabled={true}. |
| sizeSmall | .MuiIconButton-sizeSmall | Estilos aplicados para o elemento raiz se size="small". |
| sizeMedium | .MuiIconButton-sizeMedium | Estilos aplicados para o elemento raiz se size="medium". |
| sizeLarge | .MuiIconButton-sizeLarge | Estilos aplicados para o elemento raiz se size="large". |
Você pode sobrescrever o estilo do componente usando uma dessas opções de customização:
- With a global class name.
- With a rule name as part of the component's
styleOverridesproperty in a custom theme.