Avatar

Avatar renders a user or entity representation with support for image, fallback, and icon content.

Overview

Avatar styling is concentrated in the root identity surface, with child parts inheriting its size and color context.

Public CSS Variables

Variable	Value	Affects
Overall avatar dimensions.`Avatar` and child parts		No visible change in this state
Border-radius ratio.`Avatar`		No visible change in this state

Edit a value to try it in the demo. Hover a variable to outline what it changes; switch the preview state to see hover, pressed, focus, disabled and invalid variables. Click a name to copy it.

Part-Level Variables

Avatar: root size, color, and clipping surface.
AvatarImage: image content clipped to the root.
AvatarFallback: text fallback sized against the root.
AvatarIcon: icon fallback aligned to the root size.

State And Variant Interaction

size maps directly to spacing tokens.
variant changes background and foreground treatment.
Fallback readability depends heavily on chosen size.

Examples

.roundedAvatar {
  --avatar-br-ratio: 0.5;
}

.compactAvatar {
  --avatar-size: 20px;
}

Do Not Override

Do not allow fallback text to outgrow the chosen size.
Do not remove clipping if images still depend on the root shape.
Do not rely on color alone to distinguish variant meaning.