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. Any React node can be used 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

Radius

Size

Src

<Avatar src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=250&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, a number can be used 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' }

Change root element

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

With custom component (react router example):

import { Link } from 'react-router-dom';
import { Card } from '@mantine/core';

function Demo() {
  return <Avatar component={Link} to="/my-route/" src="./avatar.png" />;
}

To use a custom component with TypeScript, pass an additional type:

// With element
<Avatar<'a'>
  component="a"
  onClick={(event) => console.log(event)}
  ref={(node) => {
    window.myRef = node;
  }}
/>

// With component
<Avatar<typeof Link>
  component={Link}
  onClick={(event) => console.log(event)}
  ref={(node) => {
    window.myRef = node;
  }}
/>

Avatars Group

Use AvatarsGroup to stack avatar components, set limit prop to truncate avatars:

<AvatarsGroup limit={3}>
  <Avatar src="avatar.png" component="a" href="https://github.com/rtivital" />
  <Avatar src="avatar.png" />
  <Avatar src="avatar.png" />
  {/* ...other items */}
</AvatarsGroup>

To override truncated avatars length set total prop:

<AvatarsGroup limit={2} total={7}>
  <Avatar src="avatar.png" component="a" href="https://github.com/rtivital" />
  <Avatar src="avatar.png" />
</AvatarsGroup>

Accessibility

Avatar renders img html element. It is important to add alt text. If image fails to load alt will be used as title for placeholder.

<Avatar src={image} /> // -> not ok, no alt for image
<Avatar src={image} alt="Rob Johnson" /> // -> ok
<Avatar alt="Rob Johnson">RJ</Avatar> // -> ok, alt is used as title attribute
<Avatar>RJ</Avatar> // -> ok, title is not required

Go back

Accordion – @mantine/core

Up next

Badge – @mantine/core

Build fully functional accessible web applications faster than ever

Project

Contribute to Mantine Media assets Changelog Releases

Community

Join Discord community Follow on Twitter Email newsletter GitHub discussions

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

Built by Vitaly Rtishchev and these awesome people

Join Discord community

Follow Mantine on Twitter