Avatar

Avatars are how we visually represent our users.

Live Editor

function AvatarExample() {
  return (
    <Box mx='80px' display='flex' justifyContent='space-between' alignItems='center'>
      <Avatar
        appearance='leaf'
        name='Sergio Castaneda'
        src='/Sergio-Castaneda-Orange.png'
      />
      <Avatar
        appearance='circle'
        name='Sergio Castaneda'
        size='32px'
      />
      <Avatar
        appearance='leaf'
        name='Sergio Castaneda'
        src='/Sergio-Castaneda-Orange.png'
        size='20px'
      />
    </Box>
  );
}

Properties

Name	Type	Default	Description
`appearance`	`\| "circle"` `\| "leaf"`	`"circle"`	Circles are used for social profile avatars, leaf is for internal Sprout user avatars
`name`	`string`	`""`	The name of the user that the avatar represents
`initials`	`string`		The initials of the user that the avatar represents. If not provided, the first letter of the first 1-2 words of the `name` prop will be used.
`src`	`string`		URL of the avatar image. If a URL is not provided, the component will fall back to showing the user's initials
`type`	`\| "auto"` `\| "neutral"` `\| "purple"` `\| "green"` `\| "blue"` `\| "yellow"` `\| "red"` `\| "orange"`	`defaultType`
`size`	`string`	`"40px"`

Properties​

Properties