Sistema de diseño
Floating action button
Este componente flotante se sitúa sobre el contenido de la interfaz, ofreciendo un acceso rápido a una acción principal o de alta prioridad.
Figma
Storybook
AEM
Overview
Su patrón de diseño fue introducido por Google como parte de las especificaciones de Material.
Forma circular
Este componente presenta un diseño circular, lo que le permite destacar claramente sobre otros elementos de la interfaz y tiene una apariencia fácilmente reconocible.
La acción que realiza se representa mediante un icono de la librería del sistema.
Posicionamiento
Se posicionan encima del contenido a menudo cerca de la esquina inferior derecha o izquierda de la pantalla, y en la parte inferior. Esta ubicación los hace fácilmente accesibles y visibles sin obstruir el contenido principal.
Nombre
Descripción / Uso
Ejemplo
No items found.
Variantes
Cada variante del Floating action button tiene su propio propósito y su diseño indica dicha función. Es crucial mantener un uso consistente de las distintas versiones en los productos para asegurar la comunicación correcta de las acciones.
Uso de variantes de floating action button en Oxygen
Nombre
Descripción / Uso
Ejemplo
Floatting action button primario
Es un elemento diseñado para llamar la atención y fomentar la acción primaria específica. Representa la acción más importante o deseada de la página.
Floatting action button inverso
En todos aquellos casos en los que el color del fondo interfiere con el del floatting action button se utilizará la variante inversa. Pensada para contrastar en fondos de color, fotografías...
Nombre
Descripción / Uso
Ejemplo
No items found.
Opciones
Este componente está disponible en tres tamaños distintos: Medium, Small y Extra Small, para que su uso sea compatible con el resto de los elementos de la interfaz.
Tamaños del Floatting action button
Nombre
Descripción / Uso
Ejemplo
Medium size
Tamaño pensado para convivir con los botones M del sistema
Small size
Tamaño pensado para convivir con botones S del sistema. Está destinado a ir ubicado dentro de cards, tablas... o elementos de espacio reducido.
Extra small size
Tamaño pensado para incluir en filtrados de mapas agrupado con chips.
Nombre
Descripción / Uso
Ejemplo
No items found.
Behaviour
Posición
El botón se posicionará por encima de los elementos del módulo en el que se encuentre, garantizando su visibilidad y accesibilidad sin interferir con el contenido principal.
Recursos adicionales
Encuentra más información y documentación específica para cada plataforma
Anterior
Overview componentes
Siguiente
Overview componentes