---
title: "Avatar"
description: "Avatar with sizes and variants"
source: "Equality"
---
import {
  AvatarDemo,
  AvatarSizesDemo,
  AvatarShapeDemo,
} from "@demo/components/demo/avatar";

## Overview

Avatars represent a user or entity with a profile image and initials fallback.

## Usage

Import the component:

```ts
import { Avatar, AvatarImage, AvatarFallback } from "@eqtylab/equality";
```

Basic usage with an image and fallback:

```tsx
<Avatar>
  <AvatarImage src="/path/to/image.jpg" alt="User name" />
  <AvatarFallback>AB</AvatarFallback>
</Avatar>
```

## Variants

### Image

When a valid `src` is provided to `AvatarImage`, the avatar displays the image.

<AvatarDemo client:only="react" />

### Fallback

When no image is provided or the image fails to load, `AvatarFallback` is displayed instead, typically showing initials.

<AvatarDemo client:only="react" variant="fallback" />

## Sizes

The `size` prop controls the dimensions of the avatar.

<AvatarSizesDemo client:only="react" />

```tsx
<Avatar size="sm">...</Avatar>
<Avatar size="md">...</Avatar>
<Avatar size="lg">...</Avatar>
<Avatar size="xl">...</Avatar>
```

## Shape

The `shape` prop controls the border radius of the avatar.

### Circle (Default)

<AvatarShapeDemo client:only="react" shape="circle" />

### Square

<AvatarShapeDemo client:only="react" shape="square" />

```tsx
<Avatar shape="circle">...</Avatar>
<Avatar shape="square">...</Avatar>
```

## Slots

| Name       | Description                                            |
| ---------- | ------------------------------------------------------ |
| `children` | Accepts `AvatarImage` and `AvatarFallback` as children |

## Props

### Avatar

| Name    | Description             | Type                   | Default  | Required |
| ------- | ----------------------- | ---------------------- | -------- | -------- |
| `size`  | The size of the avatar  | `sm`, `md`, `lg`, `xl` | `md`     | ❌       |
| `shape` | The shape of the avatar | `circle`, `square`     | `circle` | ❌       |

### AvatarImage

| Name  | Description                   | Type     | Default | Required |
| ----- | ----------------------------- | -------- | ------- | -------- |
| `src` | The image source URL          | `string` | -       | ❌       |
| `alt` | Accessible alt text for image | `string` | -       | ❌       |

### AvatarFallback

No properties, but needs child content to render.