Avatar

A user avatar component with image, fallback, badge, and group support.

Avatar

Installation

pnpm dlx stera-ui@latest add avatar

Composition

Use the following composition to build an Avatar:

Avatar
├── AvatarImage
├── AvatarFallback
└── AvatarBadge

Use the following composition to build an AvatarGroup:

AvatarGroup
├── Avatar
│   ├── AvatarImage
│   ├── AvatarFallback
│   └── AvatarBadge
├── Avatar
│   ├── AvatarImage
│   ├── AvatarFallback
│   └── AvatarBadge
└── AvatarGroupCount

Examples

Fallback Only

Sizes

CGCGCG

Avatar Sizes

Size	Description
`sm`	Small
`default`	Medium (default)
`lg`	Large

Shapes

CGCG

Avatar Shapes

Shape	Description
`circle`	Circular (default)
`square`	Rounded square

With Badge

CGCGCGCGCG

With Badge

Badge Variant	Description
`subtle`	Neutral indicator
`success`	Online / active
`danger`	Busy / unavailable
`warning`	Away
`icon`	Custom icon inside badge

Icon Fallback

Avatar Group

RGLFCG

Avatar Group

API Reference

Built on Base UI's Avatar primitive — see the full API reference there.

Avatar

Prop	Type	Default
`size`	`"sm" \| "default" \| "lg"`	`"default"`
`shape`	`"circle" \| "square"`	`"circle"`

AvatarBadge

Prop	Type	Default
`variant`	`"subtle" \| "success" \| "danger" \| "warning" \| "icon"`	`"subtle"`