Avatar

An avatar is a visual representation of an entity, such as a user or an organization.

UsageCodeAccessibility
Class: 1B

Photos by Xia Yang and Toa Heftiba

  <sl-avatar
    display-name="Anna Jenssen"
    picture-url="/images/avatar.jpg"
    size="3xl"
    vertical></sl-avatar>

  <sl-avatar display-name="Tim Jenssen" picture-url="/images/avatar.jpg" size="xl">
    <sl-badge emphasis="bold" slot="badge" variant="success"></sl-badge>
    Class: 1B
  </sl-avatar>

When to use

User profiles

Avatars are commonly used to display user profile pictures. Avatars provide a face to a name. When users see their own profile picture, it fosters a sense of ownership and personal connection.

People representation

In the context of contact lists, avatars serve as visual cues that swiftly connect users to their contacts. By associating a face or image with each entry, avatars make the list more relatable and memorable. Whether it’s a colleague, student, or teacher, avatars provide that instant recognition, making interactions more personal and efficient.

When not to use

Intrusive Design

Don’t let avatars distract from essential content. Ensure they enhance, rather than hinder, usability.

Avatar actions

Avatar link variant shouldn't be used to trigger actions. It is intended solely for linking to another page. The users typically expect clickable avatars to navigate to profile pages or related content. By reserving the avatar link variant for page navigation, we maintain a clear and consistent user experience, ensuring that interactions with avatars are predictable and intuitive.

Anatomy

ItemNameDescriptionOptional
1AvatarThe avatar is available in three variants: image, initials or icon.No
2BadgeStatus of user or entity.Yes
3NameDiplays the name of the user or entity. This element can be a link to go to a specific page.Yes
4DescriptionDescription is used to show essential information of user or entity which is related to the context of the page.Yes

Figma Options

With these options, you can tweak the appearance of the avatar in Figma. They are available in the Design Panel so you can compose the avatar to exactly fit the user experience need for the use case you are working on.

Avatar

ItemOptionsDescription
Sizesm md lg xl 2xl 3xl 4xlThe avatar come in six sizes: sm, md, large, xl, 2xl and 3xl providing flexibility to align with your design requirements.
Orientationhorizontal verticalThe avatar has two different lay-out possibilities relating to the positions of the avatar, name and description relative to each other.
HeaderbooleanTo show the header with the name of the user or entity.

Avatar Circle

ItemOptionsDescription
Typeinitials photo placeholderChoose if you want to show a photo, a placeholder (icon) or initials in the avatar.
Badge Typealphanumeric icon emptyChoose how you want to visualize the status within the badge.
InitialsvalueTo insert the initials of the avatar.
Show BadgebooleanTo indicate if the badge is enabled or disabled.
BadgevalueTo insert the value of the badge.

Badge

ItemOptionsDescription
Backgrounddanger warning success accent grey primaryTo visualize the status color of the badge.
ItemOptionsDescription
Title LinkbooleanTo show the name of the user or entity as a link.
HeadervalueTo insert the name of the user or entity.
Show SubheaderbooleanTo show the description of the user or entity.
SubheadervalueTo insert the description of the user or entity.
Interactive example