Component
Avatar
User avatar with image, initials, or icon. Supports status indicators.
tsx
import { Avatar, AvatarStack, AvatarCard } from 'wss3-forge'Usage
•
Shows initials when no image provided
•
Color is generated from name
•
Add status for online indicators
•
AvatarStack for groups of users
•
AvatarCard for detailed user info
JD
JS
BW
AB
O
A
B
A
B
C
+1
Examples
Sizes
JD
JD
JD
JD
JD
tsx
1<HStack gap="md" align="center">2 <Avatar name="John Doe" size="xs" />3 <Avatar name="John Doe" size="sm" />4 <Avatar name="John Doe" size="md" />5 <Avatar name="John Doe" size="lg" />6 <Avatar name="John Doe" size="xl" />7</HStack>With Status
OU
AU
BU
OU
tsx
1<HStack gap="md">2 <Avatar name="Online User" status="online" />3 <Avatar name="Away User" status="away" />4 <Avatar name="Busy User" status="busy" />5 <Avatar name="Offline User" status="offline" />6</HStack>Avatar Stack
A
B
C
D
+1
tsx
1<AvatarStack2 users={[3 { name: 'Alice' },4 { name: 'Bob' },5 { name: 'Charlie' },6 { name: 'Diana' },7 { name: 'Eve' }8 ]}9 max={4}10/>Previous
Accordion
Next
Badge
Last updated: December 2025