Avatarpolymorphic

Display user profile image, initials or fallback icon
Import

Usage

it's me
MK
Download more icon variants from https://tabler-icons.io/i/star
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>
</>
);
}

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
Download more icon variants from https://tabler-icons.io/i/star
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
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
Download more icon variants from https://tabler-icons.io/i/search

Avatar component props

NameTypeDescription
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

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