Avatar

Representación visual del usuario con fallback automático cuando la imagen no carga.

---

Import

import { Avatar, AvatarImage, AvatarFallback } from '@imansi/ui';

---

Uso básico

<Avatar>
  <AvatarImage src="https://github.com/usuario.png" alt="Nombre" />
  <AvatarFallback>JP</AvatarFallback>
</Avatar>

El AvatarFallback se muestra mientras carga la imagen o si falla.

---

Tamaños

<Avatar className="h-6 w-6">...</Avatar>
<Avatar className="h-8 w-8">...</Avatar>
<Avatar className="h-10 w-10">...</Avatar>
<Avatar className="h-12 w-12">...</Avatar>
<Avatar className="h-16 w-16">...</Avatar>

---

Fallback con iniciales

<Avatar>
  <AvatarImage src={usuario.avatar} />
  <AvatarFallback>
    {usuario.nombre.slice(0, 2).toUpperCase()}
  </AvatarFallback>
</Avatar>

---

Fallback con ícono

import { User } from 'lucide-react';

<Avatar>
  <AvatarImage src={usuario.avatar} />
  <AvatarFallback>
    <User className="h-4 w-4" />
  </AvatarFallback>
</Avatar>

---

Grupo de avatares

<div className="flex -space-x-2">
  <Avatar className="border-2 border-background">
    <AvatarImage src="/user1.png" />
    <AvatarFallback>U1</AvatarFallback>
  </Avatar>
  <Avatar className="border-2 border-background">
    <AvatarImage src="/user2.png" />
    <AvatarFallback>U2</AvatarFallback>
  </Avatar>
  <Avatar className="border-2 border-background">
    <AvatarFallback>+5</AvatarFallback>
  </Avatar>
</div>

---

Con indicador de estado

<div className="relative">
  <Avatar>
    <AvatarImage src={usuario.avatar} />
    <AvatarFallback>{usuario.iniciales}</AvatarFallback>
  </Avatar>
  <span className="absolute bottom-0 right-0 h-3 w-3 rounded-full bg-success border-2 border-background" />
</div>

---

Props

Avatar

Prop	Tipo	Default	Descripción
className	string	—	Clases adicionales

AvatarImage

Prop	Tipo	Default	Descripción
src	string	—	URL de la imagen
alt	string	—	Texto alternativo

AvatarFallback

Prop	Tipo	Default	Descripción
delayMs	number	0	Delay antes de mostrar el fallback

---

Accesibilidad

• alt en AvatarImage para lectores de pantalla
• AvatarFallback actúa como alternativa textual