Docs

Documentation versions (currently viewingVaadin 24)
Documentation translations (currently viewingEnglish)

Avatar

Styling API reference for the Avatar and Avatar Group components.

Style Properties

The following style properties can be used in CSS stylesheets to customize the appearance of this component.

To apply values to these properties globally in your application UI, place them in a CSS block using the html {…​} selector. See Lumo Style Properties for more information on style properties.

Common Properties

Feature Property Default Value

Avatar size

--vaadin-avatar-size

var(--lumo-size-m)

Avatar Group overlap

--vaadin-avatar-group-overlap

8px

Avatar Group overlap border

--vaadin-avatar-group-overlap-border

2px

User Color Properties

Feature Property Default Value

User color 0

--vaadin-user-color-0

#df0b92

User color 1

--vaadin-user-color-1

#650acc

User color 2

--vaadin-user-color-2

#097faa

User color 3

--vaadin-user-color-3

#ad6200

User color 4

--vaadin-user-color-4

#bf16f3

User color 5

--vaadin-user-color-5

#084391

User color 6

--vaadin-user-color-6

#078836

CSS Selectors

The following CSS selectors can be used in stylesheets to target the various parts and states of the component. See the Styling documentation for more details on how to style components.

Avatar

Root element

vaadin-avatar

Hovered avatar

vaadin-avatar:hover

Focused avatar

vaadin-avatar[focused]

Avatar with color index

vaadin-avatar[has-color-index]

Overflow avatar

vaadin-avatar[slot="overflow"]

Expanded overflow avatar

vaadin-avatar[aria-expanded="true"]

Avatar icon

vaadin-avatar::part(icon)

Avatar abbreviation

vaadin-avatar::part(abbr)

Avatar Group

Root element

vaadin-avatar-group

Avatar in group

vaadin-avatar-group > vaadin-avatar

Overlay

Overlay element

vaadin-avatar-group-overlay

Overlay background

vaadin-avatar-group-overlay::part(overlay)

Overlay content wrapper

vaadin-avatar-group-overlay::part(content)

Menu inside overlay

vaadin-avatar-group-menu

Item element

vaadin-avatar-group-menu-item

Hovered item

vaadin-avatar-group-menu-item:hover

Focused item

vaadin-avatar-group-menu-item[focused]

Item content wrapper

vaadin-avatar-group-menu-item::part(content)

Item avatar

vaadin-avatar-group-menu-item > vaadin-avatar