Skip to main content

Avatar

Base​

Size​

There are different sizes for the Avatar. See the Component API for more details.

Image​

It is possible to add an image to Avatar, using the src property. If the image is removed, an abbreviation of the text applied in the alt property should be displayed.

Format​

The component has two different formats, with specific applications:

  • Rounded: This is the default format of the component and should be used when Avatar identifies a person
  • Rectangular: To apply the rectangular format you need to add the isBrand property. This format should be used when Avatar identifies a company

Background color​

It is possible to change the background color of the avatar. The background is displayed when an image is not added to the component. To change this color, use the color property.

The allowed values are available through the Avatar.colors attribute. Click on any of the avatars below to copy the color code to the desktop.

Feedback​