Avatar
The Avatar component displays a user's profile picture, initials, or placeholder in a recognizable format. It helps personalize the interface and identify users across different parts of the application.
JS
tsx
Default
Basic avatar with an image.
Sizes
Five sizes: xs, sm, md (default), lg, and xl.
Initials
Displays 1-2 character initials when no image is available.
JD
AB
QA
Placeholder
Shows a generic user icon when no src or initials are provided.
Status
Presence indicator at bottom-right. Use companySrc for a company logo badge.
AB
AvatarLabel
Pairs an avatar with a name and optional description.
Jane DoeProduct Designer
John SmithEngineering Manager
AB
Alice BrownHead of Design
Unknown User
AvatarGroup
Stacks avatars with overlap. Use max to limit visible count.
JD
JS
AB
+2
AB
CD
+2
+1