Avatar
Image-with-fallback primitive in 5 sizes and two shapes. The fallback only appears if the image fails or is absent — so initials never flash during a normal load.
Source
src/components/ui/avatar.tsxSizes
xs (20px) → xl (64px). Fallback typography scales with the size token.
RBRBRBRBRB
Shape
shape="square" flips to a rounded-md silhouette for app/brand avatars.
RBAK
Image with fallback
Renders the image once it loads; falls back to initials on error or missing src. The broken-URL example demonstrates the fallback path.
RP