Avatar

Avatar represents people using icons, labels and images.

Import #


import { Avatar } from 'primeng/avatar';
import { AvatarGroup } from 'primeng/avatargroup';

Label #

A letter Avatar is defined with the label property.

Label

Circle

Badge


<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-overlay-badge value="4" severity="danger" class="inline-flex">
    <p-avatar label="U" size="xlarge" />
</p-overlay-badge>

Icon #

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

Icon

Circle

Badge


<p-avatar icon="pi pi-user" class="mr-2" size="xlarge" />
<p-avatar icon="pi pi-user" class="mr-2" size="large" style="background-color: #ece9fc; color: #2a1261" />
<p-avatar icon="pi pi-user" style="background-color: #dee9fc; color: #1a2551" />
<p-avatar icon="pi pi-user" class="mr-2" size="xlarge" shape="circle" />
<p-avatar icon="pi pi-user" class="mr-2" size="large" style="background-color: #ece9fc; color: #2a1261" shape="circle" />
<p-avatar icon="pi pi-user" style="background-color: #dee9fc; color: #1a2551" shape="circle" />

<p-overlay-badge value="4" severity="danger" class="inline-flex">
    <p-avatar icon="pi pi-user" size="xlarge" />
</p-overlay-badge>

Image #

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

Image

Badge

Gravatar


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

<p-overlay-badge value="4" severity="danger" class="inline-flex">
    <p-avatar class="p-overlay-badge" image="https://primefaces.org/cdn/primeng/images/demo/avatar/walter.jpg" size="xlarge" />
</p-overlay-badge>

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

AvatarGroup #

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


<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-avatar image="https://primefaces.org/cdn/primeng/images/demo/avatar/onyamalimba.png" size="large" shape="circle" />
<p-avatar image="https://primefaces.org/cdn/primeng/images/demo/avatar/ionibowcher.png" size="large" shape="circle" />
<p-avatar image="https://primefaces.org/cdn/primeng/images/demo/avatar/xuxuefeng.png" size="large" shape="circle" />
<p-avatar label="+2" shape="circle" size="large" />

Shape #

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" />

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.

name	type	default	description
label	string	null	Defines the text to display.
icon	string	null	Defines the icon to display.
image	string	null	Defines the image to display.
size	"normal" \| "large" \| "xlarge"	normal	Size of the element.
shape	"square" \| "circle"	square	Shape of the element.
style	Object	null	Inline style of the element.
styleClass	string	null	Class of the element.
ariaLabel	string	null	Establishes a string value that labels the component.
ariaLabelledBy	string	null	Establishes relationships between the component and label(s) where its value should be one or more element IDs.

name	type	default	description
styleClass	string	null	Style class of the component
style	Object	null	Inline style of the component.

class	description
p-avatar	Class name of the root element
p-avatar-label	Class name of the label element
p-avatar-icon	Class name of the icon element

token	variable	description
root.width	--p-avatar-width	Width of root
root.height	--p-avatar-height	Height of root
root.fontSize	--p-avatar-font-size	Font size of root
root.background	--p-avatar-background	Background of root
root.borderRadius	--p-avatar-border-radius	Border radius of root
group.borderColor	--p-avatar-group-border-color	Border color of group
group.offset	--p-avatar-group-offset	Offset of group
lg.width	--p-avatar-lg-width	Width of lg
lg.height	--p-avatar-lg-height	Height of lg
lg.fontSize	--p-avatar-lg-font-size	Font size of lg
xl.width	--p-avatar-xl-width	Width of xl
xl.height	--p-avatar-xl-height	Height of xl
xl.fontSize	--p-avatar-xl-font-size	Font size of xl

Avatar

Import #

Label #

Label

Circle

Badge

Icon #

Icon

Circle

Badge

Image #

Image

Badge

Gravatar

AvatarGroup #

Shape #

Accessibility #

Screen Reader

Keyboard Support

Avatar API

Avatar #

Properties #

Emitters #

AvatarGroup #

Properties #

Avatar Theming

CSS Classes #

Avatar Design Tokens #