Avatar
Foto o iniciales de una persona, sola o en grupo solapado.
Usar
import {
Avatar,
AvatarGroup,
} from "@unozero-ai/ui/react";
<Avatar></Avatar>Iniciales
Sin src, el avatar pinta las iniciales del nombre y apellido sobre un tinte que sale del propio nombre: la misma persona tiene el mismo color en todas las pantallas, sin guardarlo en ningún sitio. Un nombre de una sola palabra da una sola letra.
Con src pinta la foto con el nombre como texto alternativo. Si la imagen falla, vuelve a las iniciales: el kit React no lo hacía, y ya no hace falta comprobar la URL antes de pasarla.
Tamaños
sm (32 px) para filas densas y grupos, md (40 px) en listas de conversaciones, lg (48 px) en cabeceras de detalle y xl (64 px) en la ficha de un huésped o del perfil.
Grupo
AvatarGroup solapa los avatares y resume el resto en +N a partir de max (4 por defecto). Úsalo para decir quién comparte algo —el equipo que atiende un hotel, los agentes de una conversación—, no para listar personas: cada nombre solo se ve al pasar el ratón.
names acepta nombres o { name, src } para quien tiene foto. El +N lleva como nombre accesible a las personas que resume.
En la ficha de un huésped
El avatar acompaña al nombre, no lo sustituye: el nombre siempre va escrito al lado, porque las iniciales solas no identifican a nadie y el color cambia de un nombre a otro sin significado.
María José Restrepo
4 estancias · la última en agosto
API
Generada del custom-elements.json que publica @unozero-ai/ui. Las partes se estilan desde tu CSS con el nombre del elemento: uz-button::part(base).