Avatar

Display user profile image, initials or fallback icon

Import

Source

View source code

Docs

Edit this page

Package

@mantine/core

Usage

// With image
<Avatar src="avatar.png" alt="it's me" />

// Default placeholder
<Avatar radius="xl" />

// Letters with xl radius
<Avatar color="cyan" radius="xl">MK</Avatar>

// Custom placeholder icon
<Avatar color="blue" radius="sm">
  <StarIcon style={{ width: 24, height: 24 }} />
</Avatar>

If src prop is not set, equals to null or image cannot be loaded, placeholder icon will be rendered instead. You can use any React node instead of placeholder icon. Usually icon or initials are used in this case:

// Default placeholder
<Avatar src={null} alt="no image here" />

// Default placeholder with custom color
<Avatar src={null} alt="no image here" color="indigo" />

// Placeholder with initials
<Avatar src={null} alt="Vitaly Rtishchev color="red">VR</Avatar>

// Placeholder with custom icon
<Avatar color="blue" radius="xl">
  <StarIcon />
</Avatar>

Size and radius

Control avatar width and height with size and border-radius with radius. Both props have predefined values: xs, sm, md, lg, xl. Alternatively you can use number to set radius or size in px:

<Avatar radius="lg" /> // -> theme predefined large radius
<Avatar radius={10} /> // -> { borderRadius: '10px' }

<Avatar size="sm" /> // -> predefined small size
<Avatar size={50} /> // -> { width: '50px', height: '50px' }

Predefined sizes from xs to xl:

Theme radius from xs to xl:

You can get predefined avatar sizes by importing AVATAR_SIZES:

import { AVATAR_SIZES } from '@mantine/core';

Size	Width and height
xs	16px
sm	26px
md	38px
lg	56px
xl	84px

Accessibility

Avatar renders img html element. It is important to add alt text. In case of image load failing alt will be used as title for placeholder.

// alt is used as alt img attribute
<Avatar src={image} alt="Rob Johnson" />

// alt is used as title attribute
<Avatar alt="Rob Johnson">RJ</Avatar>