Sistema de diseño
Popover
El Popover es un componente flotante que aparece sobre el contenido, ofreciendo información adicional y permitiendo realizar acciones relacionadas.
Figma
Storybook
AEM
Overview
Componente flotante que aparece sobre el contenido al hacer clic en un elemento interactivo o área específica, o de manera automática al cargar una página.
A diferencia de los tooltips, los popovers ofrecen más contenido y permiten interacciones adicionales. Es esencial que se usen de manera que no bloqueen la interfaz ni se superpongan con otros popovers, lightboxes o tooltips, y deben incluir un botón de cerrar.
Nombre
Descripción / Uso
Ejemplo
No items found.
Variantes
El popover consta de diferentes variantes, cada una diseñada para satisfacer distintos propósitos de interacción e información. Son las siguientes:
Informative
Proporciona información relevante al usuario.
Actionable
Permite realizar acciones directamente desde el popover, facilitando tareas rápidas sin necesidad de abandonar el contexto actual.
Stepper
Guía al usuario a través de un proceso o tema, dividiendo la información en pasos secuenciales. Se mantiene fijo en la posición en la que se activa.
Onboarding default
Guía a los usuarios a través de procesos de onboarding o proporciona información detallada sobre herramientas y flujos de trabajo. Puede moverse por la pantalla y, en algunos casos, ir acompañado de un overlay que atenúa el fondo, destacando únicamente el onboarding.
Onboarding with image
El onboarding con imagen tiene la misma funcionalidad que el onboarding default, pero añade una imagen que refuerza el mensaje y mejora la comprensión visual del contenido.
Nombre
Descripción / Uso
Ejemplo
No items found.
Nombre
Descripción / Uso
Ejemplo
No items found.
Opciones
Los pointers (indicadores) definen la dirección y alineación del popover en relación con el elemento de referencia. Estas son las opciones disponibles:
Nombre
Descripción / Uso
Ejemplo
No items found.
Nombre
Descripción / Uso
Ejemplo
No items found.
Behaviour
Aspectos a tener en cuenta sobre el comportamiento del popover:
Position
Se colocará a 8px de distancia respecto al elemento al que hace referencia.
Legal
Existen dos tipos de opciones legales: Legal bloqueante y Legal accionable.
Legal bloqueante: Este tipo de legal impide al usuario continuar con la acción principal hasta que haya seleccionado el checkbox aceptando los términos. El botón primario permanecerá inactivo hasta que no se hayan aceptado.
Legal accionable: En este caso, el enlace proporciona información adicional sin requerir la selección de un checkbox. El botón primario está activo en todo momento, permitiendo que el usuario continúe sin interrumpir el flujo de la acción.
Recursos adicionales
Encuentra más información y documentación específica para cada plataforma
Anterior
Overview componentes
Siguiente
Overview componentes