Avatar, AvatarProgress

Description

Avatars are visual representations of people or entities and are often displayed within a sidebar, lists, or cards.

The Avatar and AvatarProgress components have two variants:

• Interactive avatar - it is used in case the avatar serves as a button for accessing user profile settings (e.g., user’s preferences, account settings, logging out, etc.). A distinct feature of an interactive avatar is the cog icon in the bottom-right corner.
• Static avatar - it cannot be interacted with and it is usually found in tables and cards. The static avatar does not have the cog icon.

Details

• The interactive variant acts as a button and has three standard states: enabled, hover, and focus.
• The static variant has only one, default state.
• By default, the Avatar and AvatarProgress components display a user-selected image (a profile picture). When the profile picture is not available, the user’s name and surname initials are displayed instead.
• The “reverse” styling is used when the component (in either of the variants) is used on a surface with the “active” background color.
• The AvatarProgress component uses its outline to visually represent progress (i.e. a ratio between completed and pending [incomplete] tasks) as a simple donut chart.
• Use Avatar with the Cog icon in case the avatar serves as a button for accessing user profile settings.
• Use the default alternative with the user’s name initials if no image source is available. If the first or last name consists of more than two words, the first character of the first word in the name and surname strings are used.
• Let users crop and position their images after uploading if possible.
• The size can be adjusted as required, based on the use case. 
• When there is no profile picture or user name (for whatever reason) - display the letter "A" (Anonymous)

Interactive & Static Avatars

Reverse state:

When used on a surface with an “active” background color, the “reverse” styling of the Avatar component shall be used.

Progress state:

There is an extra case for using the component’s outline as a progress bar to represent the user's achievements ergonomically. It can be used, for example, to show the extent to which the profile has been completed.

Please note: AvatarProgress is a separate React component that is a derivative of the Avatar component. It is themable and has all variants and states of its simpler sibling, the Avatar component.

Interactive Avatar with initials:

Interactive Avatar with an image:

Interactive Avatar with initials:

Static Avatar with initials:

Theming

States:

Accessibility

Keyboard Navigation

Interactive Avatar component with Manual Activation

The settings page is displayed when users activate the Avatar with either Space, Enter, or a mouse click. So, for keyboard users, activating the Avatar requires two steps: (1) focus the avatar, and (2) activate the avatar.

The avatar should have a text equivalent. Use the accessibilityLabel prop to ensure there is a text description for the image. The VoiceOver description will default to the name prop if accessibilityLabel is not provided. Make sure that the alternative text properly describes the information and function of the avatar image(s). Depending on the situation, it may be helpful to state the user or company name and/or their status.\

Acceptance criteria

• Interactive avatar - it is used in case the avatar serves as a button for accessing user profile settings. It is also will have a cog icon.
• Static avatar - it cannot be interacted with. It does not have the cog icon.
• AvatarProgress will have all variants and states of the Avatar component.
• The Reverse state will be used on a surface with an “active” background color.