Botão de ação flutuante

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

Botão de ação flutuante

Um botão de ação flutuante aparece na frente de todo conteúdo 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.

É recomendado utilizar apenas um botão de ação flutuante por tela, esse botão deve representar a ação mais comum.

<Fab color="primary" aria-label="add">
  <AddIcon />
</Fab>
<Fab color="secondary" aria-label="edit">
  <EditIcon />
</Fab>
<Fab variant="extended">
  <NavigationIcon className={classes.extendedIcon} />
  Navigate
</Fab>
<Fab disabled aria-label="like">
  <FavoriteIcon />
</Fab>

Tamanho

Use a propriedade size para aumentar ou diminuir botões de ação flutuante.

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 />