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