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". |
| aria-label | string | null | Defines a string value that labels an interactive element. |
| aria-labelledby | string | null | Establishes relationships between the component and label(s) where its value should be one or more element IDs. |
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. |
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.
Component does not include any interactive elements.
None.