Avatar

Components

Avatar

Avatars are how we visually represent our users.

import { Avatar } from '@sproutsocial/racine'

<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. Will be automatically generated from the name prop if not provided.
`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`	`'neutral'` `'purple'` `'green'` `'blue'` `'yellow'` `'red'` `'orange'`	`'neutral'`
`bg`	`string`
`color`	`string`
`size`	`string`	`'40px'`