Avatar

The Avatar component is used to display a user's profile image, initials, or custom content with support for status indicators.

Usage

Default

<Avatar name="Davin Chiupka" />

Props

Sortable data table
Prop	Type	Default	Description
src	string	-	Image URL for the avatar. If not set, uses fallback initials or icon.
alt	string	-	Alternative text for the image (improves accessibility).
name	string	-	Name or initials to display when no image is provided.
label	string	-	Aria label for accessibility.
fallback	string	-	Fallback string (e.g., initials) when no image is loaded.
size	"xs" \| "small" \| "medium" \| "large" \| "xl"	Configured Default	Size of the avatar.
shape	"circle" \| "rounded" \| "square"	"circle"	Shape of the avatar.
theme	"primary" \| "secondary" \| "tertiary" \| "quaternary" \| "clear"	Configured Default	Visual theme color.
state	"" \| "success" \| "error" \| "warning"	-	State style for semantic status (success, warning, error).
shadow	"none" \| "light" \| "medium" \| "strong" \| "intense"	Configured Default	Shadow level for the avatar.
status	"online" \| "away" \| "offline" \| "busy" \| "in-a-meeting" \| "on-vacation" \| "streaming" \| "recording" \| "typing" \| "speaking" \| "viewing" \| "custom"	-	Status indicator dot or icon.
statusIcon	ReactNode	-	Custom icon for the avatar status indicator (overrides default).
statusPosition	"topLeft" \| "topRight" \| "bottomLeft" \| "bottomRight"	"bottomRight"	Position of the status indicator.
outline	boolean	false	Whether to display a colored outline around the avatar.
priority	boolean	false	If true, loads the image with high priority (Next.js only).
href	string	-	If set, wraps avatar in a link.
className	string	-	Additional CSS class for custom styling.
children	ReactNode	-	Children for custom content inside the avatar (overrides src/fallback).
data-testid	string	"avatar"	Test ID for test automation.