> Native Solid 2 fork. Original documentation and designs © WorkOS; historical posts retain their original context.

# Avatar

An image element with a fallback for representing the user.

## Features

- Automatic and manual control over when the image renders.

- Fallback part accepts any children.

- Optionally delay fallback rendering to avoid content flashing.

## Anatomy

Import all parts and piece them together.

```jsx
import { Avatar } from "@radix-solid/primitives";

export default () => <Avatar.Root>

		<Avatar.Image />

		<Avatar.Fallback />

	</Avatar.Root>;
```

## API Reference

### Root

Contains all the parts of an avatar.

| Prop                                                                                                                                                                    | Type      | Default |
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ------- |
| `asChild`Render through a single-target factory, merging props and behavior with the chosen host. Read our [Composition](../guides/composition) guide for more details. | `boolean` | `false` |

### Image

The image to render. By default it will only render when it has loaded. You can use the `onLoadingStatusChange` handler if you need more control.

| Prop                                                                                                                                                                                             | Type       | Default |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------- | ------- |
| `asChild`Render through a single-target factory, merging props and behavior with the chosen host. Read our [Composition](../guides/composition) guide for more details.                          | `boolean`  | `false` |
| `onLoadingStatusChange`A callback providing information about the loading status of the image. This is useful in case you want to control more precisely what to render as the image is loading. | `function` | —       |

### Fallback

An element that renders when the image hasn't loaded. This means whilst it's loading, or if there was an error. If you notice a flash during loading, you can provide a `delayMs` prop to delay its rendering so it only renders for those with slower connections. For more control, use the `onLoadingStatusChange` handler on `Avatar.Image`.

| Prop                                                                                                                                                                    | Type      | Default |
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ------- |
| `asChild`Render through a single-target factory, merging props and behavior with the chosen host. Read our [Composition](../guides/composition) guide for more details. | `boolean` | `false` |
| `delayMs`Useful for delaying rendering so it only appears for those with slower connections.                                                                            | `number`  | —       |

## Examples

### Clickable Avatar with tooltip

You can compose the Avatar with a [Tooltip](/primitives/docs/components/tooltip) to display extra information.

```jsx
import { Avatar, Tooltip } from "@radix-solid/primitives";

export default () => <Tooltip.Root>

		<Tooltip.Trigger>

			<Avatar.Root>…</Avatar.Root>

		</Tooltip.Trigger>



		<Tooltip.Content side="top">

			Tooltip content

			<Tooltip.Arrow />

		</Tooltip.Content>

	</Tooltip.Root>;
```