Avatar

El Avatar identifica a una persona con su foto, sus iniciales o un ícono. Se muestra siempre junto a su nombre, en listas, responsables de un trámite, comentarios o resultados.

Propiedades y configuraciones

Variante

Usa la foto de la persona cuando esté disponible; si no, sus iniciales. El ícono es para cuando no hay nombre ni foto.

InicialesImagenÍcono

Cuando hay nombre pero no foto.

MG

Cuando hay nombre pero no foto.

La foto ayuda a reconocer a la persona. Si el nombre está al lado, deja el alt vacío.

Para cuando no hay nombre ni foto disponibles.

Cuando usarlo

Úsalo para representar a una persona sin interacción: en listas de personas, responsables de un trámite, comentarios o resultados de búsqueda. El avatar ayuda a reconocerla, pero no reemplaza su nombre.

Si la persona tiene sesión iniciada y necesitas abrir el menú de su cuenta en el header, usa Avatar Menu.

Buenas prácticas

Recomendado: Acompaña el avatar con el nombre

La foto o las iniciales ayudan a reconocer a la persona. Muestra su nombre cerca para identificarla sin depender de la imagen.

Recomendado: Usa iniciales cuando no haya fotografía

Si conoces el nombre pero no tienes una foto, usa las iniciales del nombre y apellido. No dejes el espacio vacío.

Recomendado: Elige el tamaño según el contexto

Usa el tamaño habitual en listas y uno mayor en perfiles destacados. Mantén el mismo tamaño entre elementos equivalentes.

Malas prácticas

No recomendado: No identifiques a la persona solo con el avatar

Distintas personas pueden compartir iniciales o tener fotos parecidas. Sin un nombre visible, es difícil distinguirlas.

No recomendado: No uses un logo como fotografía de una persona

Un logo no permite reconocer a la persona titular de la cuenta. Usa su fotografía o, si no está disponible, sus iniciales.

No recomendado: No pongas el nombre completo dentro del avatar

El espacio está pensado para iniciales breves. Los nombres completos se recortan y pierden legibilidad; muéstralos junto al avatar.

Recomendaciones de accesibilidad

Muestra el nombre como texto visible
Las variantes de iniciales e ícono son decorativas (aria-hidden="true"). La identificación de la persona debe estar en un texto visible cercano, no solo en el avatar.

Describe la foto con el nombre de la persona
En la variante con imagen, el <img> lleva un alt con el nombre de la persona. Si el nombre ya aparece junto al avatar, usa alt="" para que no se anuncie dos veces.

No lo conviertas en un control
El avatar informa, no ejecuta acciones. Si al activarlo se abre la cuenta de la persona, usa Avatar Menu, que ya es un botón con nombre accesible y estado.