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.

Avatar colors  

The Avatar component’s color property can be set to either blue, purple, magenta, red, orange, yellow, green, cyan or gray (default).

Avatar images  

The Avatar component takes a src property to render the avatar image.

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