Avatar

The Avatar component renders a circular identity badge for a person or an assistant. It resolves its content through a fallback chain: an image when $src is set, otherwise initials derived from $name, otherwise an icon.

Initials are the first letters of the first two words of $name, uppercased: "Ada Lovelace" becomes "AL", "cherry" becomes "C".

import React from "react";
import { Avatar } from "cherry-styled-components";

export default function Page() {
  return (
    <>
      <Avatar $src="/ada.jpg" $alt="Ada Lovelace" />
      <Avatar $name="Ada Lovelace" />
      <Avatar $icon="Bot" $alt="Assistant" $color="tertiary" />
    </>
  );
}

In the chat kit, pass it to a message's $avatar slot to attribute the bubble to its author.

Properties

$size"small" | "default" | "big"

Diameter of the badge: 28px, 36px, or 48px. Defaults to "default". The font size of the initials and the size of the fallback icon scale with it.

$srcstring

Image URL. The image covers the circle with object-fit: cover.

$altstring

Alt text for the image, and the accessible label when the icon fallback renders. Falls back to $name.

$namestring

Full name or label. Shown as initials when there is no image.

$iconIconProps

Lucide icon name used when there is no image and no name. Defaults to "User".

$color"primary" | "secondary" | "tertiary" | "gray"

Background color, read from the theme (gray uses colors.grayDark). Defaults to "primary". The initials and icon take the palette's contrasting end automatically, in both light and dark mode.

Accessibility is handled by the fallback chain: an image carries its own alt, initials are visible text, and the icon fallback gets role="img" with an aria-label from $alt or $name.

The component also accepts all native <span> attributes and forwards its ref to the root element. The library exports the types AvatarSize and AvatarColor.

View Source