Avatar

Avatar

The Avatar component is used to represent a user or entity with an image. It supports custom images, colors, rounded styles, and image slot customization.

import Avatar from "rocksolidjs/Avatar";

export default function Example() {
  return <Avatar src="https://i.pravatar.cc/100?img=9" />;
}

Examples

Letters

Use text content inside the Avatar to display initials or letters when a profile image is not available.

import Avatar from "rocksolidjs/Avatar";

export default function Example() {
  return (
    <div class="flex gap-4">
      <Avatar>John Doe</Avatar>
      <Avatar>D</Avatar>
      <Avatar>MJ</Avatar>
    </div>
  );
}

Image

Use the src prop to display an image inside the Avatar.

import Avatar from "rocksolidjs/Avatar";

export default function Example() {
  return (
    <Avatar
      src="https://i.pravatar.cc/150?img=12"
      alt="User avatar"
    />
  );
}

Rounded

Use the rounded prop to control the shape of the Avatar.

import Avatar from "rocksolidjs/Avatar";

export default function Example() {
  return (
    <div class="flex gap-4">
      <Avatar
        src="https://i.pravatar.cc/150?img=2"
        alt="Small avatar"
        rounded="small"
      />
      <Avatar
        src="https://i.pravatar.cc/150?img=2"
        alt="No rounding"
        rounded="none"
      />
      <Avatar
        src="https://i.pravatar.cc/150?img=2"
        alt="Medium avatar"
        rounded="medium"
      />
      <Avatar
        src="https://i.pravatar.cc/150?img=2"
        alt="Large avatar"
        rounded="large"
      />
      <Avatar
        src="https://i.pravatar.cc/150?img=2"
        alt="Fully rounded avatar"
        rounded="full"
      />
    </div>
  );
}

Colors

Use the color prop to customize the Avatar color.

import Avatar from "rocksolidjs/Avatar";

export default function Example() {
  return (
    <div class="w-full flex justify-center gap-4">
      <Avatar color="default">D</Avatar>
      <Avatar color="success">D</Avatar>
      <Avatar color="warning">D</Avatar>
      <Avatar color="error">D</Avatar>
      <Avatar color="info">D</Avatar>
    </div>
  );
}

Sizes

Use the size prop to customize the size of the Avatar.

import Avatar from "rocksolidjs/Avatar";

export default function Example() {
  return (
    <div class="flex items-center gap-4">
      <Avatar src="https://i.pravatar.cc/150?img=5" size="small" />
      <Avatar src="https://i.pravatar.cc/150?img=5" size="medium" />
      <Avatar src="https://i.pravatar.cc/150?img=5" size="large" />
    </div>
  );
}

Customization

Use the class prop and slotProps to customize the Avatar and its image.

import Avatar from "rocksolidjs/Avatar";

export default function Example() {
  return (
    <Avatar
      src="https://i.pravatar.cc/150?img=12"
      alt="User avatar"
      class="size-12 border border-2 border-blue-500"
      slotProps={{
        img: {
          loading: "lazy",
        },
      }}
    />
  );
}

Accessibility

  • Provide an alt value that describes the avatar image when the image conveys meaningful information.
  • Use an empty alt value when the avatar image is purely decorative.
  • Do not rely on color alone to communicate information.

API

Avatar

The Avatar component supports images, colors, rounded styles, custom elements, and image slot customization.

Prop Type Required Default Description
alt string No — Alternative text for the avatar image.
as string No "div" Specifies the HTML element used to render the Avatar.
class string No — Custom CSS class applied to the Avatar.
children string No — Text content used to generate the avatar initials.
color "default" | "success" | "warning" | "info" | "error" No "default" Controls the color of the Avatar.
rounded "small" | "none" | "medium" | "large" | "full" No "full" Controls the border radius of the Avatar.
size "small" | "medium" | "large" No "medium" The size of the Avatar.
slotProps { img?: object } No — Provides props for customizing the Avatar’s image slot.
  • img — Props for the image slot.
src string No — Source URL of the avatar image.
  • Badge — Use Badge to display a status, notification, or count alongside an avatar.