Avatar

Displays a user’s profile image, initials, or a generic fallback. Supports presence indicators via status and compact stacking with AvatarGroup.

1<Avatar name="Gabriel Hernandez" initials="GH" />
2

Usage

1import { Avatar } from "atlas";
2
3<Avatar
4  name="Gabriel Hernandez"
5  initials="GH"
6  size="md"
7/>
8

Examples

Default

The default Avatar renders at size="md" with initials when no src is provided.

1<Avatar name="Gabriel Hernandez" initials="GH" />
2

Sizes

The size prop accepts sm, md, or lg. All three render a circular container that scales the image or initials text proportionally.

AAA

1<Avatar size="sm" name="Alice" initials="A" />
2<Avatar size="md" name="Alice" initials="A" />
3<Avatar size="lg" name="Alice" initials="A" />
4

With image

When a src URL is provided, the avatar renders the image and falls back to initials if the image fails to load. Pass name alongside src so the component can set proper alt text.

1<Avatar
2  src="https://api.dicebear.com/9.x/notionists/png?seed=atlas&size=96"
3  name="Jordan Rivera"
4/>
5

Status

Set status to online or offline to display a small colored dot on the avatar’s border. The indicator is positioned at the bottom-right corner and adapts to each size.

1<Avatar name="Alice" initials="A" status="online" />
2<Avatar name="Bob" initials="B" status="offline" />
3

Group

Wrap multiple avatars in AvatarGroup to stack them with overlapping edges. The max prop controls how many are visible before a "+N" overflow indicator appears.

ACMJSR+2

1<AvatarGroup max={3}>
2  <Avatar name="Alice Chen" initials="AC" />
3  <Avatar name="Marcus Johnson" initials="MJ" />
4  <Avatar name="Sofia Rivera" initials="SR" />
5  <Avatar name="Kenji Tanaka" initials="KT" />
6  <Avatar name="Gabriel Hernandez" initials="GH" />
7</AvatarGroup>
8

API Reference

Prop	Type	Default
src	string	-
alt	string	-
name	string	-
initials	string	-
size	"sm" \| "md" \| "lg"	"md"
status	"online" \| "offline"	-