Components/Avatar

Avatar

User image with fallback initials, status indicator, and six size presets.

Installation

Examples

Sizes

Six sizes from xs to 2xl.

avatar
xs
avatar
sm
avatar
md
avatar
lg
avatar
xl

Status indicators

Show online, busy, away, or offline state.

Online
Online
Busy
Busy
Away
Away
Offline
Offline

Fallback initials

Shown when no src is provided or image fails.

AJ
SK
MW

Avatar group

Stack avatars with configurable max and overflow.

user
user
user
user
user
+6

API Reference

PropTypeDefaultDescription
srcstringImage URL.
namestringUsed for alt text and fallback initials.
size'xs'|'sm'|'md'|'lg'|'xl'|'2xl''md'Controls width, height, and font size.
shape'circle'|'square''circle'Border radius style.
status'online'|'offline'|'busy'|'away'Shows a colored status dot.
fallbackstringCustom text when image fails to load.