Avatar

An avatar is an icon that represents a user

Design

Avatar

Healthy
Show details
Healthy
Published: May 22, 2023
Updated: February 05, 2024

Initials avatar

Initials avatars are used as a fallback for people when no images are available.

🟢 Avatar / Type=Initials, Size=Small

🟢 Avatar / Type=Initials, Size=Small

🟢 Avatar / Type=Initials, Size=Medium

🟢 Avatar / Type=Initials, Size=Medium

🟢 Avatar / Type=Initials, Size=Large

🟢 Avatar / Type=Initials, Size=Large

🟢 Avatar / Type=Initials, Size=Xlarge

🟢 Avatar / Type=Initials, Size=Xlarge

These avatars are randomly assigned one of the following primary or secondary background colors

#2489a9
100
#0e9976
100
#6a266d
100
#bf3144
100
#e66442
100

 

Image avatar

Image avatars are used for people who have uploaded a profile image.

🟢 Avatar / Type=Image, Size=Small

🟢 Avatar / Type=Image, Size=Small

🟢 Avatar / Type=Image, Size=Medium

🟢 Avatar / Type=Image, Size=Medium

🟢 Avatar / Type=Image, Size=Large

🟢 Avatar / Type=Image, Size=Large

🟢 Avatar / Type=Image, Size=Xlarge

🟢 Avatar / Type=Image, Size=Xlarge

 

Avatar stack

Healthy
Show details
Healthy
Published: May 22, 2023
Updated: February 05, 2024

Stacks can be used when multiple users have interacted with a particular resource or item. Large avatar stacks can be used in places like page headings, where the small stacks should be used within tables or inline content.

 

The stroke of the avatar stack should be inherited from the background of the parent container it sits in. For instance, a stack of avatars placed in a gray table row should use a gray stroke, and the white stroke variant for a white table row.

🟢 Avatar stack / Stroke=White, Size=Small

🟢 Avatar stack / Stroke=White, Size=Small

🟢 Avatar stack / Stroke=White, Size=Large

🟢 Avatar stack / Stroke=White, Size=Large

🟢 Avatar stack / Stroke=Gray, Size=Small

🟢 Avatar stack / Stroke=Gray, Size=Small

🟢 Avatar stack / Stroke=Gray, Size=Large

🟢 Avatar stack / Stroke=Gray, Size=Large

Sizes

Avatars come in multiple sizes: 24px, 32px, 40px and 64px.

Default to the larger size, but use the smaller size when you need to de-emphasize the content.

Guidelines

Use cases

Whenever you have need to display a member's name (e.g., as the person who last updated a document, or who created a document), consider replacing it with, or prepending it with an accompanying avatar. This personalizes the experience, and emphasizes the collaborative aspects of Iterable.

  • Include member’s name in a tooltip if using a standalone avatar
  • Use standalone avatars when having the user’s name visible without hover is more efficient, for example referencing created by and modified by—explicit names are more efficient than hovering avatars.

 

Accessibility

  • Use the name prop to include alternative text for screen readers.
  • Don't use a tool-tip with an avatar when it's non-interactive or disabled. The tooltip won't work for keyboard users and screen readers.

 

Health

Is documented

The component is fully documented

Accessibile

Tested against WCAG 2.1 AAA accessibility guidelines

Tokens

This component uses tokens in both Figma and code

Figma component

Includes a link to a Figma component that has been imported to Supernova

Storybook

Includes a link to an external code repository

Status

The component has a health status indicated

Healthy

Is documented

The component is fully documented

Accessibile

Tested against WCAG 2.1 AAA accessibility guidelines

Tokens

This component uses tokens in both Figma and code

Figma component

Includes a link to a Figma component that has been imported to Supernova

Storybook

Includes a link to an external code repository

Status

The component has a health status indicated

Healthy