1. Primitives
  2. Avatar

<Avatar />

Avatars are used to represent people and other agents (e.g. bots).

Avatar sizes  

The Avatar component’s size property can be set to either 0, 1 , 2 or 3.
<Card
padding={4}
style={{lineHeight: 0, textAlign: 'center'}}
>
<Inline space={3}>
<Avatar size={0} />
<Avatar size={1} />
<Avatar size={2} />
<Avatar size={3} />
</Inline>
</Card>

Avatar colors  

The Avatar component’s color property can be set to either blue, purple, magenta, red, orange, yellow, green, cyan or gray (default).
<Card
padding={4}
style={{lineHeight: 0, textAlign: 'center'}}
>
<Inline space={3}>
<Avatar color="blue" />
<Avatar color="purple" />
<Avatar color="magenta" />
<Avatar color="red" />
<Avatar color="orange" />
<Avatar color="yellow" />
<Avatar color="green" />
<Avatar color="cyan" />
<Avatar />
</Inline>
</Card>

Avatar images  

The Avatar component takes a src property to render the avatar image.
<Card padding={4}>
<Flex justify="center">
<Avatar
alt="A random face"
color="magenta"
src="https://source.unsplash.com/96x96/?face"
size={2}
/>
</Flex>
</Card>

Properties  

animateArrowFrom?: 'top' | 'bottom' | 'inside'
arrowPosition?: 'top' | 'bottom' | 'inside'
as?: React.ElementType | keyof JSX.IntrinsicElements
color?: 'gray' | 'blue' | 'purple' | 'magenta' | 'red' | 'orange' | 'yellow' | 'green' | 'cyan'
initials?: string
onImageLoadError?: (event: Error) => void
size?: 0 | 1 | 2 | 3 | Array<0 | 1 | 2 | 3>
src?: string
status?: 'online' | 'editing' | 'inactive'
title?: string
Made withby folks at