Avatar
Avatars are used to show a thumbnail of a user photo, organisation or a visual representation of other types of content.

Usage

By default, avatars are used to display an image complemented by an accessibility label.

When the image for the avatar is not available for display, you can use initials fallback.

Another type of fallback that can be used when you don't have an image for the Avatar is to use an icon. This approach works well for styling sections of content when you need to make content recognizable.

Sizes

Avatar comes in 4 sizes: smaller, small, medium (default) and large.

Shapes

Avatar can represented as a square shape with a squared property when you need to adapt it to the format of the content.

Colors

When using Avatar with initials or an icon, you can assign a color to its background.

Accessibility

Avatar component requires an ariaLabel property to be used to make it accessible for assistive technologies.

Properties

NameTypeDefaultRequiredComment
srcstring-falseImage src
ariaLabelstring-true
initialsstring-falseFallback initials when image is not available
sizesmaller, small, medium, largemediumfalse
colorpositive, critical-falseBackground color
squaredboolean-falseShape of the avatar
classNamestring-falseclassName for the root element
attributesobject-falseAttributes for the root element