---
title: "Avatar"
description: "User avatar with image, fallback, badge, and grouped avatar stack."
section: "Libraries"
group: "UI components"
order: 500
---

## Usage

```tsx
import { Avatar, AvatarFallback, AvatarImage } from "@aeontel/ui";

<Avatar>
  <AvatarImage src={user.avatarUrl} alt={user.name} />
  <AvatarFallback>{user.name.slice(0, 2).toUpperCase()}</AvatarFallback>
</Avatar>;
```

## Exports

### `Avatar`

User avatar root.

```ts
Avatar(props: AvatarPrimitive.Root.Props & { size?: "default" | "sm" | "lg"; }): JSX.Element
```

**Props**

| Prop    | Type                                     | Default     | Description |
| ------- | ---------------------------------------- | ----------- | ----------- |
| `size?` | `"default" \| "sm" \| "lg" \| undefined` | `"default"` |             |

### `AvatarImage`

Image element of the avatar.

```ts
AvatarImage(props: AvatarPrimitive.Image.Props): JSX.Element
```

### `AvatarFallback`

Fallback shown when the image fails to load.

```ts
AvatarFallback(props: AvatarPrimitive.Fallback.Props): JSX.Element
```

### `AvatarBadge`

Small status badge attached to the avatar.

```ts
AvatarBadge(props: React.ComponentProps<"span">): JSX.Element
```

### `AvatarGroup`

Stack of overlapping avatars.

```ts
AvatarGroup(props: React.ComponentProps<"div">): JSX.Element
```

### `AvatarGroupCount`

Counter showing remaining avatars in a group.

```ts
AvatarGroupCount(props: React.ComponentProps<"div">): JSX.Element
```