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(/docs/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
Attributes and Properties
initials
Description | If true , the avatar displays the initials of the label attribute value |
Attribute | initials |
Type | boolean |
Default | false |
label
Description | Specifies the value for the initials attribute |
Attribute | label |
Type | string |
Default | undefined |
size
Description | Select one of the supported values to set the avatar size. By default, the size is unset. |
Attribute | size |
Type | "medium" | "normal" | "large" | "small" | "x-large" | "2x-large" | "3x-large" | "4x-large" | "5x-large" | "undefined" |
Default | false |
status-placement
Description | Set to one of the supported values to place the status on the corners of the avatar. By default, the size is unset. |
Attribute | status-placement |
Type | "top-start" | "top-end"" | "bottom-start" | "bottom-end" | "undefined" |
Default | false |
Events
No events available for this component.
Methods
No public methods available for this component.
CSS Shadow Parts
Name | Description |
---|---|
native | Refers to the div element inside the avatar |
CSS Custom Properties
Name | Description |
---|---|
--wj-avatar-background-color | Avatar background colour |
--wj-avatar-border-color | Avatar border colour |
--wj-avatar-border-radius | Rounding of the edge of the avatar |
--wj-avatar-border-style | Avatar border style |
--wj-avatar-border-width | Edge width |
--wj-avatar-color | Text colour |
--wj-avatar-font-size | Font size |
--wj-avatar-font-weight | Font thickness |
--wj-avatar-height | Height of avatar |
--wj-avatar-width | Width of avatar |
Slots
Name | Description |
---|---|
`` | The main content of the avatar. |
icon | Slot for the icon to be displayed within the avatar. |
status | Slot for status indicator. |
secondary | Slot for secondary content or additional information. |