Anex UI logoAnex UI
npm install anexui
Documentation

Documentation

Avatar

A user avatar with image support, initials fallback, status dot, and multiple sizes.

Preview

Usage

import { Avatar } from "anexui";

<Avatar src="/debayan.jpg" alt="Debayan Sen" />
Copy code

Initials fallback

Shown when src is absent or the image fails to load.

<Avatar initials="DS" />
<Avatar src="/broken.jpg" alt="Jane Doe" initials="JD" />
Copy code

Sizes

<Avatar initials="XS" size="xs" />
<Avatar initials="SM" size="sm" />
<Avatar initials="MD" size="md" />
<Avatar initials="LG" size="lg" />
<Avatar initials="XL" size="xl" />
Copy code

Status dot

<Avatar initials="DS" status="online" />
<Avatar initials="DS" status="away" />
<Avatar initials="DS" status="busy" />
<Avatar initials="DS" status="offline" />
Copy code

Group of avatars

import { Stack, Avatar } from "anexui";

<Stack direction="row" gap="2">
  <Avatar src="/a.jpg" alt="Alice" size="sm" />
  <Avatar src="/b.jpg" alt="Bob" size="sm" />
  <Avatar initials="+3" size="sm" />
</Stack>
Copy code

Props

| Prop | Type | Default | Description | |---|---|---|---| | src | string | — | Image source URL | | alt | string | — | Alt text for the image | | initials | string | — | Fallback text shown when no image | | size | "xs" \| "sm" \| "md" \| "lg" \| "xl" | "md" | Avatar diameter | | status | "online" \| "offline" \| "away" \| "busy" | — | Status indicator dot |

All standard HTML <span> attributes are accepted (except children).