display contract
Avatar
Circular representation of a user, organisation, or system entity. Falls back from image → initials → generic icon.
Variants
- image
- initials
- icon
- system
Sizes
- xs
- sm
- md
- lg
- xl
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.