Avatar

El objetivo principal de un componente Avatar es facilitar el reconocimiento rápido del usuario y aportar contexto humano a acciones, contenidos o estados del sistema.

En Energy, el avatar es el elemento que da identidad y cercanía a las personas dentro del producto. Normalmente se presenta como una imagen de perfil. Cuando no hay imagen disponible, el sistema utiliza automáticamente las iniciales del nombre para mantener la identificación clara, y en última instancia recurre a un icono genérico como alternativa.

En Energy, el componente Avatar puede configurarse con un badge para comunicar información importante de un solo vistazo.

Badge

Este indicador visual se utiliza para avisar de que el usuario tiene nuevas notificaciones, mensajes pendientes o alguna actualización relevante, ayudando a no pasar nada por alto. Es una configuración de ON-OFF.

Iniciales

Cuando no se dispone de una imagen de perfil, el avatar utiliza iniciales para representar al usuario. Por defecto, se toma la primera letra del nombre y del apellido. Si el usuario no tiene apellido, se utilizan los dos primeros caracteres del nombre, ignorando números y caracteres especiales. En los casos en los que no exista un nombre de usuario o el producto no deba mostrar caracteres, se recomienda utilizar la variante de icono o foto para mantener una representación clara y neutra.

Color de fondo del avatar

El avatar permite configurar su color de fondo como una herramienta visual para diferenciar usuarios, tipos de usuario o criterios de negocio. Puede utilizar colores planos o gradientes, siempre asegurando que el contenido del avatar (iniciales o icono) mantenga el contraste adecuado. Para ello, se emplean colores de texto o iconos en variantes content o content inverse, garantizando legibilidad en todo momento.

Color por defecto

El color por defecto del avatar se utiliza cuando no se requiere ningún tipo de diferenciación adicional. Es una opción neutra, alineada con el sistema visual de Energy, pensada para la mayoría de contextos estándar.

Escalado del tamaño del avatar

El tamaño por defecto del avatar es de 40px, aunque el componente permite escalarse respetando siempre sus proporciones. El tamaño mínimo recomendado es de 24px, mientras que el máximo dependerá del contexto en el que se utilice. Para mantener una apariencia consistente y una buena alineación dentro del sistema, se recomienda utilizar tamaños que sean múltiplos de 8px (por ejemplo, 24px, 32px, 40px, 48px).