Avatar

Avatar represents people using icons, labels and images.

Usage#

import { Avatar } from 'primereact/avatar';
<Avatar>
    <Avatar.Image src="https://primefaces.org/cdn/primevue/images/avatar/avatar-1.png" />
    <Avatar.Fallback>CC</Avatar.Fallback>
</Avatar>

Examples#

Fallback#

The Avatar.Fallback component displays a label or an icon when an image fails to load or when an image is not preferred.

J
CC
import { CheckIcon } from '@primereact/icons';
import { Avatar } from 'primereact/avatar';
 
export default function LabelDemo() {
    return (
        <div className="card flex items-center justify-center gap-4">
            <Avatar>
                <Avatar.Fallback>J</Avatar.Fallback>
            </Avatar>
            <Avatar className="bg-amber-100 dark:bg-amber-950/50 text-amber-500 dark:text-amber-500">
                <Avatar.Fallback>CC</Avatar.Fallback>
            </Avatar>
            <Avatar>
                <Avatar.Fallback>
                    <CheckIcon className="size-4" />
                </Avatar.Fallback>
            </Avatar>
            <Avatar className="bg-blue-100 dark:bg-blue-950/50 text-blue-500 dark:text-blue-500">
                <Avatar.Fallback>
                    <i className="pi pi-user" />
                </Avatar.Fallback>
            </Avatar>
        </div>
    );
}

Image#

The Avatar.Image component displays an image as an Avatar.

A
A
O
import { Avatar } from 'primereact/avatar';
 
export default function ImageDemo() {
    return (
        <div className="card flex items-center justify-center gap-4">
            <Avatar size="large" shape="circle">
                <Avatar.Image src="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" />
                <Avatar.Fallback>A</Avatar.Fallback>
            </Avatar>
            <Avatar size="large" shape="circle">
                <Avatar.Image src="https://primefaces.org/cdn/primevue/images/avatar/asiyajavayant.png" />
                <Avatar.Fallback>A</Avatar.Fallback>
            </Avatar>
            <Avatar size="large" shape="circle">
                <Avatar.Image src="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" />
                <Avatar.Fallback>O</Avatar.Fallback>
            </Avatar>
        </div>
    );
}

Badge#

Badge component can be used to display a badge on an Avatar.

O
2
W
import { Avatar } from 'primereact/avatar';
import { Badge } from 'primereact/badge';
 
const BadgeDemo = () => {
    return (
        <div className="card flex items-center justify-center gap-8">
            <Badge.Overlay>
                <Avatar size="large" shape="circle">
                    <Avatar.Image src="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" />
                    <Avatar.Fallback>O</Avatar.Fallback>
                </Avatar>
                <Badge size="small" shape="circle" severity="success">
                    2
                </Badge>
            </Badge.Overlay>
            <Badge.Overlay>
                <Avatar size="large">
                    <Avatar.Image src="https://primefaces.org/cdn/primevue/images/organization/walter.jpg" />
                    <Avatar.Fallback>W</Avatar.Fallback>
                </Avatar>
                <Badge shape="circle" severity="danger"></Badge>
            </Badge.Overlay>
        </div>
    );
};
 
export default BadgeDemo;

Shape#

Use the shape property to change the appearance.

W
W
import { Avatar } from 'primereact/avatar';
 
const ShapeDemo = () => {
    return (
        <div className="card flex items-center justify-center gap-4">
            <Avatar shape="circle" size="large">
                <Avatar.Image src="https://primefaces.org/cdn/primevue/images/organization/walter.jpg" />
                <Avatar.Fallback>W</Avatar.Fallback>
            </Avatar>
            <Avatar shape="square" size="large">
                <Avatar.Image src="https://primefaces.org/cdn/primevue/images/organization/walter.jpg" />
                <Avatar.Fallback>W</Avatar.Fallback>
            </Avatar>
        </div>
    );
};
 
export default ShapeDemo;

Sizes#

Use the size property to change the size of an avatar.

CC
CC
CC
import { Avatar } from 'primereact/avatar';
 
const SizeDemo = () => {
    return (
        <div className="card flex items-center justify-center gap-4">
            <Avatar shape="circle" size="normal">
                <Avatar.Image src="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" />
                <Avatar.Fallback>CC</Avatar.Fallback>
            </Avatar>
            <Avatar shape="circle" size="large">
                <Avatar.Image src="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" />
                <Avatar.Fallback>CC</Avatar.Fallback>
            </Avatar>
            <Avatar shape="circle" size="xlarge">
                <Avatar.Image src="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" />
                <Avatar.Fallback>CC</Avatar.Fallback>
            </Avatar>
        </div>
    );
};
 
export default SizeDemo;

AvatarGroup#

Grouping is available by wrapping multiple Avatar components inside an Avatar.Group component.

A
A
O
I
X
+2
import { Avatar } from 'primereact/avatar';
 
export default function GroupDemo() {
    return (
        <div className="card flex justify-center">
            <Avatar.Group>
                <Avatar shape="circle">
                    <Avatar.Image className="w-2" src="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" />
                    <Avatar.Fallback>A</Avatar.Fallback>
                </Avatar>
                <Avatar shape="circle">
                    <Avatar.Image src="https://primefaces.org/cdn/primevue/images/avatar/asiyajavayant.png" />
                    <Avatar.Fallback>A</Avatar.Fallback>
                </Avatar>
                <Avatar shape="circle">
                    <Avatar.Image className="w-2" src="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" />
                    <Avatar.Fallback>O</Avatar.Fallback>
                </Avatar>
                <Avatar shape="circle">
                    <Avatar.Image src="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" />
                    <Avatar.Fallback>I</Avatar.Fallback>
                </Avatar>
                <Avatar shape="circle">
                    <Avatar.Image src="https://primefaces.org/cdn/primevue/images/avatar/xuxuefeng.png" />
                    <Avatar.Fallback>X</Avatar.Fallback>
                </Avatar>
                <Avatar shape="circle">
                    <Avatar.Fallback className="">+2</Avatar.Fallback>
                </Avatar>
            </Avatar.Group>
        </div>
    );
}

Accessibility#

Screen Reader#

Avatar does not include any roles and attributes by default. Any attribute is passed to the root element so you may add a role like img along with aria-labelledby or aria-label to describe the component. In case avatars need to be tabbable, tabindex can be added as well to implement custom key handlers.

Keyboard Support#

Component does not include any interactive elements.

PrimeReact 11.0.0-alpha.4 on React by PrimeTek