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

NameTypeDefaultDescriptionRequired?
appearance
'circle'
'leaf'
'circle'
Circles are used for social profile avatars, leaf is for internal Sprout user avatars
namestring
The name of the user that the avatar represents
srcstring
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'
bgstring
colorstring
sizestring'40px'