Avatar
Avatars are used to represent a person or object.
By default, a generic icon will be shown. You can personalize avatars by adding custom icons, initials, and images. You should always provide a label for assistive devices.
Avatar(_.label := "User avatar")()Examples
Images
To use an image for the avatar, set the image and label attributes. This will take priority and be shown over initials and icons.
Avatar images can be lazily loaded by setting the loading attribute to lazy.
Avatar( _.image := "https://images.unsplash.com/photo-1529778873920-4da4926a72c2?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80", _.label := "Avatar of a gray tabby kitten looking dow")()Avatar( _.image := "https://images.unsplash.com/photo-1591871937573-74dbba515c4c?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80", _.label := "Avatar of a white and grey kitten on grey textile", _.loading.`lazy`)()Initials
When you don't have an image to use, you can set the initials attribute to show something more personalized than an icon.
Avatar( _.initials := "WA", _.label := "Avatar with initials: SL")()Custom Icons
When no image or initials are set, an icon will be shown. The default avatar shows a generic "user" icon, but you can customize this with the icon slot.
Avatar( _.label := "Avatar with an image icon", // [!code highlight:6] _.slots.icon( Icon( _.name := "image", _.variant := "solid" )() ))()Avatar( _.label := "Avatar with an archive icon", _.slots.icon( Icon( _.name := "archive", _.variant := "solid" )() ))()Avatar( _.label := "Avatar with a briefcase icon", _.slots.icon( Icon( _.name := "briefcase", _.variant := "solid" )() ))()Shapes
Avatars can be shaped using the shape attribute.
Avatar( _.shape.square, _.label := "Square avatar")()Avatar( _.shape.rounded, _.label := "Rounded avatar")()Avatar( _.shape.circle, _.label := "Circle avatar")()Avatar Groups
You can group avatars with a few lines of CSS.
cls("avatar-group"),Avatar( _.image := "https://images.unsplash.com/photo-1490150028299-bf57d78394e0?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=256&h=256&q=80&crop=right", _.label := "Avatar 1 of 4")(),Avatar( _.image := "https://images.unsplash.com/photo-1503454537195-1dcabb73ffb9?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=256&h=256&crop=left&q=80", _.label := "Avatar 2 of 4")(),Avatar( _.image := "https://images.unsplash.com/photo-1456439663599-95b042d50252?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=256&h=256&crop=left&q=80", _.label := "Avatar 3 of 4")(),Avatar( _.image := "https://images.unsplash.com/flagged/photo-1554078875-e37cb8b0e27d?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=256&h=256&crop=top&q=80", _.label := "Avatar 4 of 4")().avatar-group wa-avatar:not(:first-of-type) { margin-left: calc(-1 * var(--wa-space-m));}.avatar-group wa-avatar { border: solid 2px var(--wa-color-surface-default);}