Avatar
The circular identity mark: initials, a fallback glyph, any scale's tint.
Initials centered on a tinted circle; empty initials fall back to the person
glyph. Color re-tints the pastel way from any scale.
Installation
Use the module import (the default), or own the source: lotusui add
vendors the component into your app and lotusui update keeps the copy mergeable —
see Registry.
go get github.com/ikaito-com/lotusui
# or vendor the source into your app:
go run github.com/ikaito-com/lotusui/cmd/lotusui add avatarUsage
lotusui.Avatar(th, lotusui.AvatarProps{Initials: "AL"})
lotusui.Avatar(th, lotusui.AvatarProps{Initials: "KB", Color: lotusui.Teal})Sizes
Group
AvatarGroup overlaps right-over-left, each avatar ringed in the panel background.
lotusui.AvatarGroup(th, lotusui.AvatarGroupProps{},
lotusui.AvatarProps{Initials: "CN"},
lotusui.AvatarProps{Initials: "LR", Color: lotusui.Teal},
lotusui.AvatarProps{Initials: "ER", Color: lotusui.Pink},
)Badge
Badge pins a status dot to the bottom-right rim — a color anchor, or an icon inside.
lotusui.Avatar(th, lotusui.AvatarProps{Initials: "CN",
Badge: &lotusui.AvatarBadge{Color: lotusui.Green}})
lotusui.Avatar(th, lotusui.AvatarProps{Initials: "PP",
Badge: &lotusui.AvatarBadge{Icon: lotusui.IconPlus}})Group with count
Count (or CountIcon) closes the group with a "+N" bubble.
API
| Option | Type | Description |
|---|---|---|
Initials | string | Centered in the circle; empty falls back to the person glyph. |
Size | Size | The shared size presets (Size2XS–Size2XL). |
Color | ColorScale | Pastel re-tint from any scale. |
Scheme | *Scheme | Wins over Color: full manual slot control. |
Badge | *AvatarBadge | Status dot on the rim: Color anchors the fill, Icon renders inside. |
AvatarGroup(th, opts, avatars…) | widget | Ringed overlap; Count/CountIcon add the trailing bubble. |