Avatar

Representa a una persona u organización de forma compacta: foto, iniciales automáticas e indicador de estado.

Preview principal

AVATARimagen · iniciales · grupo

CR

+5

Sin src muestra iniciales desde name. El grupo apila y solapa.

Tamaños

xs · sm · md · lg · xl — de 24px a 64px.

xs

sm

md

lg

xl

Iniciales

Placeholder automático si no hay imagen.

MDJPANDE

Estados

Punto de color en la esquina — decorativo, no uses solo color para comunicar.

online

offline

away

busy

Grupo

AvatarGroup solapa los hijos. El último suele ser el contador (+N).

+1

ATCRMD+3

Variantes

Variante	Uso
Imagen	Con src disponible
Iniciales	Sin imagen — se generan desde name

Tamaños

Tamaño	Diámetro
xs	24px
sm	32px
md	40px
lg	56px
xl	64px

Estados

Estado	Color
online	Verde
offline	Rojo
away	Ámbar
busy	Rojo

Uso

import { Avatar, AvatarGroup } from "devsoftec-ui";

<Avatar src="/ana.jpg" name="Ana Torres" size="lg" />
<Avatar name="Carlos Ruiz" status="online" />

<AvatarGroup>
  <Avatar name="U1" />
  <Avatar name="U2" />
  <Avatar name="+5" />
</AvatarGroup>

Accesibilidad

• Usa name siempre: alimenta el alt de la imagen y las iniciales.
• El indicador de estado es decorativo: no dependas solo del color.