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'><Avatarappearance='leaf'name='Sergio Castaneda'src='/Sergio-Castaneda-Orange.png'/><Avatarappearance='circle'name='Sergio Castaneda'size='32px'/><Avatarappearance='leaf'name='Sergio Castaneda'src='/Sergio-Castaneda-Orange.png'size='20px'/></Box>
Properties
Name | Type | Default | Description | Required? |
---|---|---|---|---|
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' |