Avatar
The Avatar component displays a user or entity representation using an image, icon, or initials.Installation
Usage
Image Avatar
Initials Avatar
Icon Avatar
Avatar Group
Props
Avatar
Used to determine the initials, alt text (if using an image), or title (if using an icon) of the Avatar.
Sets the size of the avatar.
Pass a Paste Icon to display in the Avatar.
Pass an image path to display in the Avatar.
color
'default' | 'decorative10' | 'decorative20' | 'decorative30' | 'decorative40'
default:"default"
Override the default color for decorative purposes.
Sets the shape of the avatar. ‘user’ is circular, ‘entity’ is rounded square.
Overrides the default element name to apply unique styles with the Customization Provider.
AvatarGroup
Set a size for every Avatar within the Avatar Group.
Set a variant for every Avatar within the Avatar Group.
Overrides the default element name to apply unique styles with the Customization Provider.
Features
- Automatically generates initials from the name prop
- Supports multiple color variants for decorative purposes
- Two shape variants: circular for users, rounded square for entities
- Grouping support with automatic spacing