Botão de ação flutuante

Um botão de ação flutuante (BAF) realiza a principal, ou mais comum, ação na tela.

Um botão de ação flutuante aparece na frente de todo conteudo da tela, tipicamente em uma forma circular com um ícone em seu centro. BAFs podem ser de dois tipos: regular e estendido.

Use um BAF apenas se for a maneira mais adequada para apresentar a ação principal de uma tela. Only use a FAB if it is the most suitable way to present a screen's primary action.

Botão de ação flutuante

<Fab color="primary" aria-label="add">
  <AddIcon />
</Fab>
<Fab color="secondary" aria-label="edit">
  <EditIcon />
</Fab>
<Fab variant="extended">
  <NavigationIcon sx={{ mr: 1 }} />
  Navigate
</Fab>
<Fab disabled aria-label="like">
  <FavoriteIcon />
</Fab>

Tamanho

By default, the size is large. Use the size prop for smaller floating action buttons.

<Fab size="small" color="secondary" aria-label="add">
  <AddIcon />
</Fab>
<Fab size="medium" color="secondary" aria-label="add">
  <AddIcon />
</Fab>
<Fab color="secondary" aria-label="add">
  <AddIcon />
</Fab>

<Fab variant="extended" size="small" color="primary" aria-label="add">
  <NavigationIcon sx={{ mr: 1 }} />
  Extended
</Fab>
<Fab variant="extended" size="medium" color="primary" aria-label="add">
  <NavigationIcon sx={{ mr: 1 }} />
  Extended
</Fab>
<Fab variant="extended" color="primary" aria-label="add">
  <NavigationIcon sx={{ mr: 1 }} />
  Extended
</Fab>

Animação

O botão de ação flutuante anima na tela como uma parte expansiva do material, por padrão.

Um botão de ação flutuante que abranja várias telas laterais (como telas com abas) deve desaparecer brevemente, então reaparecer se sua ação mudar.

A transição com Zoom pode ser usada para esta finalidade. Observe que, como as animações de entrada e saída são acionadas ao mesmo tempo, usamos enterDelay para permitir que a animação do botão de ação flutuante de saída termine antes que a nova seja inserida.

Item One

API

<Fab />