Avatar
Circular representations of a user — supports a photo, initials fallback, and icon fallback. Comes in 6 sizes with optional border ring, status indicator, and corner badge.
Sizes
Seven sizes: xxs (16 px) · xs (24 px) · sm (32 px) · md (40 px) · lg (48 px) · xl (56 px) · 2xl (64 px).
Fallbacks
When no src is provided, the avatar falls back to initials derived from the name prop (purple-50 bg, violet-500 text). Without name or initials, a person icon is shown.
Initials
Icon
Bordered
Add isBordered to apply a 4 px purple-100 outline ring around the avatar circle.
Photo
Initials
Icon
Status indicator
The status prop renders a small dot at the bottom-right corner. Four values are supported: online (emerald), offline (zinc), busy (rose), away (amber). Can be combined with isBordered.
All statuses (md)
Photo · all sizes
Initials · all sizes
Bordered + online · all sizes
Corner badge
Pass a URL to badge to show a small company logo or app icon pinned to the bottom-right corner with a white ring separator. Mutually exclusive with status.
Photo · all sizes
Initials · all sizes
Icon · all sizes
Bordered + badge · all sizes