Core · Mostrar contenido

Avatar

Identifica a una persona o un equipo con sus iniciales o una foto, en tres tamaños.

components/avatar.css
Sin JavaScript
Claro · Oscuro · Alto contraste
Con pruebas
1 problema conocido

Esta traducción la ha escrito una IA y todavía no la ha revisado ninguna persona. Leer esta página en inglés

Ejemplo

Tres avatares pequeños, medianos y grandes, cada uno con las iniciales de una persona.

AB CD EF

Problemas conocidos

Si no se carga una foto, el navegador muestra su texto alt dentro del cuadro, en mayúsculas como las iniciales del avatar; un nombre largo puede desbordarlo. El nombre sigue disponible para el lector de pantalla.

Código

Copiar el marcado

HTML

<span class="luz-avatar luz-avatar--md" role="img" aria-label="Carlos Díaz">CD</span>

Junto al nombre de la persona, el avatar lo repite: ocúltalo en su lugar.

HTML

<span class="luz-avatar luz-avatar--sm" aria-hidden="true">CD</span> Carlos Díaz

Con una foto: la imagen ocupa el cuadro y se recorta en forma de cuadrado.

HTML

<span class="luz-avatar luz-avatar--md"><img src="/img/ana.jpg" width="36" height="36" alt="Ana Belén"></span>

<span class="luz-avatar luz-avatar--lg"><img src="/img/ana.jpg" width="48" height="48" alt=""></span> Ana Belén

Variantes y opciones

Elige un modificador de tamaño.

Sin un modificador, el avatar no tiene un tamaño propio. El contenido son las iniciales o un elemento <img>.

Clase o contenido	Efecto
`.luz-avatar--sm`	24 × 24 px, texto extrapequeño
`.luz-avatar--md`	36 × 36 px, texto pequeño
`.luz-avatar--lg`	48 × 48 px, texto base
Con un elemento `<img>` dentro	Una foto: ocupa el cuadro, se recorta en forma de cuadrado y adopta las esquinas del avatar

Cómo funciona

Un cuadro en línea que centra el texto, al que da estilo components/avatar.css. No necesita JavaScript.

Las iniciales se muestran en mayúsculas con la fuente mono (text-transform: uppercase).
Los colores son el tono suave de marca y el color de texto de marca en todos los modos.
Una foto es un elemento <img> que ocupa el 100% del cuadro, con object-fit: cover y las esquinas del avatar (border-radius: inherit). El cuadro no recorta el contenido (no usa overflow: hidden), por lo que las iniciales que superan un cuadro pequeño con texto al 200 % siguen siendo legibles.

Sin JavaScript

No cambia nada: el avatar solo usa HTML y CSS.

Teclado y ARIA

Un avatar no es interactivo ni recibe el foco.

Las iniciales por sí solas son una imagen: usa role="img" y un aria-label con el nombre completo para que el lector de pantalla no deletree las iniciales.
Una foto por sí sola se identifica mediante su alt, con el nombre de la persona: no necesita role ni aria-label. Si la foto es lo único que hay dentro de un enlace o botón, el alt identifica el control e indica también la acción: alt="Ana Belén, your account".
Junto al nombre, el avatar es decorativo: añade aria-hidden="true" a las iniciales y alt="" a la foto.
Dentro de un enlace o botón con texto, el texto identifica el control; oculta el avatar.

El contraste y el foco están en la pestaña Diseño.

Diseño

Cuándo usarlo

Usa un avatar para identificar a una persona o una cuenta cuando hay poco espacio, por ejemplo, en una lista de miembros o junto a quien escribe un comentario.

Cuándo no usarlo

No uses un avatar como única forma de distinguir a las personas.

Dos personas pueden tener las mismas iniciales: muestra el nombre en texto junto al avatar.
Para indicar un estado o una categoría, usa una etiqueta.
Para mostrar el retrato de un ponente o un producto a mayor tamaño, usa una tarjeta con el marco de imagen: consulta Ponentes en las plantillas de la página de inicio. Un avatar mide de 24 a 48 px.

Qué hacer y qué no

Hazlo Muestra el nombre junto al avatar: dos personas pueden tener las mismas iniciales.

Evítalo No uses solo avatares para distinguir a las personas: «AB» y «AB» pueden ser personas distintas.

Hazlo Usa el mismo encuadre en todas las fotos de una lista: cabeza y hombros, con la cara alejada de los bordes, porque el cuadro las recorta en forma de cuadrado.

Evítalo No mezcles fotos e iniciales en una lista que podría usar solo una de las dos opciones: quienes no tienen foto parecerán un tipo distinto de miembro.

Cómo escribir el contenido

Dos iniciales del nombre que usa la persona.

El nombre accesible es el nombre completo, nunca las iniciales. En una foto, se indica en alt.
Usa el mismo tamaño para todos los avatares de una lista.

Contraste y foco

Las iniciales usan el color de texto de marca sobre el tono suave de marca. La foto es contenido: el sistema no la mide.

Parte	Color sobre el fondo	Claro	Oscuro	Alto contraste	Mínimo
Iniciales	`--luz-brand-primary` on `--luz-brand-subtle` over `--luz-surface-page`	5.1:1	6.5:1	13.6:1	4.5:1

Medido a partir de los valores de los tokens de cada modo y redondeado hacia abajo. El mínimo requerido es el de WCAG 2.2 AA: 4,5:1 para texto y 3:1 para anillos de foco, bordes e iconos.

Foco: el avatar no lo recibe. Si forma parte de un enlace, el anillo del enlace lo delimita.
No depende solo del color: las iniciales y el nombre accesible identifican a la persona; el color es igual para todos.

Tokens que usa

Los 7 tokens que lee components/avatar.css, agrupados por familia. Cada familia enlaza a su página, donde aparecen los valores de todos los modos. En Figma son variables con los mismos nombres: consulta Tokens en Figma.

Color: --luz-brand-primary, --luz-brand-subtle
Typography: --luz-font-mono, --luz-text-base, --luz-text-sm, --luz-text-xs
Radius: --luz-radius-md

El teclado y ARIA están en la pestaña Código.