Avatar

In context

Purpose

Avatar gives a person or org a stable, recognisable mark without a network round-trip. It anchors list rows and messages so the eye can track "who" down a column. The person/org shape split carries meaning: you can tell a customer from a partner co-op before reading the name.

Anatomy

• Shape — a tinted circle (person) or a solid teal rounded-square (org).
• Glyph — the first letter of name, or an explicit initial.
• Size — a single size (diameter) drives everything.

Variants

• Person (default) — teal-tinted circle, teal initial.
• Organisation (org) — solid teal rounded-square, white initial.
• Custom — override color / background for a themed chip.

Code

import { Avatar } from '@daytwo/components'

<Avatar name="Daw Hla" size={40} />
<Avatar name="Chiang Mai Vendors Co-op" org size={40} />

When to use

• List rows for people/orgs (payments, members, feed).
• Message threads and DMs.

When NOT to use

• As a button with no identity behind it — that's an icon button.
• For a photo-first experience — this system is initials-only on purpose.

Good vs bad

• Good: a members list where customers are tinted circles and the partner co-op is a teal square — the relationship is legible before you read a word.
• Bad: loading remote profile photos that block the row on a slow connection — the list stalls exactly when our offline-first user needs it.

Edge cases

Tokens used