Avatar
Avatar represents people using icons, labels and images.
Import #
import Avatar from 'primevue/avatar';
import AvatarGroup from 'primevue/avatargroup'; //Optional for grouping
Label #
A letter Avatar is defined with the label property.
Label
Circle
Badge
<Avatar label="P" class="mr-2" size="xlarge" />
<Avatar label="V" class="mr-2" size="large" style="background-color:#2196F3; color: #ffffff"/>
<Avatar label="U" class="mr-2" style="background-color:#9c27b0; color: #ffffff" />
<Avatar label="P" class="mr-2" size="xlarge" shape="circle" />
<Avatar label="V" class="mr-2" size="large" style="background-color:#2196F3; color: #ffffff" shape="circle" />
<Avatar label="U" class="mr-2" style="background-color:#9c27b0; color: #ffffff" shape="circle" />
<Avatar label="U" size="xlarge" style="background-color:#4caf4f; color: #ffffff" v-badge="4" />
Icon #
A font icon is displayed as an Avatar with the icon property.
Icon
Circle
Badge
<Avatar icon="pi pi-user" class="mr-2" size="xlarge" />
<Avatar icon="pi pi-user" class="mr-2" size="large" style="background-color: #2196f3; color: #ffffff" />
<Avatar icon="pi pi-user" style="background-color: #9c27b0; color: #ffffff" />
<Avatar icon="pi pi-user" class="mr-2" size="xlarge" shape="circle" />
<Avatar icon="pi pi-user" class="mr-2" size="large" style="background-color: #2196f3; color: #ffffff" shape="circle" />
<Avatar icon="pi pi-user" style="background-color: #9c27b0; color: #ffffff" shape="circle" />
<Avatar v-badge="4" class="p-overlay-badge" icon="pi pi-user" size="xlarge" />
Image #
Use the image property to display an image as an Avatar.
Image
Badge
Gravatar
<Avatar image="/images/avatar/amyelsner.png" class="mr-2" size="xlarge" shape="circle" />
<Avatar image="/images/avatar/asiyajavayant.png" class="mr-2" size="large" shape="circle" />
<Avatar image="/images/avatar/onyamalimba.png" shape="circle" />
<Avatar v-badge.danger="4" class="p-overlay-badge" image="/images/organization/walter.jpg" size="xlarge" />
<Avatar image="https://www.gravatar.com/avatar/05dfd4b41340d09cae045235eb0893c3?d=mp" class="flex align-items-center justify-content-center mr-2" size="xlarge" />
AvatarGroup #
Grouping is available by wrapping multiple Avatar components inside an AvatarGroup.
<AvatarGroup>
<Avatar image="/images/avatar/amyelsner.png" size="large" shape="circle" />
<Avatar image="/images/avatar/asiyajavayant.png" size="large" shape="circle" />
<Avatar image="/images/avatar/onyamalimba.png" size="large" shape="circle" />
<Avatar image="/images/avatar/ionibowcher.png" size="large" shape="circle" />
<Avatar image="/images/avatar/xuxuefeng.png" size="large" shape="circle" />
<Avatar label="+2" shape="circle" size="large" style="background-color: '#9c27b0', color: '#ffffff'" />
</AvatarGroup>
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. |
Styling of Avatar Group #
| 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.