React Avatar represents people using icons, labels and images.
Setup
Refer to PrimeReact setup documentation for download and installation steps for your environment.
Import
import { Avatar } from 'primereact/avatar';
import { AvatarGroup } from 'primereact/avatargroup';
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>
Theming
Avatar supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.
Resources
Visit the PrimeReact Avatar showcase for demos and documentation.