Skip to main content
⚠️ AppKit is in an early development phase and is subject to change without notice. DO NOT use in production environments.

# Avatar

Displays user profile picture or initials in a circular container

## Example​

    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​

Displays user profile picture or initials in a circular container

Source: `packages/appkit-ui/src/react/ui/avatar.tsx`

### Props​

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

### Usage​

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

    <Avatar /* props */ />

## AvatarFallback​

Fallback content displayed when avatar image fails to load

Source: `packages/appkit-ui/src/react/ui/avatar.tsx`

### Props​

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

### Usage​

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

    <AvatarFallback /* props */ />

## AvatarImage​

Image element for the avatar

Source: `packages/appkit-ui/src/react/ui/avatar.tsx`

### Props​

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

### Usage​

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

    <AvatarImage /* props */ />