Avatar usage

Components

Avatar

View on GitHub

Avatars are how we visually represent our users.

Appearance

The leaf is used when the avatar will represent a user working within Sprout.

The circle is used when the avatar will represent a user on social.

Common sizing

Sizes of avatars vary widely across the app. However, here are some known sizes and their usage.

Size	Use
`20px`	Commonly used as the avatar size in the compact . However, is seen across multiple densities.
`32px`	Commonly used in small .
`40px`	The default size, used in the large density.

Color

We encourage users to display authenticity by using an image for their avatar, however in cases where the user does not provide an image, we default to displaying their initials. While it is possible to manually define the text and background colors using the color and bg props, it is strongly recommended that consumers utilize the type prop, which will ensure accessible color palettes.

<Box mx="80px" display="flex" justifyContent="center" alignItems="center">
  <Avatar
    appearance="circle"
    name="Sergio Castaneda"
    type="red"
  />
  <Avatar
    appearance="circle"
    name="Sergio Castaneda"
    type="auto"
  />
</Box>