Avatar Component
Sizes
JS
JS
JS
JS
Variants
J
S
With Status
O
F
A
B
With Image
Usage Examples
Basic Avatar
import { Avatar } from "@/components/avatar";
<Avatar fallback="JD" />Avatar with Different Sizes
<Avatar size="sm" fallback="JD" /> <Avatar size="md" fallback="JD" /> <Avatar size="lg" fallback="JD" /> <Avatar size="xl" fallback="JD" />
Avatar with Different Variants
<Avatar variant="circle" fallback="C" /> <Avatar variant="square" fallback="S" />
Avatar with Status
<Avatar status="online" fallback="JD" /> <Avatar status="offline" fallback="JD" /> <Avatar status="away" fallback="JD" /> <Avatar status="busy" fallback="JD" />
Avatar with Image
<Avatar src="https://example.com/avatar.jpg" alt="User Avatar" status="online" />