Avatar Group

A collection of avatars representing a group of users.

MRMSAC

import { Avatar } from "@smartacteam/ambient-web/avatar";
import { AvatarGroup } from "@smartacteam/ambient-web/avatar-group";

export function AvatarGroupDemo() {
  return (
    <AvatarGroup>
      <Avatar.Root>
        <Avatar.Image
          src="https://github.com/mrobillard7.png"
          alt="@mrobillard7"
        />
        <Avatar.Fallback>MR</Avatar.Fallback>
      </Avatar.Root>
      <Avatar.Root>
        <Avatar.Image
          src="https://github.com/ilikescience.png"
          alt="@ilikescience"
        />
        <Avatar.Fallback>MS</Avatar.Fallback>
      </Avatar.Root>
      <Avatar.Root>
        <Avatar.Image src="https://github.com/andrescv.png" alt="@andrescv" />
        <Avatar.Fallback>AC</Avatar.Fallback>
      </Avatar.Root>
    </AvatarGroup>
  );
}

Usage

import { AvatarGroup } from "@smartacteam/ambient-web/avatar-group";

<AvatarGroup>
  <Avatar.Root>
    <Avatar.Image src="https://github.com/mrobillard7.png" alt="@mrobillard7" />
    <Avatar.Fallback>MR</Avatar.Fallback>
  </Avatar.Root>
  <Avatar.Root>
    <Avatar.Image
      src="https://github.com/ilikescience.png"
      alt="@ilikescience"
    />
    <Avatar.Fallback>MS</Avatar.Fallback>
  </Avatar.Root>
  <Avatar.Root>
    <Avatar.Image src="https://github.com/andrescv.png" alt="@andrescv" />
    <Avatar.Fallback>AC</Avatar.Fallback>
  </Avatar.Root>
</AvatarGroup>