LifeDS

Component

Avatar

User representation with image, initials fallback, status badge and group stacking.

sizesm · default · lg · xl (44px — matches Button xl)
AvatarImagesrc, alt — image with fallback
AvatarFallbackinitials or icon
AvatarBadgestatus indicator or icon
AvatarGroupstacked list
AvatarGroupCountoverflow count or icon
Playground
SC

Sizes

SC

sm

24px

SC

default

32px

SC

lg

40px

SC

xl

44px

Fallback — when image is unavailable

initials fallback
ABJDMK
broken image URL falls back to initials
BK

Badge — status indicator

with image
SCSCSCSC
with fallback
ABJDMKXL
with icon content
SC

Group — stacked avatars

default size
SCJDMKVR
with count overflow
SCJDMK
+5
sm size
SCJDMK
+3
lg size
SCJDMK
+8
xl size
SCJDMK
+8
count with icon
SCJDMK

As dropdown menu trigger

ghost icon trigger wrapping an Avatar

RTL support

SCVR
SCJDMK
+٣

Tokens used

5 semantic tokens consumed by this component.

--primaryPrimary
bg-primarytext-primaryborder-primaryring-primary
--primary-foregroundPrimary Foreground
text-primary-foregroundbg-primary-foreground
--mutedMuted
bg-mutedtext-mutedborder-muted
--muted-foregroundMuted Foreground
text-muted-foreground
--borderBorder
border-borderborder