Avatar 10.18.1

ARIA

RTL

The Avatar component is typically used to display images, icons, or initials representing people or other entities.

Default

The component can be used by default to display icons out-of-the-box. Just pass them as direct children of the <Avatar /> component.

"use client";

import { Avatar } from "@heathmont/moon-core-tw";
import { GenericUser } from "@heathmont/moon-icons-tw";

const AvatarDefault = () => (
  <Avatar className="border border-beerus">
    <GenericUser className="text-moon-24" />
  </Avatar>
);

export default AvatarDefault;

Different content type support

The <Avatar /> component is versatile and can be used in various different scenarios. It supports an icon, text(e.g., the user full name's initials), or an image by providing the URL through the imageUrl prop.

"use client";

import { Avatar } from "@heathmont/moon-core-tw";
import { GenericUser } from "@heathmont/moon-icons-tw";
import image from "../avatar_example.jpeg";

const Variants = () => (
  <>
    <Avatar className="border-beerus border">
      <GenericUser className="text-moon-24" />
    </Avatar>
    <Avatar className="border-beerus border">md</Avatar>
    <Avatar imageUrl={image.src} />
  </>
);

export default Variants;

Different sizes

The component <Avatar /> supports various sizes using the size prop, allowing seamless integration with your custom layout.

2xl

"use client";

import { Avatar } from "@heathmont/moon-core-tw";
import { GenericUser } from "@heathmont/moon-icons-tw";
import image from "../avatar_example.jpeg";

const sharedProps = {
  className: "border border-beerus",
};

const Example = () => (
  <>
    <div className="flex flex-wrap items-center justify-around gap-2 w-full">
      <Avatar {...sharedProps} size="xs">
        <GenericUser className="text-moon-16" />
      </Avatar>
      <Avatar {...sharedProps} size="sm">
        <GenericUser className="text-moon-24" />
      </Avatar>
      <Avatar {...sharedProps}>
        <GenericUser className="text-moon-24" />
      </Avatar>
      <Avatar {...sharedProps} size="lg">
        <GenericUser className="text-moon-24" />
      </Avatar>
      <Avatar {...sharedProps} size="xl">
        <GenericUser className="text-moon-24" />
      </Avatar>
      <Avatar {...sharedProps} size="2xl">
        <GenericUser className="text-moon-32" />
      </Avatar>
    </div>
    <div className="flex flex-wrap items-center justify-around gap-2 w-full">
      <Avatar {...sharedProps} size="xs">
        xs
      </Avatar>
      <Avatar {...sharedProps} size="sm">
        sm
      </Avatar>
      <Avatar {...sharedProps}>md</Avatar>
      <Avatar {...sharedProps} size="lg">
        lg
      </Avatar>
      <Avatar {...sharedProps} size="xl">
        xl
      </Avatar>
      <Avatar {...sharedProps} size="2xl">
        2xl
      </Avatar>
    </div>
    <div className="flex flex-wrap items-center justify-around gap-2 w-full">
      <Avatar imageUrl={image.src} size="xs" />
      <Avatar imageUrl={image.src} size="sm" />
      <Avatar imageUrl={image.src} />
      <Avatar imageUrl={image.src} size="lg" />
      <Avatar imageUrl={image.src} size="xl" />
      <Avatar imageUrl={image.src} size="2xl" />
    </div>
  </>
);

export default Example;

Active Status for your Avatar

You can use the component <Avatar.Status /> as a child of the component <Avatar /> to display the status of your user, or the availability of a specific resource.

"use client";

import { Avatar } from "@heathmont/moon-core-tw";
import { GenericUser } from "@heathmont/moon-icons-tw";
import image from "../avatar_example.jpeg";

const sharedProps = {
  className: "border-beerus border",
};

const ActiveStatus = () => (
  <>
    <Avatar {...sharedProps}>
      <GenericUser className="text-moon-24" />
      <Avatar.Status />
    </Avatar>
    <Avatar {...sharedProps}>
      md
      <Avatar.Status className="bg-trunks" />
    </Avatar>
    <Avatar imageUrl={image.src}>
      <Avatar.Status />
    </Avatar>
  </>
);

export default ActiveStatus;

Reposition the Status within the Avatar

<Avatar.Status /> supports flexible positioning. Specify the desired visibility location by using position prop.

"use client";

import { Avatar } from "@heathmont/moon-core-tw";
import { GenericUser } from "@heathmont/moon-icons-tw";

const StatusOrigin = () => (
  <>
    <Avatar className="border border-beerus">
      <GenericUser className="text-moon-24" />
      <Avatar.Status position={{ vertical: "top", horizontal: "right" }} />
    </Avatar>
    <Avatar className="border border-beerus">
      <GenericUser className="text-moon-24" />
      <Avatar.Status position={{ vertical: "top", horizontal: "left" }} />
    </Avatar>
    <Avatar className="border border-beerus">
      <GenericUser className="text-moon-24" />
      <Avatar.Status />
    </Avatar>
    <Avatar className="border border-beerus">
      <GenericUser className="text-moon-24" />
      <Avatar.Status position={{ vertical: "bottom", horizontal: "left" }} />
    </Avatar>
  </>
);

export default StatusOrigin;

Customization

The <Avatar /> component supports any CSS classes, enabling it to be fully customizable in all of its aspects.

"use client";

import { Avatar } from "@heathmont/moon-core-tw";
import { GenericUser } from "@heathmont/moon-icons-tw";

const Customization = () => (
  <>
    <Avatar className="text-chichi border border-beerus">
      <GenericUser className="text-moon-24" />
    </Avatar>
    <Avatar className="bg-piccolo text-goten">
      <GenericUser className="text-moon-24" />
    </Avatar>
    <Avatar className="rounded-full border border-beerus">
      <GenericUser className="text-moon-24" />
    </Avatar>
    <Avatar className="border border-beerus">
      <GenericUser className="text-moon-24" />
      <Avatar.Status className="bg-chichi" />
    </Avatar>
    <Avatar className="border border-beerus">
      <GenericUser className="text-moon-24" />
      <Avatar.Status className="border-chichi" />
    </Avatar>
  </>
);

export default Customization;

Avatar

These are props specific to the Avatar component:

Name	Type	Default
className	string	-
imageUrl	string	-
size	"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "2xl"	md

Avatar.Status

These are props specific to the Avatar.Status component:

Name	Type	Default
className	string	-
position	{ vertical: 'top' \| 'bottom', horizontal: 'left' \| 'right' }	-