Components / Avatar
👤

Avatar

User profile avatar component with image fallback and multiple size options.

Display

Variants

User name

Small

Props:

size="sm"
User name

Medium

Props:

size="md"
User name

Large

Props:

size="lg"

With Status

Props:

size="md"status="online"
MK

Initials

Props:

size="md"fallback="initials"

Group

Props:

variant="group"

Props / API

Prop Type Default Description
src string - Image source URL
alt string - Alt text for image
size string md Avatar size: sm, md, lg, xl
status string - Status indicator: online, offline, away
fallback string - Fallback: initials, icon

Usage

<!-- Basic Avatar -->
<Avatar src="path/to/image.jpg" alt="User" />

<!-- With Status -->
<Avatar src="path/to/image.jpg" status="online" />

<!-- Initials Fallback -->
<Avatar fallback="MK" />

<!-- Group of Avatars -->
<AvatarGroup>
  <Avatar src="avatar1.jpg" />
  <Avatar src="avatar2.jpg" />
  <Avatar src="avatar3.jpg" />
</AvatarGroup>