Avatar

User avatar with optional status indicator and grouping.

Import

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

Usage

<Avatar src="/photo.jpg" alt="User" size="md" status="online" />
<Avatar fallback="JD" size="lg" />

<AvatarGroup max={3}>
  <Avatar src="/a.jpg" alt="A" />
  <Avatar src="/b.jpg" alt="B" />
  <Avatar src="/c.jpg" alt="C" />
  <Avatar src="/d.jpg" alt="D" />
</AvatarGroup>

Avatar Props

Prop	Type	Default	Description
src	string \| null	—	Image URL.
alt	string	—	Alt text.
fallback	string	—	Initials when no image.
size	"xs" \| "sm" \| "md" \| "lg" \| "xl"	"md"	Avatar size.
status	"online" \| "offline" \| "away" \| "busy" \| null	—	Status indicator dot.

AvatarGroup Props

Prop	Type	Default	Description
max	number	—	Max avatars to show before +N.
size	AvatarSize	—	Uniform size for all avatars.
children	ReactNode	—	Avatar elements.