Avatar

Displays a profile avatar with image and fallback support

pnpm add jsx-email

aube add jsx-email

bun add jsx-email

npm add jsx-email

yarn add jsx-email

Usage

Use Avatar for profile images. If src is missing, it renders fallback text.

import { Avatar } from 'jsx-email';

const Email = () => {
  return (
    <Avatar
      src="https://assets.example.com/users/bruce.jpg"
      name="Bruce Wayne"
      width={48}
      height={48}
    />
  );
};

Fallback-only example:

import { Avatar } from 'jsx-email';

const Email = () => {
  return <Avatar name="Bruce Wayne" />;
};

Image Fallbacks

• Visible fallback text uses this order:
  1. trimmed fallback
  2. derived initials from name
  3. literal "?"
• Non-decorative fallback avatars (decorative={false}) use this accessible label order:
  1. trimmed alt
  2. name
  3. resolved visible fallback text
• Decorative fallback avatars (decorative={true}) render with role="presentation" and aria-hidden="true".

Component Props

src?: string;

Path or URL for the avatar image.

alt?: string;

Accessible alt text for image avatars. If omitted, the component derives text from name or fallback.

name?: string;

A readable label used for alt derivation and fallback initials.

fallback?: string;

Fallback text used when src is not provided.

decorative?: boolean;

Marks the avatar as decorative. Decorative avatars use presentational accessibility attributes.

disableDefaultStyle?: boolean;

If true, instructs the component not to add default style properties to the component. This can be useful when attempting to override default styles with Tailwind or class names.

width?: string | number;

Avatar width. Defaults to 40 when no explicit size is provided.

height?: string | number;

Avatar height. Defaults to 40 when no explicit size is provided.

Caveats

• Default avatar images use object-fit: cover to maintain rounded presentation.
• Some email clients may not fully support object-fit, so source images may appear stretched or letterboxed.
• For the most consistent results, provide pre-cropped square images and explicit width/height.