Avatar
AtomKullanıcı profil fotoğrafı veya baş harfleri gösterici. 5 boyut destekler. Fotoğraf yoksa bg-primary-subtle / text-primary ile initials render edilir.
JD
<Avatar name="Jane Doe" />JDJDJDJDJD
<Avatar name="Jane Doe" size="xs" />
<Avatar name="Jane Doe" size="sm" />
<Avatar name="Jane Doe" size="md" />
<Avatar name="Jane Doe" size="lg" />
<Avatar name="Jane Doe" size="xl" />JS
John Smith
john@example.com
<div className="flex items-center gap-3">
<Avatar name="John Smith" size="md" />
<div>
<p className="text-sm font-medium text-text-primary">John Smith</p>
<p className="text-xs text-text-secondary">john@example.com</p>
</div>
</div>
Image source
Uses the same sizing and status rules
<Avatar src="/avatar.jpg" name="Jane Doe" />ABCD
<Avatar name="Alice" status="online" />
<Avatar name="Bob" status="away" />
<Avatar name="Carol" status="busy" />
<Avatar name="Dave" status="offline" />ABCD+2
<AvatarGroup
avatars={[{ name: 'Alice' }, { name: 'Bob' }, ...]}
max={4}
/>