Botón de acción flotante

Un botón de acción flotante (FAB) realiza la acción principal, o la más común, en una pantalla.

Un botón de acción flotanteaparece delante de todo el contenido de la pantalla, típicamente como una forma circular con un icono en su centro. Los FABs vienen en dos tipos: regulares y extendidos.

Sólo usa un FAB si es la forma más adecuada de presentar la acción principal de una pantalla. Only use a FAB if it is the most suitable way to present a screen's primary action.

Botón de acción flotante

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

Tamaño

Usa el tamaño para botones de acción flotante más grandes o más pequeños.

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

Animación

El botón de acción flotante se anima en la pantalla como una pieza de material en expansión, por defecto.

Un botón de acción flotante que abarca múltiples pantallas laterales (como las pantallas con pestañas) debería desaparecer brevemente, para luego reaparecer si su acción cambia.

La transición Zoom se puede utilizar para lograr esto. Tenga en cuenta que como las animaciones de salida y de entrada se disparan al mismo tiempo, usamos enterDelay para permitir que la animación del Botón de Acción Flotante saliente termine antes de que el nuevo entre.

Item One

API

<Fab />