Avatar
Styling API reference for the Avatar and Avatar Group components.
- Usage
- Styling
CSS Selectors
The following CSS selectors can be used in stylesheets to target the various parts and states of the component.
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)
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