Avatar

Avatar represents people using icons, labels and images.

Import #


import { AvatarModule } from 'primeng/avatar';
import { AvatarGroupModule } from 'primeng/avatargroup';

Label #

A letter Avatar is defined with the label property.

Label
P
V
U
Label - Circle
P
V
U
Badge
U4

<p-avatar 
    label="P" 
    styleClass="mr-2" 
    size="xlarge" />
<p-avatar 
    label="V" 
    styleClass="mr-2" 
    size="large" 
    [style]="{ 'background-color': '#ece9fc', color: '#2a1261' }" />
<p-avatar 
    label="U"
    styleClass="mr-2" 
    [style]="{ 'background-color': '#dee9fc', color: '#1a2551' }" />

<p-avatar 
    label="P" 
    styleClass="mr-2" 
    size="xlarge" 
    shape="circle" />
<p-avatar 
    label="V" 
    styleClass="mr-2" 
    size="large" 
    [style]="{ 'background-color': '#ece9fc', color: '#2a1261' }" 
    shape="circle" />
<p-avatar 
    label="U" 
    styleClass="mr-2" 
    [style]="{ 'background-color': '#dee9fc', color: '#1a2551' }" 
    shape="circle" />

<p-avatar 
    label="U" 
    pBadge 
    styleClass="mr-2" 
    value="4" 
    size="xlarge"
    badgeSize="large" />

Icon #

A font icon is displayed as an Avatar with the icon property.

Icon
Icon - Circle
Badge
4

<p-avatar 
    icon="pi pi-user" 
    styleClass="mr-2" size="xlarge" />
<p-avatar 
    icon="pi pi-user" 
    styleClass="mr-2"
    size="large" 
    [style]="{ 'background-color': '#ece9fc', color: '#2a1261' }" />
<p-avatar 
    icon="pi pi-user" 
    styleClass="mr-2" 
    [style]="{ 'background-color': '#dee9fc', color: '#1a2551' }" />

<p-avatar 
    icon="pi pi-user" 
    styleClass="mr-2" 
    size="xlarge" 
    shape="circle" />
<p-avatar 
    icon="pi pi-user" 
    styleClass="mr-2" 
    size="large" 
    [style]="{ 'background-color': '#ece9fc', color: '#2a1261' }" 
    shape="circle" />
<p-avatar 
    icon="pi pi-user" 
    styleClass="mr-2" 
    [style]="{ 'background-color': '#dee9fc', color: '#1a2551' }" 
    shape="circle" />
        
<p-avatar 
    icon="pi pi-user" 
    pBadge 
    value="4" 
    size="xlarge"
    badgeSize="large" />

Image #

Use the image property to display an image as an Avatar.

Badge
4
Gravatar

<p-avatar 
    image="https://primefaces.org/cdn/primeng/images/demo/avatar/amyelsner.png" 
    styleClass="mr-2" 
    size="xlarge" 
    shape="circle" />
<p-avatar 
    image="https://primefaces.org/cdn/primeng/images/demo/avatar/asiyajavayant.png" 
    styleClass="mr-2" 
    size="large" 
    shape="circle" />
<p-avatar 
    image="https://primefaces.org/cdn/primeng/images/demo/avatar/onyamalimba.png" 
    styleClass="mr-2" 
    shape="circle" />

<p-avatar 
    pBadge 
    value="4" 
    image="https://primefaces.org/cdn/primeng/images/demo/avatar/walter.jpg" 
    size="xlarge"
    badgeSize="large" />

<p-avatar 
    image="https://www.gravatar.com/avatar/05dfd4b41340d09cae045235eb0893c3?d=mp" 
    styleClass="flex align-items-center justify-content-center mr-2" 
    size="xlarge" />

Sizes #

size property defines the size of the Avatar with large and xlarge as possible values.

P
T

<p-avatar label="P" size="large" />
<p-avatar label="T" size="xlarge" />

AvatarGroup #

Grouping is available by wrapping multiple Avatar components inside an AvatarGroup.

+2

<p-avatarGroup styleClass="mb-3">
    <p-avatar 
        image="https://primefaces.org/cdn/primeng/images/demo/avatar/amyelsner.png" 
        size="large" 
        shape="circle" />
    <p-avatar 
        image="https://primefaces.org/cdn/primeng/images/demo/avatar/asiyajavayant.png" 
        size="large" 
        shape="circle" />
</p-avatarGroup>

Shape #

Avatar comes in two different styles specified with the shape property, square is the default and circle is the alternative.

P
T

<p-avatar label="P" shape="circle" />
<p-avatar label="T" />

Badge #

A badge can be added to an Avatar with the Badge directive.

4

<p-avatar 
    image="https://primefaces.org/cdn/primeng/images/demo/avatar/amyelsner.png"
    pBadge 
    value="4" 
    severity="danger" />

Custom Content #

Content can easily be customized with the dynamic content instead of using the built-in modes.

Content

<p-avatar size="xlarge">
    <span class="text-base">Content</span>
</p-avatar>

Styling of Avatar #

Following is the list of structural style classes, for theming classes visit theming page.

NameElement
p-avatarContainer element.
p-avatar-imageContainer element in image mode.
p-avatar-circleContainer element with a circle shape.
p-avatar-textText of the Avatar.
p-avatar-iconIcon of the Avatar.
p-avatar-lgContainer element with a large size.
p-avatar-xlContainer element with an xlarge size.

Styling of AvatarGroup #

NameElement
p-avatar-groupContainer element.

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.

PrimeNG 17.18.12 by PrimeTek