Avatar

An image element with a fallback for representing the user.

MRMS

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

export function AvatarDemo() {
  return (
    <div className="flex flex-row flex-wrap items-center gap-12">
      <Avatar.Root>
        <Avatar.Image
          src="https://github.com/mrobillard7.png"
          width={48}
          height={48}
          alt="@mrobillard7"
        />
        <Avatar.Fallback>MR</Avatar.Fallback>
      </Avatar.Root>
      <Avatar.Root className="rounded-lg">
        <Avatar.Image
          src="https://github.com/ilikescience.png"
          alt="@ilikescience"
          width={48}
          height={48}
        />
        <Avatar.Fallback>MS</Avatar.Fallback>
      </Avatar.Root>
    </div>
  );
}

Usage

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

<Avatar.Root>
  <Avatar.Image src="https://github.com/mrobillard7.png" />
  <Avatar.Fallback>MR</Avatar.Fallback>
</Avatar.Root>