Avatar

The Avatar component is used to represent a user or a entity. It displays a picture or a fallback to initials.

Variant

The Avatar comes with two visual styles: circle and square. You should use a circle avatar to represent a person, and a square avatar to represent an entity, such as a company.

<>
  <Avatar variant="circle" src="/aurelien.webp" text="Michael Murphy" />
  <Avatar variant="square" src="/aurelien.webp" text="Michael Murphy" />
</>

Size

The Avatar comes in five different sizes: 16, 24, 32 (default), 40, and 56.

MMMMM

<>
  <Avatar size={16} src="/aurelien.webp" text="Michael Murphy" />
  <Avatar size={24} src="/aurelien.webp" text="Michael Murphy" />
  <Avatar size={32} src="/aurelien.webp" text="Michael Murphy" />
  <Avatar size={40} src="/aurelien.webp" text="Michael Murphy" />
  <Avatar size={56} src="/aurelien.webp" text="Michael Murphy" />
</>

Badge

A badge can be used with an avatar to display additional information, such as a supplier in an expense claim situation.

MLML

<>
  <Avatar
    badgeProps={{
      src: "/chloe.webp",
      text: "Laura Lagarde",
      variant: "square",
    }}
    size={40}
    text="Michael Murphy"
    variant="circle"
  />
  <Avatar
    badgeProps={{
      src: "/chloe.webp",
      text: "Laura Lagarde",
      variant: "circle",
    }}
    size={40}
    text="Michael Murphy"
    variant="square"
  />
</>

IconName

Name of the icon to display in the Avatar.

Use either :

iconName for icons
or src for images (with or without fallbackSrc)

<>
  <Avatar
    iconName="car"
    size={40}
    text="drive"
    variant="square"
  />
  <Avatar iconName="person" size={40} text="George Gray" />
</>

Fallback

If there is an error loading the src of the avatar or if the src has not been specified, there are 2 fallbacks:

If there's a fallbackSrc prop, we use it.
If there's no fallbackSrc prop, we use the text props to generate the initials and a random color for both the background and the text color.

GLMN

<>
  <Avatar
    fallbackSrc="/jean.webp"
    size={40}
    text="Spendesk"
  />
  <Avatar size={40} text="George Gray" />
  <Avatar size={40} text="Lewis Barker" />
  <Avatar size={40} text="Michael Murphy" />
  <Avatar size={40} text="Nayden Lennart" />
</>