Documentation

Documentation

Avatar

Source: TypeScript / Java
Styling API reference for the Avatar and Avatar Group components.

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