Avatar
PrimitiveRadix-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
| Prop | Type | Default | Description |
|---|---|---|---|
size | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "md" | Avatar size |
shape | "circle" | "square" | "squircle" | "circle" | Avatar border radius shape |
src | string | - | Image URL |
fallback | string | - | Initials or text shown when image unavailable |
status | "online" | "away" | "busy" | "offline" | - | Status indicator dot color |
verified | boolean | false | Shows verified checkmark badge |
alt | string | - | Accessible alt text for the avatar image |
FqAvatarGroup
| Prop | Type | Default | Description |
|---|---|---|---|
avatars* | { src?: string; alt?: string; fallback?: string }[] | - | Array of avatar props |
max | number | 4 | Maximum visible avatars before +N overflow |
size | same as FqAvatar | "sm" | Size applied to all avatars in the group |