The Avatar component is used to represent a user or a entity. It displays a picture or a fallback to initials.
View source codeThe 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" />
</>
The Avatar comes in five different sizes: 16, 24, 32 (default), 40, and 56.
<>
<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" />
</>
A badge can be used with an avatar to display additional information, such as a supplier in an expense claim situation.
<>
<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"
/>
</>
Name of the icon to display in the Avatar.
Use either :
iconName for iconssrc for images (with or without fallbackSrc)<>
<Avatar iconName="car" size={40} text="drive" variant="square" />
<Avatar iconName="person" size={40} text="George Gray" />
</>
If there is an error loading the src of the avatar or if the src has not been specified, there are 2 fallbacks:
fallbackSrc prop, we use it.fallbackSrc prop, we use the text props to generate the initials and a random color for both the background and the text color.<>
<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" />
</>
GLMN