Avatar
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>
Placeholder
If src prop is not set, equals to null or image cannot be loaded,
placeholder icon will be rendered instead.
You can use any React node 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
<Avatar src="https://images.unsplash.com/photo-1508214751196-bcfd4ca60f91?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=255&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, you can use a number 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' }
You can get predefined avatar sizes by importing AVATAR_SIZES:
import { AVATAR_SIZES } from '@mantine/core';
| Size | Width and height |
|---|---|
| xs | 16px |
| sm | 26px |
| md | 38px |
| lg | 56px |
| xl | 84px |
Change root element
You can set component prop on Avatar to use provide custom root element,
for example, you can make avatar a link:
<Avatarcomponent="a"href="https://github.com/rtivital"target="_blank"src="avatar.png"alt="it's me"/>
You can also use React component instead of an element, for example, Link from react-router-dom:
import { Link } from 'react-router-dom';import { Card } from '@mantine/core';function Demo() {return <Avatar component={Link} to="/my-route/" src="./avatar.png" />;}
Accessibility
Avatar renders img html element. It is important to add alt text.
In case of image load failing alt will be used as title for placeholder.
// alt is used as alt img attribute<Avatar src={image} alt="Rob Johnson" />// alt is used as title attribute<Avatar alt="Rob Johnson">RJ</Avatar>