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

System props

System props apply standard sets of properties to a component that can be used to alter its appearance on the fly.

COMMON

Learn more

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
`size`	`string`	`"40px"`