Data displayVisual draft 0.1
Avatar
Represents a person or organization in compact interface contexts.
CoreFoundational primitiveHTML first
01 / Preview
The current Angle direction.
AM
JC
AMJCRH+8
02 / Decision
What this component must preserve.
Angle component decision
Use real imagery when available and deterministic initials as fallback. Never rely on avatars as the only identity label.
03 / Anatomy
Parts with a specific job.
Image
01Fallback
02Status
03Accessible name
0404 / States
The happy path is only one state.
01Default
02Hover
03Active
04Focus
05Disabled
06Loading
07Success
08Error
05 / Guidance
Use the contract, not the screenshot.
Do
Use real imagery when available and deterministic initials as fallback. Never rely on avatars as the only identity label.
Avoid
Do not create a one-off version that bypasses shared states, tokens, focus behavior, or the component decision documented here.