Skip to main content

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.

Interactive Component Playground

TuxAvatar Workbench

Presets:

Ramona Delgado

Status: success

Properties Inspector5 configurable knobs
Display Namename
Avatar Sizesize
Status Indicator Dotdot
Photo URLphotoUrl
Initials Overrideinitials
Dynamic Component Syntax
<tux-avatar name="Ramona Delgado" size="md" dot="success"></tux-avatar>

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" />