Avatar

avatar versions

The Avatar comes in three different versions:

The first version uses the user profile's image:

<Avatar src={imageURL} alt="John's portrait" />

The name version generates an avatar based on the name's initials:

<Avatar name={name} />

In absence of src or name, it falls back to a generic user icon:

<Avatar />

appearance

• It uses a circle border by default, as it sets the border-radius to 1000px.
• The default size is 36px

Mantine ensures the avatar keeps a square aspect ratio, cropping the image if needed, and that it covers the whole area, thanks to object-fit: cover.