Componentes Botón de acción flotante
El botón de acción flotante (FAB) muestra la acción principal de una pantalla: crear, redactar, agregar. Flota sobre el contenido.
Usa un FAB solo para la acción más importante y más frecuente de la pantalla. Un FAB por pantalla.
Es lo más visible de la pantalla: color de marca y sombra.
Representa una acción constructiva: crear, compartir, explorar. Nunca borrar.
Lleva a la acción en un toque, sin menús intermedios (salvo el expandible).
Material 01
Círculo elevado con un ícono que flota sobre el contenido. Representa la acción más importante de la pantalla. Hay dos tamaños: normal (56 dp) y mini (40 dp).
Úsalo para: crear, redactar, agregar: la acción que define la pantalla, sobre todo en apps.
Evítalo si: la acción es destructiva, poco frecuente o hay más de una igual de importante.
Material 02
FAB con ícono y texto, en forma de píldora. Se entiende sin adivinar el ícono.
Úsalo para: cuando el ícono solo no es claro, o en pantallas anchas con espacio.
Evítalo si: el texto es largo: más de dos palabras ya no cabe bien.
Otros 03
Un FAB que al tocarlo despliega de 3 a 6 acciones relacionadas.
Úsalo para: cuando la acción principal tiene variantes: nueva foto, nuevo correo, nuevo evento.
Evítalo si: hay más de 6 acciones: entonces es un menú, no un FAB.
Al bajar, el FAB extendido se encoge y queda solo el ícono, para no tapar el contenido. Al subir, vuelve a mostrar el texto. Es el comportamiento recomendado en Material.
| Medida | Material 2 (dp) |
|---|---|
| FAB normal | 56 × 56, ícono 24 |
| FAB mini | 40 × 40, ícono 24 |
| FAB extendido | alto 48, radio 24, ícono 24, 12 entre ícono y texto |
| Margen al borde | 16 (celular) / 24 (tablet, escritorio) |
| Elevación | 6 en reposo, 12 al presionar |