display contract
Avatar
Circular representation of a user, organisation, or system entity. Falls back from image → initials → generic icon.
Variants
- image
- Photo backed by user uploaded image
- initials
- First letter(s) on a deterministic background tint
- icon
- Generic person/building icon when no name is known
- system
- Brand mark for non-human entities
Sizes
- xs
- 20pt — inline mentions
- sm
- 24pt — table rows
- md
- 32pt — list rows (default)
- lg
- 48pt — page headers
- xl
- 96pt — profile hero
Example
<Avatar src={user.avatarUrl} name={user.name} size="md" />Usage rule
Always include a non-decorative `alt` for image variant; "" only when accompanied by a visible name.
The full Avatar contract has 5 more rules and 1 more example, plus the do-not patterns. Get the full recipe.