Avatar | Lime design system

Examples

Money from a friend

Maya Lens

Dinner on Friday

Who to pay

Shared goal

MLNHTRPN

4 saving together

When to use it

Use: Who a payment is with or who owns something: a friend on a split bill, a household member.
Use: A stack of people on a shared goal (AvatarGroup).
Not for: The image is a receipt or a merchant logo.
Not for: The element labels a state. Use Badge.

7 rules

Must: Pass name with the full name. Because it is the image alt and the initials, so an empty name leaves an unnamed image and a blank disc.
Must: Pass the display name, not the handle. Because initials come from the first two words, so "@mayaslens" draws an @ in the disc.
Should: Show four avatars and a count after them; discs overlap by about an eighth, so every person still widens the row.
Should: Keep the name as visible text beside an avatar and hide the avatar from assistive tech.
Should: Match size to the line: xs for 14px text, sm for a row, md for a card, lg for a profile.
Never: Add an online dot, gradient or extra ring. Because Lime tracks no presence, so a dot or lime ring claims an online status nothing backs.
Must: Wrap an avatar that opens a profile in a Button or link. Because the avatar is a span with no focus or role, so an onClick on it is out of keyboard reach.

4 checks

: The image uses name as alt; the fallback is role="img" labelled with the name.
: Not focusable; it takes no keys.
: Beside a visible name the person is read twice; hide the avatar.
: Name an AvatarGroup with aria-label.

6 edge cases

One-word or emoji name: Initials are the first grapheme of each of the first two words, so an emoji stays whole.
Image fails: The initials show, with no layout shift.
Right to left: The overlap is a logical margin, so the first avatar sits at the right edge and the stack runs leftward.
Empty name: An empty grey disc with no initials and empty alt text.
Forced colors: Every avatar gets a 1px CanvasText border; the group ring is dropped.
Zoom 200%: Sizes are pixels; the disc does not grow.

4 props

8 tokens