Avatar

The Avatar component is a customizable UI element for displaying profile images in React and Next.js applications. It supports dynamic image sources, sizes, alt text, and styling.

Learn how to implement and extend it with AvatarButton for interactive user profiles.

Avatar preview

1. Quick setup

Create Avatar.tsx file in /components/common folder

jsx
import * as Headless from "@headlessui/react";
import clsx from "clsx";
import Image from "next/image";
import Link from "next/link";
import React from "react";

type AvatarProps = {
  status?: keyof typeof states | null;
  size?: keyof typeof sizes;
  square?: boolean;
  href?: string;
  onClick?: () => void;
};

const states = {
  busy: "bg-red-400",
  available: "bg-green-400",
  default: "bg-gray-300",
};

const sizes = {
  small: 32,
  medium: 40,
  large: 48,
};

const ringSizes = {
  small: "size-2",
  medium: "size-2.5",
  large: "size-3",
};

const AvatarInner = ({ status = null, size = "medium", square = false }: AvatarProps) => {
  return (
    <span className="relative inline-block">
      <Image
        className={clsx(square ? "rounded-md" : "rounded-full")}
        src="/images/avatar.png"
        alt="avatar"
        width={sizes[size]}
        height={sizes[size]}
      />
      {status && (
        <span
          className={clsx(
            "absolute bottom-0 right-0 block size-2 rounded-full ring-2 ring-white",
            states[status],
            ringSizes[size],
          )}
        ></span>
      )}
    </span>
  );
};

const Avatar = ({ href, onClick, ...props }: AvatarProps) => {
  if (href)
    return (
      <Link href={href}>
        <AvatarInner {...props} />
      </Link>
    );

  if (onClick) {
    return (
      <Headless.Button onClick={onClick}>
        <AvatarInner {...props} />
      </Headless.Button>
    );
  }

  return <AvatarInner {...props} />;
};

export default Avatar;

2. Usages

2.1 Sizes

jsx
<Avatar size="small" />
<Avatar size="medium" />
<Avatar size="large" />

2.2 Status

jsx
<Avatar status="default" />
<Avatar status="busy" />
<Avatar status="available" />

2.3 Square

jsx
<Avatar size="small" status="default" square />
<Avatar size="medium" status="busy" square />
<Avatar size="large" status="available" square />

2.4 Avatar as button

You can add the handle click event on the avatar. You can test for click the avatar button below

jsx
<Avatar
  size="medium"
  status="available"
  onClick={() => alert("You have clicked on avatar button")}
/>

2.5 Avatar as link (can navigate)

You can add the href prop to navigate user as the link. If you click on the avatar below, you will be redirect to the "/component" page

jsx
<Avatar size="medium" status="available" href="/components" />