Basic
Avatar can be used for displaying image, icon, or character on square or circle shaped elements. Put image, icon, or character into Avatar.Display or add display property to Avatar component. Look the example below.
Circle version
Extend default avatar element with circle property to change its shape to be circular.
Sizing
If you want to change avatar size, you can use size property with sm|lg values.
Group
Wrap a series of avatar elements into AvatarGroup to group the elements. Instead of applying avatar sizing classes to every avatar in a group, just set size property to each AvatarGroup
Contextual colors
Change avatar color for functionality, check examples below.
Solid
You can use those by setting variant property to avatar element
Label
For these variant, you can use label-(color) in variant property