chrome

<tc-avatar>

User avatar with image, deterministic initials fallback, status dot, and optional ring. Five sizes, circle or square.

import "@ra9/tan-compose-kit/avatar"

Props

Name	Type	Default	Description
`src`	`string`	`""`	Image URL. Falls back to initials if loading fails or empty.
`alt`	`string`	`""`	Alt text. Defaults to `name` when omitted.
`name`	`string`	`""`	Display name. Used to derive initials and a deterministic tint when there is no image.
`size`	`"xs" \| "sm" \| "md" \| "lg" \| "xl"`	`"md"`	20 / 28 / 36 / 48 / 64 px.
`shape`	`"circle" \| "square"`	`"circle"`	Avatar outline.
`status`	`"" \| "online" \| "away" \| "busy" \| "offline"`	`""`	Status dot in the bottom-right corner.
`ring`	`boolean`	`false`	Render a 2px ring around the avatar (matches the surface for cluster contrast).

CSS variables

Variable	Default	Description
`--tc-avatar-bg`	`var(--tc-color-rule, #ece5d3)`	Initials background fallback.
`--tc-avatar-fg`	`var(--tc-color-ink, #14171f)`	Initials text color.
`--tc-avatar-ring`	`var(--tc-color-surface, #ffffff)`	Ring and status-dot border.
`--tc-avatar-status-online`	`#2f7a52`	Online dot color.
`--tc-avatar-status-away`	`#d7a52f`	Away dot color.
`--tc-avatar-status-busy`	`#b3261e`	Busy dot color.
`--tc-avatar-status-offline`	`#9aa0a6`	Offline dot color.

Examples

Image avatars

<tc-avatar src="/avatars/mia.jpg" name="Mia Carter"></tc-avatar> <tc-avatar src="/avatars/jamal.jpg" name="Jamal Reed" size="lg"></tc-avatar>

Initials fallback

When there's no src, the avatar shows initials derived from name. The background tint is deterministic — Mia is always blue, Jamal is always brown.

<tc-avatar name="Mia Carter"></tc-avatar> <tc-avatar name="Jamal Reed"></tc-avatar>

Sizes

<tc-avatar size="xs"></tc-avatar> <tc-avatar size="sm"></tc-avatar> <tc-avatar size="md"></tc-avatar> <tc-avatar size="lg"></tc-avatar> <tc-avatar size="xl"></tc-avatar>

Shape

<tc-avatar name="Mia Carter" shape="circle"></tc-avatar> <tc-avatar name="Acme Co" shape="square"></tc-avatar>

Status

<tc-avatar name="Mia" status="online"></tc-avatar> <tc-avatar name="Jamal" status="away"></tc-avatar> <tc-avatar name="Aiko" status="busy"></tc-avatar> <tc-avatar name="Sven" status="offline"></tc-avatar>

Ring

The ring is meant for stacking — see tc-avatar-group. Standalone, it's a subtle highlight.

<tc-avatar name="Mia" ring size="xl"></tc-avatar>

Accessibility

When src is set, the <img> carries alt (falls back to name, then to "avatar").
Initials are exposed as text inside the fallback element with aria-label so screen readers announce the name, not just the letters.
The status dot has aria-label describing the state. Pair with surrounding text for richer context.

Theming

<tc-avatar name="VIP" ring style=" --tc-avatar-bg: #14171f; --tc-avatar-fg: #ffc857; --tc-avatar-ring: #ffc857; " ></tc-avatar>

← All components