Avatar
AtomUser profile photo or initials indicator. 5 sizes with optional status dot. When no image is provided, initials render on a bg-primary-subtle / text-primary tile.
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}
/>