This page ships a Markdown twin for AI tools.

ComponentsAvatar

displaytexulinot agent-emittableapp

Avatar

avatar

A face or initials for one person, with an optional presence status.

One token contract, every theme. Display components take color, radius, density and state styling from the --tx-* token contract — the same variables the theme strip below overrides — so a theme swap re-colors them without per-component fixes.

Live examples

Named person

Named person

Loading demo…

In your theme

This page renders in the site theme, enterprise-neutral. Every one of the 210 library themes re-colors every component through the --tx-* contract. The three below carry real token values from the library, rendered at build — no island, no extra requests.

  • Violet

    light mode · AA contrast

    • background
    • surface
    • primary
    • accent
    • border
    Open Theme Studio

  • Monochrome

    light mode · AA contrast

    • background
    • surface
    • primary
    • accent
    • border
    Open Theme Studio

  • Accessible Dark Contrast

    dark mode · AAA contrast

    • background
    • surface
    • primary
    • accent
    • border
    Open Theme Studio

Props

Public props for Avatar
NameKindRequiredDefaultDescription
namestringyes——
srcstringno——
srcTrustenum (developer, untrusted)no"untrusted"—
srcsetstringno——
sizesstringno——
sizeenum (xs, sm, md, lg)no"md"—
toneenum (primary, success, warning, destructive, info, neutral)no——
colorenum (none, chart-1, chart-2, chart-3, chart-4, chart-5, chart-6, chart-7, chart-8)no"none"—
shapeenum (circle, square)no——
statusenum (online, away, busy, offline)no——
decorativebooleannofalse—
delayMsnumberno0—
initialsstringno——
classstringno——

Keyboard

Keyboard behavior for Avatar
KeyAction
—See accessibility notes for keyboard behavior.

Accessibility

  • Named by the person unless decorative.
  • Image URLs pass the untrusted image policy.

Evidence for avatar

Latest committed gates for avatar (as of 2026-10-23). Static snapshot — not live CI.

Behavior

checkedscenario avatar

3 checks

Rows in tests/behavior/scenarios/avatar.spec.ts, held to the WAI-ARIA APG pattern, run on Chromium and WebKit, and its touch rows on the Pixel 7.

Size (gzip)

@texuli/primitives/avatar · budget 4.00 KiB

Budget from texuli.budgets.json; re-measure with `pnpm size --filter <entry>`.

Axe

documented

  • tests/e2e/site-component-pages.spec.ts
  • docs/quality (a11y-*)

Site component pages axe gate; package-level a11y docs under docs/quality when present.

Browsers

  • chromium
  • webkit
  • mobile

Playwright projects: Desktop Chrome, Desktop Safari, Pixel 7. Firefox is a known gap on this host.

When to use

Use when

  • Show who wrote a message, who owns a task, or who is in a thread

Don’t use when

Prefer another component

  • A group of faces in one circle (use avatar-group-grid)