Avatar

Avatar represents people using icons, labels and images.

Label

Label - Circle

Label - Badge

Icon

Icon - Circle

Icon - Badge

Image

Avatar Group

Image - Badge

Import via Module


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

Import via CDN


<script src="https://unpkg.com/primereact/core/core.min.js"></script>
<script src="https://unpkg.com/primereact/avatar/avatar.min.js"></script>
<script src="https://unpkg.com/primereact/avatargroup/avatargroup.min.js"></script>

Getting Started

Avatar has three built-in display modes; "label", "icon" and "image".


<Avatar label="P" />
<Avatar icon="pi pi-search" />
<Avatar image="user.png" />

Sizes

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


<Avatar label="P" size="large"/>

AvatarGroup

A set of Avatars can be displayed together using the AvatarGroup component.


<AvatarGroup>
    <Avatar label="P" />
    <Avatar icon="pi pi-search" />
    <Avatar image="user.png" />
    <Avatar label="+2" />
</AvatarGroup>

Shape

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


<Avatar label="P" shape="circle"/>

Badge

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


<Avatar image="user.png" size="xlarge">
    <Badge value="4" severity="danger" />
</Avatar>

Templating

Content can easily be customized with the default slot instead of using the built-in modes.


<Avatar>
   Content
</Avatar>

Properties of Avatar

Any valid attribute is passed to the root element implicitly, extended properties are as follows;

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	string	null	Size of the element, valid options are "large" and "xlarge".
shape	string	square	Shape of the element, valid options are "square" and "circle".
template	any	null	Template of the content.
imageAlt	any	null	It specifies an alternate text for an image, if the image cannot be displayed.

Properties of AvatarGroup

Any property as style and class are passed to the main container element. There are no additional properties.

Events

Name	Parameters	Description
onImageError	event: Browser event	This event is triggered if an error occurs while loading an image file.
onClick	event: Browser event	Callback to invoke on click.

Styling of 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.