Avatar

A circular image component for representing users or entities. Renders an image when a src is provided, or an empty placeholder when omitted.

import { Avatar } from "@tenstorrent/vesper/avatar";

export default function AvatarDemo() {
  return (
    <Avatar
      size="lg"
      src="https://api.dicebear.com/10.x/initial-face/svg?seed=jane-doe"
      alt="User avatar"
    />
  );
}

Options

Prop	Type	Description	Default
`size`	`"sm" \| "md" \| "lg"`	The size of the avatar.	`"md"`
`src`	`string`	The image source URL. When not provided, renders as an empty placeholder.	—
`alt`	`string`	The alt text for the avatar image.	`""`
`as`	`ElementType`	The root element type for polymorphic rendering.	`"div"`

Examples

Basic usage

By default, an Avatar will render at md size if the size prop is not specified:

import { Avatar } from "@tenstorrent/vesper/avatar";

export default function BasicAvatar() {
  return (
    <Avatar
      src="https://api.dicebear.com/10.x/initial-face/svg?seed=simon"
      alt="Simon"
    />
  );
}

Sizes

An Avatar can be rendered in one of three sizes: sm, md, and lg:

import { Avatar } from "@tenstorrent/vesper/avatar";

export default function AvatarSizes() {
  return (
    <div
      style={{
        display: "flex",
        alignItems: "center",
        gap: "var(--vesper-spacing-2)",
      }}
    >
      <Avatar
        src="https://api.dicebear.com/10.x/initial-face/svg?seed=simon"
        alt="Simon"
        size="sm"
      />
      <Avatar
        src="https://api.dicebear.com/10.x/initial-face/svg?seed=mackenzie"
        alt="Mackenzie"
        size="md"
      />
      <Avatar
        src="https://api.dicebear.com/10.x/initial-face/svg?seed=neesh"
        alt="Neesh"
        size="lg"
      />
    </div>
  );
}

Placeholder (no image)

Rendering an Avatar with no src prop will show an empty circle with a placeholder fill color:

import { Avatar } from "@tenstorrent/vesper/avatar";

export default function PlaceholderAvatar() {
  return <Avatar />;
}

Polymorphic usage

You can use the as prop to specify what underlying element to render. In this case, we are passing as="a" to render the Avatar as an anchor link. This is helpful for apps where clicking on an avatar may navigate to a user profile, for example:

import { Avatar } from "@tenstorrent/vesper/avatar";

export default function AvatarAsLink() {
  return (
    <Avatar
      as="a"
      href="#polymorphic-usage"
      src="https://api.dicebear.com/10.x/initial-face/svg?seed=jane-doe"
      alt="Jane Doe"
      size="lg"
    />
  );
}