Oxygen 1.1.0

Infobox

Es un componente de interfaz que ofrece información adicional y relevante de forma concisa y destacada, sin interrumpir la experiencia del usuario.
Figma
Storybook
AEM

Overview

Una infobox se integra de manera destacada pero sutil en el diseño de la interfaz, proporcionando información adicional. Está diseñada para ofrecer detalles contextuales, explicaciones o instrucciones sobre temas específicos, lo que mejora la comprensión del usuario.

Se ubican de forma estratégica para asegurar que la información relevante sea siempre accesible y visible.

Nombre
Descripción / Uso
Ejemplo
No items found.

Variantes


Existen cuatro variantes de infobox, cada una diseñada para cumplir con un propósito específico: advertencia (warning), información (information), éxito (success) y error (error).

Nombre
Descripción / Uso
Ejemplo
No items found.

Nombre
Descripción / Uso
Ejemplo
No items found.

Opciones

Cada una de las variables puede tener distintas opciones dentro de su configuración:

Button

Por defecto, esta opción está desactivada. Cuando se habilita, el botón permite a los usuarios realizar acciones directas, como confirmar una alerta, acceder a información adicional o ejecutar una función relacionada con el mensaje.

Icon

No es obligatorio incluir un icono, pero ayuda a reforzar la semántica del mensaje. Esta opción está desactivada por defecto.

Title

El título está desactivado por defecto, pero puede añadirse para ofrecer contexto adicional y mejorar la claridad y la jerarquía visual del mensaje.

Nombre
Descripción / Uso
Ejemplo
No items found.

Nombre
Descripción / Uso
Ejemplo
No items found.

Behaviour

Overflow

Título: Máximo de 2 líneas.

Descripción: Hasta 2 líneas en desktop y 4 líneas en mobile.