Avatar
Avatars represent users, organizations, or entities with size variants, shapes, status indicators, and group stacking.
Avatar
The Avatar component represents users or entities with support for image loading, initials fallback, default silhouette fallback, online/offline status dots, and overlapping AvatarGroup stacks.
Preview
Properties
import { Avatar } from '@moul-dev/ui';
export default function Example() {
return (
<Avatar src="https://github.com/thasophearak.png" alt="Phearak Tha" status="online" />
);
}Import
import { Avatar, AvatarGroup } from '@moul-dev/ui';Sizes
Avatars come in six standardized sizes: xs (24px), sm (32px), md (40px, default), lg (48px), xl (56px), and 2xl (64px).
<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" />
<Avatar initials="2X" size="2xl" />Shapes
Avatars support circle (default) and square shapes with rounded squircle corners.
<Avatar initials="CI" shape="circle" size="lg" />
<Avatar initials="SQ" shape="square" size="lg" />Status Indicators
Display online, away, busy, or offline status dots anchored to the avatar with an elevated background ring.
<Avatar initials="ON" status="online" size="lg" />
<Avatar initials="AW" status="away" size="lg" />
<Avatar initials="BU" status="busy" size="lg" />
<Avatar initials="OF" status="offline" size="lg" />AvatarGroup
Use AvatarGroup to stack multiple avatars together with negative overlap. Set the max prop to automatically display the remaining count with a +N badge.
<AvatarGroup max={3} aria-label="Team members">
<Avatar initials="AL" aria-label="Alex" />
<Avatar initials="BT" aria-label="Beth" />
<Avatar initials="CK" aria-label="Chris" />
<Avatar initials="DL" aria-label="Dana" />
<Avatar initials="EV" aria-label="Evan" />
</AvatarGroup>Props
Prop
Type