Avatarpolymorphic

Display user profile image, initials or fallback icon
Import

Usage

it's me
MK
import { Avatar } from '@mantine/core';
import { IconStar } 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">
<IconStar size="1.5rem" />
</Avatar>
</>
);
}

Placeholder

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:

VR
import { Avatar } from '@mantine/core';
import { IconStar } 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">
<IconStar size="1.5rem" />
</Avatar>
</>
);
}

Size and radius

<Avatar radius="lg" /> // -> theme predefined large radius
<Avatar radius={16} /> // -> { borderRadius: '1rem' }
<Avatar size="sm" /> // -> predefined small size
<Avatar size={48} /> // -> { width: '3rem', height: '3rem' }
Variant
Radius
xs
sm
md
lg
xl
Size
xs
sm
md
lg
xl
Color
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

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

+5
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

+2
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

Avatar component props

NameTypeDescription
alt
string
Image alt text or title for placeholder variant
children
ReactNode
Custom placeholder
color
MantineColor
Key of theme.colors
gradient
MantineGradient
Gradient input, only used when variant="gradient", theme.defaultGradient by default
imageProps
Record<string, any>
<img /> element attributes
radius
number | "xs" | "sm" | "md" | "lg" | "xl"
Key of theme.radius or any valid CSS value to set border-radius, "xl" by default
size
number | "xs" | "sm" | "md" | "lg" | "xl"
Avatar width and height
src
string
Image url
variant
Variants<"outline" | "light" | "filled" | "gradient">
Controls appearance

Avatar.Group component props

NameTypeDescription
children *
ReactNode
Avatar components
spacing
number | "xs" | "sm" | "md" | "lg" | "xl"
Negative space between Avatars

Avatar component Styles API

NameStatic selectorDescription
root.mantine-Avatar-rootRoot element
image.mantine-Avatar-imageMain img tag, rendered when src is set to valid image url
placeholder.mantine-Avatar-placeholderPlaceholder element, rendered when src is null or image cannot be loaded
placeholderIcon.mantine-Avatar-placeholderIconDefault placeholder icon