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

Circle

Badge


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

Size #

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

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

Badge #

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

Template #

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>

Style #

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.

AvatarGroup Style #

Name	Element
p-avatar-group	Container 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.

NEW

Build Faster Design Better

490+ ready to use UI blocks crafted with PrimeNG and Tailwind CSS.

Learn More

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	"large" \| "xlarge" \| "normal"	normal	Size of the element.
shape	"circle" \| "square"	square	Shape 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.

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

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

Preset	Implementation	Types
Aura	Aura	Aura
Lara	Lara	Lara
Nora	Nora	Nora
Material	Material	Material

Avatar

Import #

Label #

Label

Circle

Badge

Icon #

Icon

Circle

Badge

Image #

Image

Badge

Gravatar

AvatarGroup #

Size #

Shape #

Badge #

Template #

Style #

AvatarGroup Style #

Accessibility #

Screen Reader

Keyboard Support

Avatar API

Avatar #

Properties #

Emitters #

AvatarGroup #

Avatar Theming

CSS Classes #

Avatar Design Tokens #

Built-in Presets #