Avatar
An Avatar represents a user or profile with a photo, initials from title, or a default user icon when neither image nor title is provided.
Loading Code Block...Default icon
Section titled “Default icon”If neither image nor title is set, the default user icon is shown.
Loading Code Block...Initials
Section titled “Initials”Initials come from title when no image is provided.
Loading Code Block...With image
Section titled “With image”Pass an image URL to render a profile photo at the requested size. The component falls back to initials, then a default icon, when no image is set.
Loading Code Block...Supported sizes: 20, 24, 32, 40, 48, 56, 64, 72, 80, 96.
Loading Code Block...Variants
Section titled “Variants”default (avatar only), stacked (text under avatar), side-by-side (text beside avatar). Use the dropdown to switch variant; the snippet updates to match.
Loading Code Block...Alignment
Section titled “Alignment”For stacked, use alignment: left, center, or right. Use the dropdown to switch alignment; the snippet updates to match.
John Doe
Product Manager
Loading Code Block...Avatar Group
Section titled “Avatar Group”Renders a row of avatars with an optional +N when there are more than maxAvatars entries.
Loading Code Block...
Loading Code Block...Max avatars
Section titled “Max avatars”maxAvatars caps how many faces show before a +N badge. Default is 5. The component substitutes 2 when the value is <= 0, so maxAvatars=1 is a valid configuration that renders a single avatar plus a +N indicator.
Loading Code Block...Plus button
Section titled “Plus button”Set showPlusButton and handle
Loading Code Block...Group size
Section titled “Group size”Use size (xs | sm | md) for each avatar in the group respectively.
Loading Code Block...