Avatar
A circular user representation component. Renders an image when src is provided, otherwise falls back to initials with a deterministic color generated from the name.
Sizes & Initials
Four sizes: normal, compact, small, micro. Color is generated deterministically from the name — the same name always produces the same color.
Normal
AJ
BS
CW
DL
EM
Compact
AJ
BS
CW
DL
Small
AJ
BS
CW
DL
Micro
AJ
BS
CW
DL
Image & Custom Color
Use src for a photo avatar. Override the built-in fixed palette via color. Use a semantic background/contrast pair so your custom avatar follows theme overrides.
AA
SA
?
Tooltip
Add tooltip to show the full name on hover. Works with both initials and image avatars. Requires name to be set.
AJ
BS
CW