Avatarpolymorphic

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 { IconStar } from '@tabler/icons';

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">
        <IconStar size={24} />
      </Avatar>
    </>
  );
}

If src prop is not set, equals to null or image cannot be loaded, placeholder icon will be displayed 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 { IconStar } from '@tabler/icons';

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">
        <IconStar size={24} />
      </Avatar>
    </>
  );
}

Size and radius

<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' }

Variant

Light

Filled

Outline

Radius

Size

Color

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" />;
}

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" />;
}

Avatar.Group

Avatar.Group component can be used to combine multiple avatars into a stack:

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

function Demo() {
  return (
    <Avatar.Group spacing="sm">
      <Avatar src="image.png" radius="xl" />
      <Avatar src="image.png" radius="xl" />
      <Avatar src="image.png" radius="xl" />
      <Avatar radius="xl">+5</Avatar>
    </Avatar.Group>
  );
}

You can combine it with Tooltip or Popover to show additional information on hover

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

function Demo() {
  return (
    <Tooltip.Group openDelay={300} closeDelay={100}>
      <Avatar.Group spacing="sm">
        <Tooltip label="Salazar Troop" withArrow>
          <Avatar src="image.png" radius="xl" />
        </Tooltip>
        <Tooltip label="Bandit Crimes" withArrow>
          <Avatar src="image.png" radius="xl" />
        </Tooltip>
        <Tooltip label="Jane Rata" withArrow>
          <Avatar src="image.png" radius="xl" />
        </Tooltip>
        <Tooltip
          withArrow
          label={
            <>
              <div>John Outcast</div>
              <div>Levi Capitan</div>
            </>
          }
        >
          <Avatar radius="xl">+2</Avatar>
        </Tooltip>
      </Avatar.Group>
    </Tooltip.Group>
  );
}

Accessibility

Avatar renders img html element. Do not forget 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

BackgroundImage – @mantine/core

Avatar component props

Name	Type	Description
alt	string	Image alt text or title for placeholder variant
children	ReactNode	Custom placeholder
color	MantineColor	Color from theme.colors used for letter and icon placeholders
gradient	MantineGradient	Controls gradient settings in gradient variant only
imageProps	Record<string, any>	img element attributes
radius	number \| "xs" \| "sm" \| "md" \| "lg" \| "xl"	Value from theme.radius or number to set border-radius in px
size	number \| "xs" \| "sm" \| "md" \| "lg" \| "xl"	Avatar width and height
src	string	Image url
variant	"outline" \| "light" \| "filled" \| "gradient"	Controls appearance

Avatar.Group component props

Name	Type	Description
children^*	ReactNode	Avatar components
spacing	number \| "xs" \| "sm" \| "md" \| "lg" \| "xl"	Negative space between Avatars

Avatar component Styles API

Name	Static selector	Description
root	.mantine-Avatar-root	Root element
image	.mantine-Avatar-image	Main img tag, rendered when src is set to valid image url
placeholder	.mantine-Avatar-placeholder	Placeholder element, rendered when src is null or image cannot be loaded
placeholderIcon	.mantine-Avatar-placeholderIcon	Default placeholder icon

Learn more about Styles API

Build fully functional accessible web applications faster than ever

About

Contribute About Mantine 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