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 o conteúdo da tela, tipicamente em uma forma circular com um ícone em seu centro. BAFs podem ser de dois tipos: regular e estendido.

Only use a FAB if it is the most suitable way to present a screen's primary action. Only one component is recommended per screen to represent the most common action.

BAF básico

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

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

Press Enter to start editing

Tamanho

Por padrão, o tamanho é grande. 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 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>

Press Enter to start editing

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

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

Press Enter to start editing

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

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.

<Fab />