Avatar
Flexible avatar components in multiple sizes with support for images, text placeholders, notification badges, and grouped avatars.
Basic Avatars
Avatar components in five different sizes from small to 2xl
Avatars with Notification Badge
Add colored notification badges to indicate online status or activity
Avatars with Text Placeholder
Use initials or text when no image is available, with optional notification badges
ms
ms
ms
ms
ms
ms
ms
ms
ms
ms
Avatar Groups
Display multiple avatars in an overlapping group layout
Props Reference
| Prop | Type | Description |
|---|---|---|
| src | string | Image source URL |
| text | string | Text to display when no image (e.g., initials) |
| size | string | Avatar size: sm, md, lg, xl, 2xl |
| notifyColor | string | Notification badge color (e.g., "bg-rose-500") |
| wrapClassName | string | Additional CSS classes for wrapper |
| images | string[] | (AvatarGroup only) Array of image URLs |