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

In the component itself we use multiple aria-attributes to assure the component works well with a range of assistive technologies. For some attributes however it is not possible for the Design System to add a meaningfull value, because it relies on the context or way a component is used.

For this component we can't think of any common scenarios that require you to add specific attributes, but keep in mind that if you use images or icons that (partially) replace text you need to provide an alternative for assistive technology, by adding an alttext or aria-label as you normally would.

Avatar label

Several parts of the avatar component will influence what will be available for assistive technology

The display name is only added as an alt-attribute on the avatar image 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 badge text, in the optional (Badge component), will be read after the name.

Interactive example