Avatar
Displaying the full name of a person in an interface can take up way more space than needed and can disrupt rhythm. Use avatars in place of a user’s name (but include the name in content readable by assistive technology).

Structure
Elements

- Container
- Image
Variations
Size
Fixed sizes are available to provide consistency across layouts.

Size | Dimensions (square) |
---|---|
Extra small | 24 px |
Small | 36 px |
Medium | 48 px |
Large | 72 px |
Extra large | 96 px |
Profile
When part of the page hierarchy, give the avatar a visual boost by adding a shadow.

Badge
Sometimes you need to dress up an avatar with a little bling. Common examples would be an online/offline indicator or a descriptive icon.

Stacked
To display a horizontal row of avatars, use the stacked avatar component.

Style
Style specifications are available to inspect via Abstract. The following link will take you to their web-based interface.
Theming
The following table lists the theme properties used to style this component and any variations as well as a sample value.
A full list of properties used within the design system—as well as general usage guidelines—is available on the Theme properties page.
Examples of each theme property may be referenced by clicking a property name in the “property” column.
Sample | Property | Sample value |
---|---|---|
bodyTextSecondaryColor
Medium dark text color used for secondary or muted content in layouts |
#64707DFF
|
|
secondaryContentBackgroundColor
|
#DEE4ECFF
|