> ## Documentation Index
> Fetch the complete documentation index at: https://docs.devreadykit.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Avatar
> Display user profile pictures, initials, or icons with customizable sizes and status badges
export const AvatarTeamMembersExamplePreview = () => ;
export const AvatarUserListExamplePreview = () => ;
export const AvatarStatusBadgesExample = () => ;
export const AvatarSizesExample = () => ;
export const AvatarIconExample = () => ;
export const AvatarInitialsExample = () => ;
export const AvatarImageFallbackExample = () => ;
export const AvatarBasicExample = () => ;
## Overview
The UserBold component displays user profile images, initials, or icons with support for different sizes and status indicators.
## Basic Usage
```tsx theme={null}
import { Avatar } from '@peppermint-design/devreadykit-custom';
export default function App() {
return (
);
}
```
### Fallback to Initials
When the image fails to load, it automatically falls back to initials.
```tsx theme={null}
import Avatar from "@peppermint-design/devreadykit-custom";
export default function AvatarImageFallback() {
return (
);
}
```
## Initials Avatars
### With Name
The component automatically generates initials from the name.
```tsx theme={null}
import Avatar from "@peppermint-design/devreadykit-custom";
export default function AvatarInitials() {
return (
);
}
```
## Icon Avatars
```tsx theme={null}
import Avatar from "@peppermint-design/devreadykit-custom";
import { User } from "@/assets/icons/user";
export default function AvatarIconExamples() {
return (
} />
} />
} />
} />
);
}
```
## Sizes
Avatars support four fixed sizes. The default size token is `sm` (40px).
```tsx theme={null}
```
## Status Badges
### With Status Badge
```tsx theme={null}
import Avatar from "@peppermint-design/devreadykit-custom";
export default function AvatarStatusBadges() {
return (