On This Page

An avatar shows one or more users avatars.

  • Fluent
  • Declarative

            VerticalLayout.builder()
                .content(List.of(
                  
                        Avatar.builder().name("Mateu Pérez")
                                        .build(),
                        
                        Avatar.builder().name("Mateu Pérez")
                                        .image("/images/mateu.png")
                                        .build(),
                        
                        new AvatarGroup(List.of(
                                Avatar.builder().name("Mateu Pérez").build(),
                                Avatar.builder().name("Antònia Galmés").build(),
                                Avatar.builder().name("Miguel Pérez").build()
                            ), 2)
                              
                      ))
                 .build()

TBD

Available properties

This is the list of available properties for an avatar:

PropertyDescriptionNotes
idid for this component
cssClasseslist of css classescontent of the css attribute
styleinline style attributescontent of the style attribute
namename of the avatarautomatically shows the initials
imageimage for the avatar
abbreviationabbreviationautomatically shows the initials, if not present

And this is the list of available properties for an avatar group:

PropertyDescriptionNotes
maxItemsVisiblea numbera +x will be showed if more items

You can see a full explanation of those properties at https://vaadin.com/docs/latest/components/avatar