Avatar

Iniciales del ejecutivo, un ícono o la cara de un cliente simulado (decorativa, junto a su nombre).

Abrir en Figma (393:9654)

Size md

neutral
CL
sand
CL
brand
CL
burgundy
CL

Size sm

neutral
CL
sand
CL
brand
CL
burgundy
CL

Ficha

Categoría
Data display
Nivel
átomo
Estado
en revisión
Radix
no
Actualizado
2026-10-26
Figma
393:9654
Fuente
design-system/componentes/Avatar.md

Cuándo usarlo

  • «Mi cuenta» al pie del rail (abre el menú de perfil); el ejecutivo en la cabecera de un mensaje; vistas de supervisor.
  • Kind=image sm (32) junto a las burbujas del cliente simulado en la conversación (MANIFIESTO 23-oct).

Cuándo NO usarlo

  • El coach → IsotipoCoach (DV-19).
  • La foto principal del cliente en la simulación → ClientPortrait.

Anatomía

<span> círculo de 44 (sm 32) con iniciales (label/sm · label/xs), Icon/user (24 · 16) o imagen recortada (object-fit: cover).

Props

PropFigmaValoresPor defecto
kindKindinitials · icon · imageinitials
toneToneneutral · sand · brand · burgundyneutral
sizeSizemd (44) · sm (32)md
initialsInitials2 letrasCL
src— (relleno de imagen en Figma)ruta en /public/clientes—
icon— (Figma usa Icon/user fijo)nombre de íconouser

Estados

Sin estados: no es interactivo (el botón «Mi cuenta» del rail lo envuelve).

Accesibilidad

  • La imagen es decorativa (alt=""); las iniciales se leen como texto; el ícono es decorativo.
  • El nombre de la persona va siempre en texto al lado (DV-28). Cuando es el único control (rail), el botón que lo envuelve lleva aria-label «Mi cuenta» y objetivo de 44.

Contenido

Dos iniciales en mayúscula: nombre + primer apellido, de datos/fixtures/persona.json; caras de datos/fixtures/clientes.json (un cliente = una cara).

Errores conocidos

  • Ninguno medido.

Changelog

  • 2026-10-26 · nace (T-02) con los tres Kind, cuatro Tone y dos Size.

Tokens que consume