Avatar

Display user profile image, initials or fallback icon
Import

Usage

it's me
MK
// 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>

Placeholder

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:

VR
// 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

Size
Radius
<Avatar src="https://images.unsplash.com/photo-1508214751196-bcfd4ca60f91?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=255&q=80" />

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 a 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:
it's me
it's me
it's me
it's me
it's me
Theme radius from xs to xl:
it's me
it's me
it's me
it's me
it's me

You can get predefined avatar sizes by importing AVATAR_SIZES:

import { AVATAR_SIZES } from '@mantine/core';
SizeWidth and height
xs16px
sm26px
md38px
lg56px
xl84px

Change root element

You can set component prop on Avatar to use provide custom root element, for example, you can make avatar a link:

it's me
<Avatar
component="a"
href="https://github.com/rtivital"
target="_blank"
src="avatar.png"
alt="it's me"
/>

You can also use React component instead of an element, for example, Link from react-router-dom:

import { Link } from 'react-router-dom';
import { Card } from '@mantine/core';
function Demo() {
return <Avatar component={Link} to="/my-route/" src="./avatar.png" />;
}

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>
Build fully functional accessible web applications with ease
Feedback
Your feedback is most valuable contribution to the project, please share how you use Mantine, what features are missing and what is done good
Leave feedback