Avatar

Avatar represents people using icons, labels and images.

A
basic-demo

Usage#

import { Avatar } from '@primereact/ui/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
fallback-demo
import { Avatar } from '@primereact/ui/avatar';
import { User } from '@primeicons/react/user';
import { Check } from '@primeicons/react/check';

export default function LabelDemo() {
    return (
        <div className="flex items-center justify-center gap-4">
            <Avatar.Root>
                <Avatar.Fallback>J</Avatar.Fallback>
            </Avatar.Root>
            <Avatar.Root className="bg-amber-100 dark:bg-amber-950/50 text-amber-500 dark:text-amber-500">
                <Avatar.Fallback>CC</Avatar.Fallback>
            </Avatar.Root>
            <Avatar.Root>
                <Avatar.Fallback>
                    <Check className="size-4" />
                </Avatar.Fallback>
            </Avatar.Root>
            <Avatar.Root className="bg-blue-100 dark:bg-blue-950/50 text-blue-500 dark:text-blue-500">
                <Avatar.Fallback>
                    <User />
                </Avatar.Fallback>
            </Avatar.Root>
        </div>
    );
}

Image#

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

A
A
O
image-demo
import { Avatar } from '@primereact/ui/avatar';

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

Badge#

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

O
2
W
badge-demo
import { Avatar } from '@primereact/ui/avatar';
import { Badge } from '@primereact/ui/badge';
import { OverlayBadge } from '@primereact/ui/overlaybadge';

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

export default BadgeDemo;

Shape#

Use the shape property to change the appearance.

W
W
shape-demo
import { Avatar } from '@primereact/ui/avatar';

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

export default ShapeDemo;

Sizes#

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

CC
CC
CC
size-demo
import { Avatar } from '@primereact/ui/avatar';

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

export default SizeDemo;

AvatarGroup#

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

A
A
O
I
X
+2
group-demo
import { Avatar } from '@primereact/ui/avatar';

export default function GroupDemo() {
    return (
        <div className="flex justify-center">
            <Avatar.Group>
                <Avatar.Root shape="circle">
                    <Avatar.Image src="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" />
                    <Avatar.Fallback>A</Avatar.Fallback>
                </Avatar.Root>
                <Avatar.Root shape="circle">
                    <Avatar.Image src="https://primefaces.org/cdn/primevue/images/avatar/asiyajavayant.png" />
                    <Avatar.Fallback>A</Avatar.Fallback>
                </Avatar.Root>
                <Avatar.Root shape="circle">
                    <Avatar.Image src="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" />
                    <Avatar.Fallback>O</Avatar.Fallback>
                </Avatar.Root>
                <Avatar.Root shape="circle">
                    <Avatar.Image src="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" />
                    <Avatar.Fallback>I</Avatar.Fallback>
                </Avatar.Root>
                <Avatar.Root shape="circle">
                    <Avatar.Image src="https://primefaces.org/cdn/primevue/images/avatar/xuxuefeng.png" />
                    <Avatar.Fallback>X</Avatar.Fallback>
                </Avatar.Root>
                <Avatar.Root shape="circle">
                    <Avatar.Fallback>+2</Avatar.Fallback>
                </Avatar.Root>
            </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 a role like img along with aria-labelledby or aria-label can be added 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.10 on React by PrimeTek