Avatar

shadow

The wje-avatar is used to quickly visually identify a person, team, brand or other object. It can display an image or other embedded content, fallback initials from label and additional slots for icon, status and secondary content.

Basic usage

In this demo, the three most important modes are side by side: avatar with picture, with initials and with icon. It's a quick overview that wje-avatar is not just a profile picture, but a general identification wrapper.

Avatar size

The example demonstrates that the size attribute changes the dimensions of the wrapper itself. The same image or content is thus adapted without changing the internal markup.

Avatar size with initials

The same size variations also work in initials mode. If the initials boolean attribute is present, the component will prioritize the render initials over the default content.

Avatar with icon

If you want to use the avatar as a small status or action marker rather than a profile photo, put the icon in the icon slot.

Avatar with initials

This is a typical fallback scenario. The component takes text from label, generates initials from it and automatically calculates contrasting background and text colors.

Avatar with status

For example, wje-status is inserted into the status slot, which is displayed in one of the four corners according to status-placement. This is handy for online status, verification or other small indicators.

Avatar as dropdown trigger

Here's an important compositional nuance: the wje-avatar is inserted into the trigger slot of the wje-dropdown component. The placement, trigger and offset attributes thus belong to the dropdown, not the avatar.

Avatar with tooltip

This demonstration is also based on a composition with a different component. Tooltip doesn't add an avatar by itself; you get it by using the avatar as the target content of wje-tooltip.

Group of avatars

This sample shows the boundary between the capabilities of a component and the capabilities of the surrounding layout. The wje-avatar has no built-in group wrapper or group API; overlapping multiple avatars is handled via an external container and CSS.

CSS custom variables

If you need to adjust dimensions, typography, or colors without changing the markup, reach for the component's CSS variables.

What's worth thinking about

• label + initials is the most practical fallback without an image.
• The status-placement controls the position of the status slot in one of the four corners.
• The default slot holds the main content, the other slots are for icon, status and secondary.
• The isImage() helper can detect if wje-img is present in the avatar.
• Actual clicks, hover or menu opening is usually handled by a parent component, such as wje-dropdown or wje-tooltip.

Accessibility

• If using an image, provide meaningful alternative text on the embedded img or wje-img.
• If you use initials, set label; the component also uses it for aria-label on the guest.
• For an avatar used as a dropdown or tooltip trigger, think about the accessibility of the parent component, since the interaction is handled there.

Recommended practices

• For a fallback without an image, use the combination label + initials.
• If the avatar is part of an action or menu trigger, don't leave the user without text context nearby.
• For groups of avatars, handle overlap and "ring" effect via external CSS, not via expectations of the built-in group API.
• Use secondary content in the secondary slot only when its location and meaning in your layout is clear; the component does not give it complex layout logic.

Attributes and properties

initials

Popis	Určuje, či avatar vykreslí generované iniciály namiesto predvoleného vloženého obsahu.
Atribút	initials
Typ	boolean
Predvolené	false

label

Popis	Nastavuje zdrojový text pre generovanie iniciál aj prístupný názov avatara.
Atribút	label
Typ	string
Predvolené	-

size

Popis	Nastavuje veľkosť komponentu.
Atribút	size
Typ	string
Predvolené	medium

statusPlacement

Popis	Určuje, do ktorého rohu avatara sa umiestni obsah slotu status.
Atribút	status-placement
Typ	string
Predvolené	-

Events

Pre tento komponent nie sú dostupné žiadne udalosti.

Methods

isImage

Popis	Overí, či avatar momentálne obsahuje element wje-img.
Signatúra	() => boolean

CSS shadow parts

Názov	Popis
native	Štýluje koreňovú shadow časť komponentu.
status	Štýluje pozicionovaný kontajner slotu status.
secondary	Štýluje kontajner sekundárneho doplnkového obsahu.

CSS custom variables

Názov	Popis
--wje-avatar-size	Vlastná CSS premenná, ktorá riadi celkovú veľkosť avatar obalu.
--wje-avatar-font-size	Vlastná CSS premenná, ktorá riadi veľkosť písma iniciál a textu v avatari.
--wje-avatar-font-weight	Vlastná CSS premenná, ktorá riadi hrúbku písma iniciál a textu v avatari.
--wje-avatar-color	Vlastná CSS premenná, ktorá riadi farbu popredia avatara.
--wje-avatar-background-color	Vlastná CSS premenná, ktorá riadi farbu pozadia avatara.
--wje-avatar-border-radius	Vlastná CSS premenná, ktorá riadi zaoblenie rohov avatara.
--wje-avatar-border-color	Vlastná CSS premenná, ktorá riadi farbu okraja avatara.
--wje-avatar-border-width	Vlastná CSS premenná, ktorá riadi šírku okraja avatara.
--wje-avatar-border-style	Vlastná CSS premenná, ktorá riadi štýl okraja avatara.

Slots

Názov	Popis
default	Predvolený slot pre hlavný obsah komponentu.
icon	Slot pre obsah ikony.
status	Slot pre obsah indikátora stavu.
secondary	Slot pre sekundárny doplnkový obsah.