Usage #
Examples #
Basic #
Displays a user representation using an image, icon, or label initials.
Image #
Use the image property to display an image as an Avatar.
Badge #
A Badge can be used to display a badge on an Avatar.
Shape #
Avatar comes in two different styles specified with the shape property, square is the default and circle is the alternative.
Sizes #
Use the size property to change the size of an avatar.
AvatarGroup #
Grouping is available by wrapping multiple Avatar components inside an AvatarGroup.
Template #
Content can easily be customized with the dynamic content instead of using the built-in modes.
Accessibility #
Screen Reader
Avatar does not include any roles and attributes by default. Any attribute is passed to the root element so you may add a role like img along with aria-labelledby or aria-label to describe the component. In case avatars need to be tabbable, tabIndex can be added as well to implement custom key handlers.
Keyboard Support
Component does not include any interactive elements.