<Avatar />
Avatars are used to represent people and other agents (e.g. bots).
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>
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>
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>
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