Avatar

Avatars are used to show a thumbnail of a user photo, organisation or a visual representation of other types of content.
Automatically uses presentation role if aria-label is not provided


Usage

Avatar displays a masked image when src is passed to it. It's using the image as a decorative element assuming that its text description is coming from the adjacent elements. If there is no text content available and you need to make it accessible for screen-readers, you can provide an aria-label attribute to it.

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

Another fallback option that can be used when you don't have an image for the Avatar is to use an icon. This approach can be used for representing entities, such as company thumbnails or as a decorative element for content sections.

Colors

You can assign one of the color tokens to be used as background in Avatar, which will be visible for initials and icon fallbacks.

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 your format of the content.

Accessibility

Avatar is a decorative image by default and changes to img role when aria-label attribute is passed.

Properties

NameTypeDefaultRequiredComment
srcstring-falseImage src
initialsstring-falseFallback initials when image is not available
sizesmaller, small, medium, largemediumfalse
colorneutral, neutral-faded, positive, positive-faded, critical, critical-faded, primary, primary-fadedneutral-fadedfalseBackground color
squaredboolean-falseShape of the avatar
classNamestring-falseclassName for the root element
attributesobject-falseAttributes for the root element
Previous
Next