Photonix UI - React Components, Templates & Figma Design System

Avatar

Represents a person or entity with image, initials fallback, and status indicator support.

Usage

import { Avatar } from '@photonix/ultimate';

<Avatar name="Alex Carter" size="48" />

Prop	Type	Default	Description
src	`string`	`-`	Image source
alt	`string`	`-`	Alt text for image
name	`string`	`-`	Name for initials fallback
icon	`React.ReactNode`	`-`	Icon for fallback
size	`AvatarSize`	`'40'`	Size of the avatar
status	`boolean \| "online" \| "offline" \| "busy" \| "away"`	`-`	Status indicator
stroke	`boolean`	`-`	Whether to show a border around the avatar (used in groups)

Use the built-in size scale from compact status avatars up to profile hero sizes.

Sizes

<Avatar size="24" name="A" />
<Avatar size="40" name="B" />
<Avatar size="80" name="C" />

If no image is available, Avatar falls back to initials or the default icon.

Fallbacks

<Avatar name="John Doe" />
<Avatar />

Use the status badge for presence and state signalling.

Status

<Avatar name="Active" status="online" />
<Avatar name="Busy" status="busy" />
<Avatar name="Away" status="away" />