DocsComponentsAvatar

Avatar

Primitive

Radix-powered avatar with image, initials fallback, 6 sizes, 3 shapes, status indicators, verified badges, and grouped avatar stacks with overflow.

#ff7b72">import { FqAvatar, FqAvatarGroup } from '@/components/harlowui/primitives/fq-avatar'
#ff7b72">export default function UserHeader() {
#ff7b72">return (
<#7ee787">div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
<#7ee787">FqAvatar
src=#a5d6ff">"/avatars/sarah.jpg"
fallback=#a5d6ff">"SC"
size=#a5d6ff">"md"
shape=#a5d6ff">"circle"
verified
/>
<#7ee787">FqAvatarGroup max={3}>
<#7ee787">FqAvatar fallback="AC" />
<#7ee787">FqAvatar fallback="MR" />
<#7ee787">FqAvatar fallback="PS" />
<#7ee787">FqAvatar fallback="JD" />
</#7ee787">FqAvatarGroup>
</#7ee787">div>
)
}

Sizes

Six sizes from tiny indicators to large profile images.

xs
sm
md
lg
xl
2xl

Shapes

circle
square
squircle

Status Indicators

Four status states with semantic colors. Positioned with an inset border matching the parent background.

online
away
busy
offline

Verified Badge

Avatar Group

Stacked avatars with configurable max and overflow counter.

max=3
+2
max=5
+2
size=md
+1

Real-World Patterns

Avatars in production contexts -- team rosters, profile headers, and collaboration UIs.

Core Team

5 members

+2

Alexandra Chen

Lead Engineer

Marcus Rivera

Design Lead

Priya Sharma

Product Manager

James Donovan

Backend Engineer

Tara Williams

QA Lead

Alexandra Chen

Lead Engineer at FracIQ

142

Commits

28

PRs

4.9

Rating

API Reference

FqAvatar

PropTypeDefaultDescription
size"xs" | "sm" | "md" | "lg" | "xl" | "2xl""md"Avatar size
shape"circle" | "square" | "squircle""circle"Avatar border radius shape
srcstring-Image URL
fallbackstring-Initials or text shown when image unavailable
status"online" | "away" | "busy" | "offline"-Status indicator dot color
verifiedbooleanfalseShows verified checkmark badge
altstring-Accessible alt text for the avatar image

FqAvatarGroup

PropTypeDefaultDescription
avatars*{ src?: string; alt?: string; fallback?: string }[]-Array of avatar props
maxnumber4Maximum visible avatars before +N overflow
sizesame as FqAvatar"sm"Size applied to all avatars in the group