Avatar

Display user profile image, initials or fallback icon

Import

Source

View source code

Docs

Edit this page

Package

@mantine/core

Usage

import { Avatar } from '@mantine/core';
import { Star } from 'tabler-icons-react';

function Demo() {
  return (
    <>
      {/* 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">
        <Star size={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:

import { Avatar } from '@mantine/core';
import { Star } from 'tabler-icons-react';

function Demo() {
  return (
    <>
      {/* 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">
        <Star size={24} />
      </Avatar>
    </>
  );
}

Size and radius

Radius

Size

Src

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

function Demo() {
  return <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

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

function Demo() {
  return (
    <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:

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

function Demo() {
  return (
    <>
      <Avatar<'a'> component="a" href="#" />
      <Avatar<typeof Link> component={Link} to="/hello" />
    </>
  );
}

Avatars Group

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

import { Avatar, AvatarsGroup } from '@mantine/core';

function Demo() {
  return (
    <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:

import { Avatar, AvatarsGroup } from '@mantine/core';

function Demo() {
  return (
    <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

About

Contribute Media assets Changelog Releases

Community

Chat on Discord Follow on Twitter Follow on Github GitHub discussions

Project

Mantine UI Documentation Github organization npm organization

Built by Vitaly Rtishchev and these awesome people

Join Discord community

Follow Mantine on Twitter