Avatar

An image with a fallback while it loads or when it fails.

Import
import { Avatar } from '@texuli/primitives/avatar';
Pattern
Image with text fallback
Size budget
4.0 KiB gzip for @texuli/primitives/avatar
Reference
packages/primitives/docs/prim-avatar.md

Live demo

Loading the Avatar demo…

Anatomy

Avatar anatomy: each box holds the parts inside it.
  • Avatar.Root
    • Avatar.Image
    • Avatar.Fallback

Behavior checks

tests/behavior/scenarios/avatar.spec.ts runs 3 rows against the Avatar scenario on Chromium, WebKit and the Pixel 7. Each row asserts what a user or assistive technology can observe, held to the WAI-ARIA Authoring Practices pattern.

All 3 rows
  1. fallback is visible before the image has loaded
  2. a successful load reveals the image and hides the fallback
  3. a failed load keeps the fallback and marks error

Limits

  • Every row passes on every project; a flaky row gets at most two retries.
  • Size: at most 4.0 KiB gzip for @texuli/primitives/avatar (pnpm size).
  • Open-to-focus: p75 at most 150 ms (asserted with TEXULI_PERF=1).