Avatar
Avatar Component
Playground
Props
| Prop | Type | Default | Value |
|---|---|---|---|
| size | selectxs | sm | md | lg | xl | — | |
| src | text | https://i.pravatar.cc/150?img=1 | |
| fallback | text | JD | |
| status | selectonline | idle | busy | offline | — |
Default
WithStatus
ExtraSmall
XS
Small
SM
Medium
MD
Large
LG
ExtraLarge
XL
WithImage
AllSizes
XS
SM
MD
LG
XL
| PROP | TYPE | DEFAULT | DESCRIPTION |
|---|---|---|---|
fallback | text | JD | Fallback initials |
size | select | — | Avatar size |
src | text | https://i.pravatar.cc/150?img=1 | Avatar image URL |
status | select | — | Status indicator |
Using Avatartsx
import { Avatar } from '@/components/Avatar'
<Avatar
size="..."
src="..."
fallback="..."
status="..."
/>Tokens Used
No design tokens detected