# Avatar

Displays user profile picture or initials in a circular container

## Example[​](#example "Direct link to Example")

<!-- -->

```tsx
import {
  Avatar,
  AvatarFallback,
  AvatarImage,
} from "@databricks/appkit-ui/react"

export default function AvatarExample() {
  return (
    <Avatar>
      <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
      <AvatarFallback>CN</AvatarFallback>
    </Avatar>
  )
}

```

## Avatar[​](#avatar-1 "Direct link to Avatar")

Displays user profile picture or initials in a circular container

**Source:** [`packages/appkit-ui/src/react/ui/avatar.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/avatar.tsx)

### Props[​](#props "Direct link to Props")

| Prop      | Type      | Required | Default | Description |
| --------- | --------- | -------- | ------- | ----------- |
| `asChild` | `boolean` |          | -       | -           |

### Usage[​](#usage "Direct link to Usage")

```tsx
import { Avatar } from '@databricks/appkit-ui';

<Avatar /* props */ />

```

## AvatarFallback[​](#avatarfallback "Direct link to AvatarFallback")

Fallback content displayed when avatar image fails to load

**Source:** [`packages/appkit-ui/src/react/ui/avatar.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/avatar.tsx)

### Props[​](#props-1 "Direct link to Props")

| Prop      | Type      | Required | Default | Description |
| --------- | --------- | -------- | ------- | ----------- |
| `delayMs` | `number`  |          | -       | -           |
| `asChild` | `boolean` |          | -       | -           |

### Usage[​](#usage-1 "Direct link to Usage")

```tsx
import { AvatarFallback } from '@databricks/appkit-ui';

<AvatarFallback /* props */ />

```

## AvatarImage[​](#avatarimage "Direct link to AvatarImage")

Image element for the avatar

**Source:** [`packages/appkit-ui/src/react/ui/avatar.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/avatar.tsx)

### Props[​](#props-2 "Direct link to Props")

| Prop                    | Type                                     | Required | Default | Description |
| ----------------------- | ---------------------------------------- | -------- | ------- | ----------- |
| `onLoadingStatusChange` | `((status: ImageLoadingStatus) => void)` |          | -       | -           |
| `asChild`               | `boolean`                                |          | -       | -           |

### Usage[​](#usage-2 "Direct link to Usage")

```tsx
import { AvatarImage } from '@databricks/appkit-ui';

<AvatarImage /* props */ />

```