Primitive

Avatar

Initials or image identity marker.

Avatar is for compact identity only. Keep names and presence text in the surrounding row or card composition.
media
DOM renderImage render
AvatarDefault
AKRLC

Playground

Controls update query params directly, so every primitive state can be linked, rendered, and screenshotted deterministically.

Loading playground

Rendered matrix

Every state maps to the same primitive render route through the state query param.

Default

Initial avatar sizes.
AKRLC
Render state

Image

Image-backed avatar surface.
Rubric interface referenceRLC
Render state

Public contract

The public prop table is generated from item metadata and schema-backed controls.
NameTypeDefaultDescription
initialsstringCInitials shown when no image is provided.
srcstring-Optional image URL.
altstring''Accessible image text when src is present.
density'compact' | 'comfortable' | 'editorial'comfortableFoundation-backed avatar diameter.