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 conteudo da tela, tipicamente em uma forma circular com um ícone em seu centro. BAFs vêm em dois tipos: regular e estendido.

Use apenas um BAF se é 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 guias) deve desaparecer brevemente, então reapareça se sua ação mudar.

A transição de zoom pode ser usada para conseguir isso. 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 />