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

Fab API

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

Importação

import Fab from '@mui/material/Fab';
// ou
import { Fab } 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 MuiFab 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
O conteúdo do componente.
classesobject
Sobrescreve ou extende os estilos aplicados para o componente. Veja a API CSS abaixo para maiores detalhes.
color'default'
| 'error'
| 'info'
| 'inherit'
| 'primary'
| 'secondary'
| '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.
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.
disableFocusRippleboolfalse
If true, the keyboard focus ripple is disabled.
disableRippleboolfalse
If true, the ripple effect is disabled.
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		'large'
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.
variant'circular'
| 'extended'
| string		'circular'
A variante a usar.

O ref é encaminhado para o elemento raiz.

Herança

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

CSS

Nome da regraClasse globalDescrição
root.MuiFab-rootEstilos aplicados ao elemento raiz.
primary.MuiFab-primaryEstilos aplicados para o elemento raiz se color="primary".
secondary.MuiFab-secondaryEstilos aplicados para o elemento raiz se color="secondary".
extended.MuiFab-extendedEstilos aplicados para o elemento raiz se variant="extended".
circular.MuiFab-circularEstilos aplicados para o elemento raiz se variant="circular".
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.MuiFab-colorInheritEstilos aplicados para o elemento raiz se color="inherit".
sizeSmall.MuiFab-sizeSmallEstilos aplicados para o elemento raiz se size="small"`.
sizeMedium.MuiFab-sizeMediumEstilos aplicados para o elemento raiz se size="medium"`.

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

Demonstrações