Skip to content

docs: avatar Aura style variants and props #4862

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
+111 −225
Open

docs: avatar Aura style variants and props #4862

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
030833a
docs: avatar Aura style variants and props
sissbruecker Dec 1, 2025
52632fb
Merge branch 'main' into docs/avatar-aura-style-variants
sissbruecker Dec 1, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
66 changes: 8 additions & 58 deletions articles/components/avatar/index.adoc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -318,83 +318,33 @@ include::{root}/frontend/demo/component/avatar/react/avatar-group-internationali
endif::[]
--

== Size Variants

Avatar has four available size variants:
== Use Cases

Avatar can be paired with Popover to create a user account menu.
Copy link
Contributor Author

@sissbruecker sissbruecker Dec 1, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Removed the example using menu bar and included a similar example with popover instead. Hopefully that leads to less work to make it work with Aura later on.


[.example]
--

ifdef::lit[]
[source,html]
----
include::{root}/frontend/demo/component/avatar/avatar-sizes.ts[render,tags=snippet,indent=0,group=Lit]
include::{root}/frontend/demo/component/popover/popover-user-menu.ts[render,tags=snippet,indent=0,group=Lit]
----
endif::[]

ifdef::flow[]
[source,java]
----
include::{root}/src/main/java/com/vaadin/demo/component/avatar/AvatarSizes.java[render,tags=snippet,indent=0,group=Flow]
include::{root}/src/main/java/com/vaadin/demo/component/popover/PopoverUserMenu.java[render,tags=snippet,indent=0,group=Flow]
----
endif::[]

ifdef::react[]
[source,tsx]
----
include::{root}/frontend/demo/component/avatar/react/avatar-sizes.tsx[render,tags=snippet,indent=0,group=React]
----
endif::[]
--

|===
| Variant | Theme name
Copy link
Contributor Author

@sissbruecker sissbruecker Dec 1, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Removed this table, as it only duplicates what's shown in the table right above.


|Extra large
|`xlarge`

|Large
|`large`

|Small
|`small`

|Extra small
|`xsmall`

|===

Size variants should be used only in special cases.
See <<{articles}/styling/lumo/lumo-style-properties/size-space#,Size and Space>> for details on how to
change the default Avatar size.

== Use Cases

Avatar can be paired with Menu Bar to create a user account menu.

[.example]
--

ifdef::lit[]
[source,javascript]
----
include::{root}/frontend/demo/component/avatar/avatar-menu-bar.ts[render,tags=snippet,indent=0,group=Lit]
include::{root}/frontend/demo/component/popover/react/popover-user-menu.tsx[render,tags=snippet,indent=0,group=React]
----
endif::[]

ifdef::flow[]
[source,java]
[source,css]
----
include::{root}/src/main/java/com/vaadin/demo/component/avatar/AvatarMenuBar.java[render,tags=snippet,indent=0,group=Flow]
include::{root}/frontend/themes/docs/popover-user-menu.css[]
----
endif::[]

ifdef::react[]
[source,tsx]
----
include::{root}/frontend/demo/component/avatar/react/avatar-menu-bar.tsx[render,tags=snippet,indent=0,group=React]
----
endif::[]
--


Expand Down
117 changes: 103 additions & 14 deletions articles/components/avatar/styling.adoc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,61 +7,150 @@ order: 50
---
= Avatar Styling


== Style Variants

Avatar and Avatar Group support the following style variants:

[cols="1,3,1"]
|===
| Variant | Description | Supported by

|`reverse`
|Reverses the stacking order of avatars in Avatar Group
|Aura, Lumo

|`large`
|Large avatar size
|Lumo

|`small`
|Small avatar size
|Lumo

|`xlarge`
|Extra large avatar size
|Lumo

|`xsmall`
|Extra small avatar size
|Lumo

|===


=== Size Variants

Avatar has four available size variants:

[.example]
--

ifdef::lit[]
[source,html]
----
include::{root}/frontend/demo/component/avatar/avatar-sizes.ts[render,tags=snippet,indent=0,group=Lit]
----
endif::[]

ifdef::flow[]
[source,java]
----
include::{root}/src/main/java/com/vaadin/demo/component/avatar/AvatarSizes.java[render,tags=snippet,indent=0,group=Flow]
----
endif::[]

ifdef::react[]
[source,tsx]
----
include::{root}/frontend/demo/component/avatar/react/avatar-sizes.tsx[render,tags=snippet,indent=0,group=React]
----
endif::[]
--

Size variants should be used only in special cases.
See <<{articles}/styling/lumo/lumo-style-properties/size-space#,Size and Space>> for details on how to
change the default Avatar size.

include::../_styling-section-theming-props.adoc[tag=style-properties]

=== Common Properties

[cols="1,2,2"]
|===
| Feature | Property | Default Value
| Feature | Property | Supported by

|Avatar size
|`--vaadin-avatar-size`
|`var(--lumo-size-m)`
|Aura, Lumo

|Avatar background
|`--vaadin-avatar-background`
|Aura, Lumo

|Avatar border width
|`--vaadin-avatar-border-width`
|Aura

|Avatar border color
|`--vaadin-avatar-border-color`
|Aura

|Avatar Group overlap
|`--vaadin-avatar-group-overlap`
|`8px`
|Aura, Lumo

|Avatar Group overlap border
|`--vaadin-avatar-group-overlap-border`
|`2px`
|Avatar Group gap
|`--vaadin-avatar-group-gap`
|Aura, Lumo
Comment on lines 99 to +105
Copy link
Contributor Author

@sissbruecker sissbruecker Dec 1, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Comments by @web-padawan from #4848:

This property is marked as deprecated in the source CSS, should we maybe remove it from here?

The --vaadin-avatar-group-gap custom CSS property is missing (also supported by Lumo).

Replaced --vaadin-avatar-group-overlap-border with --vaadin-avatar-group-gap.


|===

=== User Color Properties
Copy link
Contributor Author

@sissbruecker sissbruecker Dec 1, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Comment by @web-padawan from #4848:

Should we remove or change "User Color Properties" below as that table lists Lumo default values?

Replaced default values with supported by column. Added more rows for the additional values that only Aura supports.


[cols="1,2,2"]
|===
| Feature | Property | Default Value
| Feature | Property | Supported by

|User color 0
|`--vaadin-user-color-0`
|`#df0b92`
|Aura, Lumo

|User color 1
|`--vaadin-user-color-1`
|`#650acc`
|Aura, Lumo

|User color 2
|`--vaadin-user-color-2`
|`#097faa`
|Aura, Lumo

|User color 3
|`--vaadin-user-color-3`
|`#ad6200`
|Aura, Lumo

|User color 4
|`--vaadin-user-color-4`
|`#bf16f3`
|Aura, Lumo

|User color 5
|`--vaadin-user-color-5`
|`#084391`
|Aura, Lumo

|User color 6
|`--vaadin-user-color-6`
|`#078836`
|Aura, Lumo

|User color 7
|`--vaadin-user-color-7`
|Aura

|User color 8
|`--vaadin-user-color-8`
|Aura

|User color 9
|`--vaadin-user-color-9`
|Aura

|===

Expand Down
61 changes: 0 additions & 61 deletions frontend/demo/component/avatar/avatar-menu-bar.ts
View file
Open in desktop

This file was deleted.

49 changes: 0 additions & 49 deletions frontend/demo/component/avatar/react/avatar-menu-bar.tsx
View file
Open in desktop

This file was deleted.

Loading