component

TuxAvatar

The identity mark primitive — photo with initials fallback and an optional status dot. Extracted from TuxUserMenu (which now consumes it) so products stop re-deriving initials per app.

basics

Initials, three sizes

<TuxAvatar name="Ramona Delgado" />
<TuxAvatar name="Wei Chen" size="lg" />
<TuxAvatar initials="TG" size="sm" />

photo

Photo with fallback

<!-- Photo when available; broken URLs fall back to initials. -->
<TuxAvatar name="Ramona Delgado" photo-url="/head-shot.jpg" />

status

Status dot

<TuxAvatar name="Wei Chen" dot="success" />
<TuxAvatar name="Priya Nair" dot="warning" size="lg" />

a11y

Decorative by default

RD
<!-- Inside a labelled control (default): decorative, hidden from AT.
     Standing alone: give it the accessible name itself. -->
<TuxAvatar name="Ramona Delgado" :decorative="false" alt="Ramona Delgado" />