Avatar

Displays a user or entity — image with graceful fallback to initials or a generic icon. Supports presence status and grouped stacking.

Examples

Online

Busy

Away

Offline

src

string

Image URL. Falls back to initials or icon on error.

alt

string

Alt text for the image.

fallback

string

Up to 2 initials shown when no image is available.

size= 'md'

'xs' | 'sm' | 'md' | 'lg' | 'xl'

Controls the avatar dimensions.

shape= 'circle'

'circle' | 'square'

Circle for people, square for organisations or bots.

status

'online' | 'offline' | 'busy' | 'away'

Shows a presence indicator dot.

Prop	Type	Default	Description
src	string	—	Image URL. Falls back to initials or icon on error.
alt	string	—	Alt text for the image.
fallback	string	—	Up to 2 initials shown when no image is available.
size	'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'	'md'	Controls the avatar dimensions.
shape	'circle' \| 'square'	'circle'	Circle for people, square for organisations or bots.
status	'online' \| 'offline' \| 'busy' \| 'away'	—	Shows a presence indicator dot.

children*

ReactNode

Avatar components to stack.

max

number

Maximum avatars shown before an overflow count appears.

size= 'md'

'xs' | 'sm' | 'md' | 'lg' | 'xl'

Passed to the overflow counter for consistent sizing.

Prop	Type	Default	Description
children*	ReactNode	—	Avatar components to stack.
max	number	—	Maximum avatars shown before an overflow count appears.
size	'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'	'md'	Passed to the overflow counter for consistent sizing.