Docs
Primitives
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).

Open in Arcade

Avatar images

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

Open in Arcade

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'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>size?: 0 | 1 | 2 | 3 | Array<0 | 1 | 2 | 3>

src?: string

status?: 'online' | 'editing' | 'inactive'

title?: string

Made withby folks at