primitive8 tokens7 stories
Avatar
User profile picture with fallback to initials when no image is provided
Stories
Tokens
Design decisions specific to Avatar — the values that control its appearance across all theme axes.
TokenTypeReferenceValueUsed by
--avatar-size-smdimension
{space.6}24px
Avatar
--avatar-size-mddimension
{space.8}32px
Avatar
--avatar-size-lgdimension
40px40px
AvatarSkeleton
--avatar-size-xldimension
{space.11}64px
Avatar
--avatar-ring-widthdimension
{border-width.medium}2px
Avatar
--avatar-fallback-font-sizedimension
{font-size.sm}14px
Avatar
--avatar-fallback-font-weightfontWeight
{font-weight.semibold}600
Avatar
--avatar-group-overlapdimension
-8px-8px
Avatar