---
title: Avatar
airtableId: reciflFrJo5cVgGrS
---
import { Avatar } from "@calcom/ui/components/avatar"
import { RenderComponentWithSnippet } from "@/app/components/render"
import { Row } from "@/app/components/row"
import { SizesExample } from "./avatar.sizes"
import { ImageExample } from "./avatar.image"
import { TooltipExample } from "./avatar.tooltip"
import { LinkExample } from "./avatar.link"
import { IndicatorExample } from "./avatar.indicator"
import { ShapeExample } from "./avatar.shape"

## Size Variations

Avatars come in different sizes to suit various use cases.

<SizesExample/>

## Shape Variations

Avatars can be displayed in either circular or square shapes.

<ShapeExample/>

## With and Without Image

Avatars can display either an image or a fallback placeholder.

<ImageExample/>

## With Tooltip

Avatars can show additional information on hover using tooltips.

<TooltipExample/>

## With Link

Avatars can be made clickable by providing an href.

<LinkExample/>

## With Indicator

Avatars can include status indicators or badges.

<IndicatorExample/>

## Usage Example

Here's a complete example showing how to use the Avatar component with all its props:

```tsx
import { Avatar } from "@calcom/ui/components/avatar";

function Example() {
  return (
    <div className="flex flex-col gap-4">
      {/* Basic Avatar */}
      <Avatar
        alt="User Name"
        title="User Name"
        size="md"
        shape="circle"
        imageSrc="https://example.com/avatar.jpg"
      />

      {/* Avatar with Link */}
      <Avatar
        alt="User Name"
        title="User Name"
        size="lg"
        shape="square"
        imageSrc="https://example.com/avatar.jpg"
        href="/profile"
      />

      {/* Avatar with Tooltip and Indicator */}
      <Avatar
        alt="User Name"
        title="User Name"
        size="md"
        shape="circle"
        imageSrc="https://example.com/avatar.jpg"
        indicator={<div className="absolute bottom-0 right-0 h-3 w-3 rounded-full bg-green-500" />}
      />

      {/* Avatar with Fallback */}
      <Avatar
        alt="User Name"
        title="User Name"
        size="md"
        shape="circle"
        fallback={<span>UN</span>}
      />
    </div>
  );
}
```