Component · Content · 22
Avatar
Avatar = a circular identity token built from a photo, an initials fallback, and an optional presence dot.
NWPL+4
Nova Wake40px · online
What is a Avatar?
An avatar stands in for a person. Name the shape, the fallback when there is no image, and what the badge on it means.
Variants
Tap a property to highlight it in the preview.
- A select that picks exactly one value from its menu.
- Name this type explicitly in the prompt.
- Name this type explicitly in the prompt.
- Give a value, not a vibe word.
- Give a value, not a vibe word.
- Give a value, not a vibe word.
- Give a value, not a vibe word.
- Give a value, not a vibe word.
States
Tap a property to highlight it in the preview.
- The resting, valid state of a field before any input or error.
- Say this state explicitly in the prompt.
- Say this state explicitly in the prompt.
- Say this state explicitly in the prompt.
Anatomy
These are the parts to name in your prompt.
- 01 Surface
- 02 Image
- 03 Initials
- 04 Presence dot
- 05 Overflow count
When to use
- Comment and activity rows
- Team and assignee pickers
- Account menus in a top bar
Avoid when
- There are more than five people — show a count, not a pile
- The image is decorative — it is not a person
- Names are absent and initials are ambiguous
Cap a group at four faces — past that, a “+12” chip reads faster than a pile of overlapping circles.
See also
Anti-patterns
Tinted Neutral Image Outline→ Create an avatar component.
STYLE
- 32px circle, #E5E5EA surface, 1px inner ring
- initials fallback: 13px 600 #1D1D1F, two characters max
- presence dot 8px, #34C759 online, #C7C7CC away, bottom-right
- a group overlaps by 8px with a +N chip at the end
STATES
- default, with image, initials fallback, group overflow chip
TECHNICAL
- React
- Tailwind CSS
- shadcn/ui