# @askrjs/ui/avatar

> Published API exports for @askrjs/ui/avatar.

Source: [https://askrjs.com/docs/reference/api/ui/avatar](https://askrjs.com/docs/reference/api/ui/avatar)

Status: stable. Packages: @askrjs/ui/avatar.

**Published packages are authoritative.** Examples may lag behind a published contract. When guidance differs, verify the exports and TypeScript declarations in your installed package, then file an issue.

## Exports

This entrypoint publishes 14 exports from the declarations shipped by @askrjs/ui.

### `Avatar`

```ts
Avatar: { (props: AvatarProps): JSX.Element; (props: AvatarAsChildProps): JSX.Element; }
```

Renders the `avatar` part of `avatar`.

Supports polymorphic rendering via `asChild`.

### `AVATAR_A11Y_CONTRACT`

```ts
AVATAR_A11Y_CONTRACT: { readonly ROOT: { readonly slot: "data-slot"; readonly marker: "data-avatar"; }; readonly IMAGE: { readonly slot: "data-slot"; readonly marker: "data-avatar-image"; readonly requiresAlt: true; }; readonly FALLBACK: { readonly slot: "data-slot"; readonly marker: "data-avatar-fallback"; readonly visibleBeforeImageLoad: true; }; }
```

Accessibility contract for Avatar primitives.

### `AvatarA11yContract`

```ts
AvatarA11yContract: typeof AVATAR_A11Y_CONTRACT
```

Type of the Avatar A11y Contract object.

### `AvatarAsChildProps`

```ts
AvatarAsChildProps: BoxAsChildProps & AvatarOwnProps
```

Props for the `asChild` (polymorphic) rendering of Avatar.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `id`: id?: string | undefined;

- `ref`: ref?: Ref<Element>;

### `AvatarFallback`

```ts
AvatarFallback: { (props: AvatarFallbackProps): JSX.Element | null; (props: AvatarFallbackAsChildProps): JSX.Element | null; }
```

Renders the `avatar-fallback` part of `avatar`.

Supports polymorphic rendering via `asChild`.

### `AvatarFallbackAsChildProps`

```ts
AvatarFallbackAsChildProps: BoxAsChildProps & AvatarFallbackOwnProps
```

Props for the `asChild` (polymorphic) rendering of Avatar Fallback.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `ref`: ref?: Ref<Element>;

### `AvatarFallbackOwnProps`

```ts
AvatarFallbackOwnProps: {
  children?: unknown;
}
```

Own props for Avatar Fallback, before merging with native element attributes.

- `children`: children?: unknown;

### `AvatarFallbackProps`

```ts
AvatarFallbackProps: BoxProps<'span', HTMLSpanElement> & AvatarFallbackOwnProps
```

Props for Avatar Fallback.

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `ref`: ref?: Ref<HTMLSpanElement>;

### `AvatarImage`

```ts
AvatarImage: (props: AvatarImageProps) => JSX.Element
```

Renders the `avatar-image` part of `avatar`.

### `AvatarImageOwnProps`

```ts
AvatarImageOwnProps: {
  src?: string;
  alt: string;
  onLoadingStatusChange?: (status: AvatarLoadingStatus) => void;
}
```

Own props for Avatar Image, before merging with native element attributes.

- `alt`: alt: string;

- `onLoadingStatusChange`: onLoadingStatusChange?: ((status: AvatarLoadingStatus) => void) | undefined;

- `src`: src?: string | undefined;

### `AvatarImageProps`

```ts
AvatarImageProps: Omit<JSX.IntrinsicElements['img'], 'children' | 'ref' | 'onLoad' | 'onError' | 'alt' | 'src'> & AvatarImageOwnProps & {
  ref?: Ref<HTMLImageElement>;
}
```

Props for Avatar Image.

- `alt`: alt: string;

- `onLoadingStatusChange`: onLoadingStatusChange?: ((status: AvatarLoadingStatus) => void) | undefined;

- `ref`: ref?: Ref<HTMLImageElement>;

- `src`: src?: string | undefined;

### `AvatarLoadingStatus`

```ts
AvatarLoadingStatus: 'idle' | 'loading' | 'loaded' | 'error'
```

Avatar Loading Status.

### `AvatarOwnProps`

```ts
AvatarOwnProps: {
  children?: unknown;
  id?: string;
}
```

Own props for Avatar, before merging with native element attributes.

- `children`: children?: unknown;

- `id`: id?: string | undefined;

### `AvatarProps`

```ts
AvatarProps: BoxProps<'span', HTMLSpanElement> & AvatarOwnProps
```

Props for Avatar.

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `id`: id?: string | undefined;

- `ref`: ref?: Ref<HTMLSpanElement>;

## Documentation navigation

[Previous](https://askrjs.com/docs/reference/api/ui/root/index.md) | [Next](https://askrjs.com/docs/reference/api/ui/button/index.md)