EXTENDED UI

Avatar

People, clients and teams at a glance — photos, initials, status and groups.
THEME
01

Playground

Content, size, shape, status, ring and badge
♛Olivia Lane● OnlineInitials and colour come from the name — same name, same colour.
<Avatar name="Olivia Lane" size={80} status="online" />
Settings
CONTENT
SIZE
SHAPE
STATUS
RING
BADGE
02

Sizes & shapes

20 → 120 · people round, clients square
PEOPLE♛20♛24♛32♛40♛56♛80♛120
CLIENTSNT♛20NT♛24NT♛32NT♛40NT♛56NT♛80NT♛120
People are circles · clients and workspaces are rounded squares (radius 28 %).
03

Groups

Stacks with +N and a team grid
Stack
♛♛♛♛♛+2
7 people · showing 5 · hover +2 for names · hover the stack to spread
Team grid
♛OliviaProducer
♛AlexPhotographer
♛AnaRetoucher
♛SaraArt director
♛JonPhotographer
♛LeoVideographer
04

In context

Rows, pickers, comments and typing
Table rows
♛Olivia LaneProducerOnline
♛Alex ReyesPhotographerDo not disturb
♛Ana PetitRetoucherOnline
♛Sara OrtizArt directorAway
Pick people
♛Lena♛Ana
Comment & typing
♛Lena Holm 20 minLove hero 04 — more blue in the shadows?
♛Ana Petit 5 minShadows lifted, cooler white balance. Uploading.
♛Sara is typing…
05

Behaviour

Fallback, live status and selection
Photo fails → initials♛The photo loads. Now simulate a broken URL.
Live status♛● Online
Selected
1 selected · tap to toggle
06

Rules & a11y

Checklist and Do / Don’t
Checklist
DO✓Fall back gracefully: photo → initials → icon✓Keep one colour per person everywhere✓Cap stacks and show +N with names✓Put the status dot bottom-right
DON’T✕Use random colours on every render✕Rely on the status colour alone✕Crop logos into circles✕Show more than 8 faces in a row