Saltar al contenido

🎉 Material UI v5 is out! Head to the migration guide to get started.

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.

Botón de acción flotante

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.

Se recomienda un solo botón de acción flotante por pantalla para representar la acción más común.

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

Tamaño

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

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