Avatar

Ver la demo

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

Iniciales del ejecutivo, un ícono o una imagen (Kind=image: la cara de un cliente simulado de la página Imagery, decorativa junto a su nombre). El tono da un color suave para que no se lea como un círculo vacío; es por banco o por usuario, nunca el burgundy del coach fuera del coach.

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