Avatar

Anatomy

1. Background: A randomly selected fill color for the initial-based variant.
2. Initials: The first letters of a user’s first and last names in a darker gradient of fill color.
3. Stroke: The outer circle for the initial-based variant.
4. Image: A user-uploaded image of themselves.

Usage Guidance

When to Use

• Use Avatars to provide a user with a stronger identity or when an access point into their profile provides reasonable benefit.

Behaviors

Pressed States

Pressed states pertain to Avatars in standalone instances only. Avatars that are part of a larger selection item do not have individual pressed behaviors.

Disabled States

Disabled states apply only for non-standalone Avatars, which are a sub-component in a larger composite component such as an Avatar in a list item.

Loading States

The Avatar should not default to a generic user icon when loading. The Avatar has a skeleton that accommodates different background colors when loading.

Examples

Avatars vary on the basis of version, sizing, background, and default color.

Version

Avatars default to their initial-based version unless a user manually uploads a profile photo. The lettering inside the Avatar is based on the two letter English initials of the Western equivalent of a user name.

Sizing

Avatars should feel appropriately sized based on their importance and nearby content. They vary on a scale from XXS to XXL to accommodate an array of different possible use cases:

• XXS: 24 x 24. Please note that it is recommended to use a larger size than XXS for all uses outside of pills.

• XS: 32 x 32
• S: 40 x 40
• M: 48 x 48
• L: 72 x 72
• XL: 96 x 96
• XXL: 120 x 120

Regardless of Avatar sizing, all tap targets are 48x48 or larger.

Background

Against darker gradients, white strokes are used to increase contrast. The initial-based variant stroke becomes white and a white stroke is added around the image-based variant.

Color

Initial-based avatars are randomly assigned a gender neutral and contrast friendly color on a per-user basis.

API Guidelines

Methods

Class name: Avatar Module name: UIComponentsPlugin

public init(
        featureData: FeatureMetricsData,
        context: SemanticContext = .default,
        imageType: ImageType,
        avatarSize: AvatarSize,
        avatarColor: AvatarColor = .chiliMango,
        isOnDarkBackground: Bool = false,
        isEnabled: Bool = true,
        isLoading: Bool = false,
        onClick: @escaping (() -> Void) = {}
    )

Parameters

Accessibility Guidelines

Coming soon...

Anatomy

1. Background: A randomly selected fill color for the initial-based variant.
2. Initials: The first letters of a user’s first and last names in a darker gradient of fill color.
3. Stroke: The outer circle for the initial-based variant.
4. Image: A user-uploaded image of themselves.

Usage Guidance

When to Use

• Use Avatars to provide a user with a stronger identity or when an access point into their profile provides reasonable benefit.

Behaviors

Pressed States

Pressed states pertain to Avatars in standalone instances only. Avatars that are part of a larger selection item do not have individual pressed behaviors.

Disabled States

Disabled states apply only for non-standalone Avatars, which are a sub-component in a larger composite component such as an Avatar in a list item.

Loading States

The Avatar should not default to a generic user icon when loading. The Avatar has a skeleton that accommodates different background colors when loading.

Examples

Avatars vary on the basis of version, sizing, background, and default color.

Version

Avatars default to their initial-based version unless a user manually uploads a profile photo. The lettering inside the Avatar is based on the two letter English initials of the Western equivalent of a user name.

Sizing

Avatars should feel appropriately sized based on their importance and nearby content. They vary on a scale from XXS to XXL to accommodate an array of different possible use cases:

• XXS: 24 x 24. Please note that it is recommended to use a larger size than XXS for all uses outside of pills.

• XS: 32 x 32
• S: 40 x 40
• M: 48 x 48
• L: 72 x 72
• XL: 96 x 96
• XXL: 120 x 120

Regardless of Avatar sizing, all tap targets are 48x48 or larger.

Background

Against darker gradients, white strokes are used to increase contrast. The initial-based variant stroke becomes white and a white stroke is added around the image-based variant.

Color

Initial-based avatars are randomly assigned a gender neutral and contrast friendly color on a per-user basis.

API Guidelines

Methods

fun AvatarUiComponent(
    modifier: Modifier = Modifier,
    avatarSizeConfig: AvatarSizeConfig = AvatarSizeConfig.S,
    avatarColorConfig: AvatarColorConfig = AvatarColorConfig.ChiliMango,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    onColorBackground: Boolean = false,
    enabled: Boolean = true,
    isLoading: Boolean = false,
    initials: String,
    imageResourceId: Int? = null,
    bitmap: Bitmap? = null,
    role: Role? = null,
    onClick: (() -> Unit)? = null,
)

Parameters

Accessibility Guidelines

Coming soon...