AvatarGroup

Displays a group of avatars with optional overlap

pnpm
aube
bun
npm
yarn
pnpm add jsx-email

Usage

AvatarGroup arranges Avatar children in a row.

import { Avatar, AvatarGroup } from 'jsx-email';

const Email = () => {
  return (
    <AvatarGroup>
      <Avatar name="Bruce Wayne" />
      <Avatar name="Selina Kyle" />
      <Avatar name="Clark Kent" />
    </AvatarGroup>
  );
};

Use overlap only when needed:

import { Avatar, AvatarGroup } from 'jsx-email';

const Email = () => {
  return (
    <AvatarGroup overlap={true} spacing={10}>
      <Avatar name="Bruce Wayne" />
      <Avatar name="Selina Kyle" />
      <Avatar name="Clark Kent" />
    </AvatarGroup>
  );
};

Truncate long groups with a +N overflow token:

import { Avatar, AvatarGroup } from 'jsx-email';

const Email = () => {
  return (
    <AvatarGroup max={3}>
      <Avatar name="Bruce Wayne" />
      <Avatar name="Selina Kyle" />
      <Avatar name="Clark Kent" />
      <Avatar name="Diana Prince" />
    </AvatarGroup>
  );
};

Render in reverse order for right-to-left layouts:

import { Avatar, AvatarGroup } from 'jsx-email';

const Email = () => {
  return (
    <AvatarGroup direction="rtl">
      <Avatar name="Bruce Wayne" />
      <Avatar name="Selina Kyle" />
      <Avatar name="Clark Kent" />
    </AvatarGroup>
  );
};

Component Props

direction?: 'ltr' | 'rtl';

Controls group rendering order. Defaults to "ltr".

max?: number;

Maximum number of avatars to render before appending an overflow token (for example, +2).

overlap?: boolean;

If true, overlaps avatars. Defaults to false for compatibility-safe rendering.

spacing?: number;

Spacing in pixels between avatars. Defaults to 8.

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.

Caveats

Tips

This component also expresses all of the Common Component Props for ComponentProps<'table'>, except cellPadding and cellSpacing.