Avatar

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

Usage

Code

Accessibility

Class: 1B

  <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.

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

Item	Name	Description	Optional
1	Avatar	The avatar is available in three variants: image, initials or icon.	No
2	Badge	Status of user or entity.	Yes
3	Name	Diplays the name of the user or entity. This element can be a link to go to a specific page.	Yes
4	Description	Description 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

Item	Options	Description
Size	`sm` `md` `lg` `xl` `2xl` `3xl` `4xl`	The avatar come in six sizes: sm, md, large, xl, 2xl and 3xl providing flexibility to align with your design requirements.
Orientation	`horizontal` `vertical`	The avatar has two different lay-out possibilities relating to the positions of the avatar, name and description relative to each other.
Header	`boolean`	To show the header with the name of the user or entity.

Avatar Circle

Item	Options	Description
Type	`initials` `photo` `placeholder`	Choose if you want to show a photo, a placeholder (icon) or initials in the avatar.
Badge Type	`alphanumeric` `icon` `empty`	Choose how you want to visualize the status within the badge.
Initials	`value`	To insert the initials of the avatar.
Show Badge	`boolean`	To indicate if the badge is enabled or disabled.
Badge	`value`	To insert the value of the badge.

Badge

Item	Options	Description
Background	`danger` `warning` `success` `accent` `grey` `primary`	To visualize the status color of the badge.

Item	Options	Description
Title Link	`boolean`	To show the name of the user or entity as a link.
Header	`value`	To insert the name of the user or entity.
Show Subheader	`boolean`	To show the description of the user or entity.
Subheader	`value`	To insert the description of the user or entity.

Class: 1B

Photo by Toa Heftiba

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

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

API

Component has a range of properties to define the experience in different use cases.

Properties

Name	Attribute	Type	Default	Description
`badge`	-	`Badge \| undefined`		The slotted badge element.
`clipPath`	-	`string \| undefined`		The clip-path cutout for the badge.
`displayInitials`	`display-initials`	`string \| undefined`		The initials that need to be displayed. If none are set they are determined based on the displayName .
`displayName`	`display-name`	`string \| undefined`		The name that needs to be displayed.
`href`	`href`	`string \| undefined`		An optional URL that will be used for linking the display name.
`imageOnly`	`image-only`	`boolean \| undefined`		This hides the name when set to true.
`pictureUrl`	`picture-url`	`string \| undefined`		The url of the avatar image.
`size`	`size`	`'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl' \| '3xl' \| '4xl'`	`'md'`	The size of the avatar.
`vertical`	`vertical`	`boolean \| undefined`		If true, will display the name below the image.

Methods

Name	Parameters	Return	Description
`renderAvatar`		`TemplateResult`

Slots

Name	Description
`badge`	The badge to display on the avatar.
`default`	The subheading of the avatar.
`fallback`	The fallback content to display when no picture is set.

CSS Parts

Name	Description
`avatar`	The container for positioning the badge.
`initials`	The initials to display when no picture is set.
`name`	The display name, either a <span> or <a> if `href` is set.
`picture`	The element containing the image, initials or fallback content.
`wrapper`	The wrapper element around the image and name.

WAI-ARIA

WAI-ARIA Roles, States, and Properties for an avatar provide essential information to assistive technologies and screen readers. They convey the avatar's role and additional properties to ensure accessibility and a better user experience for individuals using assistive technology.

Attribute	Value	Description	User suppliedSpecifies whether the attribute is always set in the component (no) or it needs to be provided by the developer (yes)
`aria-label`	string	Combination of name, label and badge text, depending on settings. See [Note 1] below for more explanation	no

Notes

There are various components that can occur in the label;
- The display name, that is only added when the avatar is set to image-only. Otherwise the name would be read out twice by the screen reader, and the main point of using an avatar is a quick way to identify a user. Reading out a name twice would not be "quick".
- The label, this can be set by using the label attribute. This is usefull when a status badge is displayed for example, that way it would read out "Anna Jenssen, online". In the string you can also use {{badgeText}} which wil be replaced by the text in the badge. That way you can get it to read out "Anna Jenssen has 5 open assignments" when you set has {{badgeText}} open assignments as the label text
- The badge text, when no label it set it will just read out what is visible in the badge.

Interactive example