Skip to main content

Avatar

shadow

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

DescriptionIf true, the avatar displays the initials of the label attribute value
Attributeinitials
Typeboolean
Defaultfalse

label

DescriptionSpecifies the value for the initials attribute
Attributelabel
Typestring
Defaultundefined

size

DescriptionSelect one of the supported values to set the avatar size. By default, the size is unset.
Attributesize
Type"medium" | "normal" | "large" | "small" | "x-large" | "2x-large" | "3x-large" | "4x-large" | "5x-large" | "undefined"
Defaultfalse

status-placement

DescriptionSet to one of the supported values to place the status on the corners of the avatar. By default, the size is unset.
Attributestatus-placement
Type"top-start" | "top-end"" | "bottom-start" | "bottom-end" | "undefined"
Defaultfalse

Events

No events available for this component.

Methods

No public methods available for this component.

CSS Shadow Parts

NameDescription
nativeRefers to the div element inside the avatar

CSS Custom Properties

NameDescription
--wj-avatar-background-colorAvatar background colour
--wj-avatar-border-colorAvatar border colour
--wj-avatar-border-radiusRounding of the edge of the avatar
--wj-avatar-border-styleAvatar border style
--wj-avatar-border-widthEdge width
--wj-avatar-colorText colour
--wj-avatar-font-sizeFont size
--wj-avatar-font-weightFont thickness
--wj-avatar-heightHeight of avatar
--wj-avatar-widthWidth of avatar

Slots

NameDescription
``The main content of the avatar.
iconSlot for the icon to be displayed within the avatar.
statusSlot for status indicator.
secondarySlot for secondary content or additional information.