Early access. Read the blog post

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 or 2.

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 | Array<0 | 1 | 2>
src?: string
status?: 'online' | 'editing' | 'inactive'
title?: string
Updated 1w ago
By
the platform for structured content