Avatar

Implemented

Circular user avatar with initials fallback and optional image. Sizes: sm (32px), md (40px), lg (56px), xl (80px).

Categoryatoms

Sourcepatterns/atoms/avatar.html

AI HintIdentity thumbnail: renders the photo when src loads and falls back to computed initials (1-2 chars) on error or absence. Sizes sm/md/lg/xl; accessible name via aria-label (role img).

User avatar with initials fallback.

Avatar

Display atom (Family 2 — Tier 1)

Renders a circular avatar. Pass src to show an image, otherwise the component computes initials from name (or uses the initials prop directly). When neither is provided, a single question mark is shown.

This component supports light and dark mode.

Usage

import { Avatar } from '@epasslive/design-system'

<Avatar name="Marie Bouchard" size="md" aria-label="Marie Bouchard" />

// Brand avatar with explicit initials
<Avatar name="Maison 4:3" initials="M4" size="lg" />

// Dashboard row avatar
<Avatar name="Sophie Laurin" size="sm" />

D-HOME-P4b changelog (2026-08-11)

Changed text-ep-text-inverse → text-ep-text-heading on the root span
Reason: dark text on the bg-ep-surface-card surface passes WCAG AA; white text on it would be invisible.

Accessibility

The root element is a div[role="img"]. The accessible label follows a fallback chain: an explicit aria-label prop, then "Avatar of {name}" when a name is provided, then "Avatar" for the empty state. The initials span is aria-hidden="true", so the initials themselves are never announced. The text color (--ep-text-heading on --ep-surface-card) passes WCAG AA in both light and dark themes.

Props

Prop

Type

Default

Description

src

string

—

Image URL. Falls back to initials on load failure. A prop change to a new URL after an error retries the image (not stuck on initials).

name

string

—

Display name used to derive initials when src is unavailable. 2+ words → first+last initial (e.g. "Oscar Nunez" → "ON"); single word → first 2 chars; empty → "?".

initials

string

—

Override for the computed initials (e.g. "MB" for "Maison 4:3").

size

'sm' | 'md' | 'lg' | 'xl'

md

Visual size token. sm=32px, md=40px, lg=56px, xl=80px.

className

string

—

Additional classes appended to the root.

aria-label

string

—

Accessible label describing the avatar (e.g. "Photo de Marie Bouchard"). Falls back to "Avatar of {name}" when a name is given, or "Avatar" in the empty state.

Props

Preview

Avatar

Prop

Type

Required

Default

Description

src

string

Optional

—

Image source URL. Falls back to initials when missing or on error.

name

string

Optional

—

Display name used to compute initials when src is unavailable.

initials

string

Optional

—

Pre-computed initials (overrides name-based computation), e.g. 'ON', 'MR'

size

'sm' | 'md' | 'lg' | 'xl'

Optional

'md'

sm=32px, md=40px, lg=56px, xl=80px

className

string

Optional

—

Additional CSS classes.

aria-label

string

Optional

—

Accessible label describing the avatar content.

Quick use:<Avatar />

Accessibility

ARIA roleimg

Usage

Import

tsxSnippet

import { Avatar } from "@epasslive/design-system"

Example 1

tsxSnippet

<Avatar initials="JD" size="md" />

Example 2

tsxSnippet

<Avatar name="Oscar Nunez" size="lg" />

Anti-patterns

— Do not compose atoms directly — use molecules instead

— Avoid inline styles on atoms