Avatar
Avatar represents people using icons, labels and images.
A letter Avatar is defined with the label property.
Label
Circle
Badge
Usage #
Examples #
Label #
A letter Avatar is defined with the label property.
Label
Circle
Badge
Icon #
A font icon is displayed as an Avatar with the icon property.
Icon
Circle
Badge
Image #
Use the image property to display an image as an Avatar.
Image
Badge
Gravatar
AvatarGroup #
Grouping is available by wrapping multiple Avatar components inside an AvatarGroup.
Size #
size property defines the size of the Avatar with large and xlarge as possible values.
Shape #
Avatar comes in two different styles specified with the shape property, square is the default and circle is the alternative.
Badge #
A badge can be added to an Avatar with the OverlayBadge component.
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.
