Avatar

Displays a user image, initials fallback, or a default icon.

With Initials

JDJDJD

Shapes

AA

Status indicator

Pass status to render a colored dot in the bottom-right corner — useful for presence in chat / collaboration UI.

ABCD

Outlined (stacked)

For overlapping avatar stacks, set outlined to add a ring matching the page background — separates each avatar from its neighbor without needing manual gaps.

ABC

Default Fallback

When no src or name is provided, a generic user icon is shown.

Props

Prop	Type	Default	Description
src	string	-	Image URL
alt	string	''	Alt text for the image
name	string	-	Name used to derive initials when no image is available
shape	'circle' | 'square'	'circle'	Shape of the avatar
size	'sm' | 'md' | 'lg'	'md'	Size of the avatar
status	'online' | 'away' | 'busy' | 'offline'	-	Presence indicator dot in the bottom-right corner
outlined	boolean	false	Add a ring matching --tui-bg (good for stacked avatars)
className	string	-	Additional CSS class
style	CSSProperties	-	Inline styles