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>

<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
`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"`
`variant`	`"dark"` `"light"`	`"light"`
`bg`	`string`
`color`	`string`
`size`	`string`	`"40px"`