Avatar
The avatar element is used to visually represent a user or entity. It is usually used as a wrapper and provides a convenient way to display profile pictures, icons, or, if these are not provided, initials. It supports a variety of configurations including size, grouping multiple avatars, or displaying a dropdown when clicked or a tooltip when pointed to with the mouse.
Basic usage
Avatar size
The size property determines the size of the avatar.
Avatar size with initials
The size property determines the size of the avatar. By adding the initials and label properties, the avatar displays the initials of the selected value of the label property.
Avatar with icon
Nesting the wje-icon element will display the selected icon inside the avatar.
Avatar with initials
By adding the initials and label properties, the avatar displays the initials of the selected value of the label property.
Avatar with status
By nesting the wje-status element with the icon, the Status element will appear on the sides of the Avatar.
By adding the status-placement attribute, the position of the Status element can be specified.
For more information on using Status, navigate to the [Status] element documentation(/api/status). // TODO: link
Avatar with dropdown
Adding the wje-dropdown element will display a menu when the avatar is clicked. In this case, you need to add a trigger slot with value hover to the avatar element.
Avatar with tooltip
Adding the wje-dropdown element will display a menu when the avatar is clicked.
Group of avatars
When to use
Use wje-avatar to improve readability, scannability, and contextual understanding of content.
When not to use
Do not replace structured interactive data with media-only presentation when precision is needed.
Accessibility
Provide alt text, maintain readable contrast, and include text equivalents for icon-only controls.
Best Practices
- Compress media and use lazy loading in larger collections.
- Keep information priority consistent across cards/lists.
- Avoid duplicating the same meaning in icon and text without added value.
Attributes and Properties
initials
| Description | Retrieves the value of the 'initials' attribute if it exists. |
| Attribute | initials |
| Type | boolean |
| Default | - |
label
| Description | Sets the user-visible or accessible label text. |
| Attribute | label |
| Type | string |
| Default | - |
Events
No events available for this component.
Methods
isImage
| Description | Method to check if the avatar is an image. |
| Signature | () => boolean |
CSS Shadow Parts
| Name | Description |
|---|---|
native | The component's native wrapper. |
CSS Custom Properties
| Name | Description |
|---|---|
--wje-avatar-width | CSS custom property that controls width. |
--wje-avatar-height | CSS custom property that controls height. |
--wje-avatar-font-size | CSS custom property that controls typography settings. |
--wje-avatar-font-weight | CSS custom property that controls typography settings. |
--wje-avatar-color | CSS custom property that controls color. |
--wje-avatar-background-color | CSS custom property that controls background color. |
--wje-avatar-border-radius | CSS custom property that controls border radius. |
--wje-avatar-border-color | CSS custom property that controls border color. |
--wje-avatar-border-width | CSS custom property that controls border width. |
--wje-avatar-border-style | CSS custom property used to style the component (border style). |
Slots
| Name | Description |
|---|---|
default | Default slot for the main component content. |