Avatar represents people using icons, labels and images.
import { AvatarModule } from 'primeng/avatar';
import { AvatarGroupModule } from 'primeng/avatargroup';
A letter Avatar is defined with the label property.
<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" />
A font icon is displayed as an Avatar with the icon property.
<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" />
Use the image property to display an image as an Avatar.
<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 items-center justify-center mr-2"
size="xlarge" />
size property defines the size of the Avatar with large and xlarge as possible values.
<p-avatar label="P" size="large" />
<p-avatar label="T" size="xlarge" />
Grouping is available by wrapping multiple Avatar components inside an AvatarGroup.
<p-avatarGroup styleClass="mb-4">
<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>
Avatar comes in two different styles specified with the shape property, square is the default and circle is the alternative.
<p-avatar label="P" shape="circle" />
<p-avatar label="T" />
A badge can be added to an Avatar with the Badge directive.
<p-avatar
image="https://primefaces.org/cdn/primeng/images/demo/avatar/amyelsner.png"
pBadge
value="4"
severity="danger" />
Content can easily be customized with the dynamic content instead of using the built-in modes.
<p-avatar size="xlarge">
<span class="text-base">Content</span>
</p-avatar>
Following is the list of structural style classes, for theming classes visit theming page.
Name | Element |
---|---|
p-avatar | Container element. |
p-avatar-image | Container element in image mode. |
p-avatar-circle | Container element with a circle shape. |
p-avatar-text | Text of the Avatar. |
p-avatar-icon | Icon of the Avatar. |
p-avatar-lg | Container element with a large size. |
p-avatar-xl | Container element with an xlarge size. |
Name | Element |
---|---|
p-avatar-group | Container element. |
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.
Component does not include any interactive elements.