import Avatar from 'primevue/avatar';
import AvatarGroup from 'primevue/avatargroup';
<script src="https://unpkg.com/primevue@^3/core/core.min.js"></script>
<script src="https://unpkg.com/primevue@^3/avatar/avatar.min.js"></script>
<script src="https://unpkg.com/primevue@^3/avatargroup/avatargroup.min.js"></script>
Avatar has three built-in display modes; "label", "icon" and "image".
<Avatar label="P" />
<Avatar icon="pi pi-search" />
<Avatar image="user.png" />
size property defines the size of the Avatar with "large" and "xlarge" as possible values.
<Avatar label="P" size="large"/>
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>
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"/>
A badge can be added to an Avatar with the
<Avatar image="user.png" size="xlarge" v-badge.danger="4" />
Content can easily be customized with the default slot instead of using the built-in modes.
<Avatar>
Content
</Avatar>
Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.
| 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". |
Any property as style and class are passed to the main container element. There are no additional properties.
| Name | Parameters | Description |
|---|---|---|
| error | - | Triggered when an error occurs while loading an image file. |
Following is the list of structural style classes, for theming classes visit
| 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. |
| Name | Element |
|---|---|
| p-avatar-group | Container element. |
None.