Avatar

Preview

About

A user avatar: photo, initials, icon, decorative gradient, or a custom widget.

• size: small (40), medium (54, default), or large (70); diameter overrides the numeric value
• Content, in priority order: customChild > image > backgroundGradient (with optional initials) > initials > fallback icon (icon or a default person icon)
• tone: blue (default), neutral, green, orange, red — color of the fallback text/icon
• fallbackSurface: default_ (solid neutral background) or soft (background tinted with the tone's color)
• shape: circle (default) or roundedSquare
• showStoryRing + storyRingGradient: a gradient ring around the avatar ("story" style)
• status: online draws a presence indicator in the bottom corner
• onTap + semanticLabel: makes the avatar tappable with press feedback
• KasyAvatar.gradientFill(...): shortcut for a fill that's only the decorative gradient

KasyAvatarGroup stacks multiple avatars with a separation ring, a "+N" counter, and an optional add button (onAdd).

Last updated on 08/23/2026