Avatar

Avatar con imagen, iniciales como fallback, indicador de estado y AvatarGroup apilable.

pnpm dlx nuvo-ui add avatar

Tamaños

Con imagen + fallback

Estado (status dot)

AvatarGroup

Uso

import { Avatar, AvatarGroup } from "@nuvo-ui/ui"

<Avatar src="/avatar.jpg" name="Bryan Fernandez" status="online" size="lg" />

<AvatarGroup
  size="sm"
  max={3}
  avatars={[
    { name: "Ana López",    status: "online" },
    { name: "Carlos García" },
    { src: "/foto.jpg", name: "María Pérez" },
  ]}
/>

Props — Avatar

Prop	Tipo	Default	Descripción
src	string	—	URL de la imagen
alt	string	—	Texto alternativo para la imagen
name	string	—	Nombre para generar iniciales como fallback
size	"xs" \| "sm" \| "md" \| "lg" \| "xl"	"md"	Tamaño del avatar
status	"online" \| "offline" \| "away" \| "busy"	—	Dot de estado (esquina inferior derecha)