Usage

Appearance

Live Editor

function AvatarAppearanceLeaf() {
  return (
    <Box mx="80px" display="flex" justifyContent="center" alignItems="center">
      <Avatar
        appearance="leaf"
        name="Sergio Castaneda"
        src="/Sergio-Castaneda-Orange.png"
      />
    </Box>
  );
}

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

Live Editor

function AvatarAppearanceCircle() {
  return (
    <Box mx="80px" display="flex" justifyContent="center" alignItems="center">
      <Avatar
        appearance="circle"
        name="Sergio Castaneda"
        src="/Sergio-Castaneda-Orange.png"
      />
    </Box>
  );
}

The circle appearance prop 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 Message. However, is seen across multiple densities.
32px	Commonly used in small Message.
40px	The default size, used in the large Message 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.

Live Editor

function AvatarColor() {
  return (
    <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>
  );
}