# Avatar

Represent a person with an image or initials.

## How to use it

Provide alternative text for AvatarImage and an AvatarFallback while an image loads or is unavailable.



## Import


```tsx
import { Avatar, AvatarImage, AvatarFallback } from "@kivora/nextjs";
```


Examples run in a Client Component. Also import the hooks, icons and dependencies used. This is the web API; consult the native guide for React Native.

## Example


```tsx
<Avatar><AvatarFallback>SM</AvatarFallback></Avatar>
```


## Team

```tsx
<div style={{ display: "flex", alignItems: "center", gap: 12, flexWrap: "wrap" }}>
  {["SM", "LG", "EW"].map(name => <Avatar key={name}><AvatarFallback>{name}</AvatarFallback></Avatar>)}
</div>
```


## API: Avatar


```typescript
Avatar: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>
```


| Property | Type | Required | Description |
| --- | --- | --- | --- |
| aria-label | string | No | Accessible name of the control. |
| asChild | boolean | No | Apply props and behavior to a single compatible child element. |
| children | ReactNode | No | Content or child elements of the component. |
| className | string | No | Additional CSS classes to customize the element. |
| defaultChecked | boolean | No | Initial selection of the control. |
| defaultValue | string \| number \| readonly string[] | No | Initial value when the component manages its own state. |
| id | string | No | Element identifier; associates labels and descriptions. |
| onChange | ChangeEventHandler<HTMLSpanElement, Element> | No | Change event. Check the type: some controls return an object, others a DOM event. |
| onClick | MouseEventHandler<HTMLSpanElement> | No | Action performed when the element is activated. |
| onSubmit | SubmitEventHandler<HTMLSpanElement> | No | Form submission event. |
| role | AriaRole | No | Semantic role of the element. Keep the default role unless a change is justified. |
| style | CSSProperties | No | React inline styles. |
| tabIndex | number | No | Keyboard focus order and availability. |
| title | string | No | Title or supplementary information. |

## API: AvatarImage


```typescript
AvatarImage: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarImageProps & React.RefAttributes<HTMLImageElement>, "ref"> & React.RefAttributes<HTMLImageElement>>
```


| Property | Type | Required | Description |
| --- | --- | --- | --- |
| alt | string | No | Alternative text for the image. |
| aria-label | string | No | Accessible name of the control. |
| asChild | boolean | No | Apply props and behavior to a single compatible child element. |
| children | ReactNode | No | Content or child elements of the component. |
| className | string | No | Additional CSS classes to customize the element. |
| defaultChecked | boolean | No | Initial selection of the control. |
| defaultValue | string \| number \| readonly string[] | No | Initial value when the component manages its own state. |
| id | string | No | Element identifier; associates labels and descriptions. |
| onChange | ChangeEventHandler<HTMLImageElement, Element> | No | Change event. Check the type: some controls return an object, others a DOM event. |
| onClick | MouseEventHandler<HTMLImageElement> | No | Action performed when the element is activated. |
| onLoadingStatusChange | ((status: ImageLoadingStatus) => void) | No | See the published type. |
| onSubmit | SubmitEventHandler<HTMLImageElement> | No | Form submission event. |
| role | AriaRole | No | Semantic role of the element. Keep the default role unless a change is justified. |
| src | string | No | Resource path or URL. |
| style | CSSProperties | No | React inline styles. |
| tabIndex | number | No | Keyboard focus order and availability. |
| title | string | No | Title or supplementary information. |

## API: AvatarFallback


```typescript
AvatarFallback: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarFallbackProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>
```


| Property | Type | Required | Description |
| --- | --- | --- | --- |
| aria-label | string | No | Accessible name of the control. |
| asChild | boolean | No | Apply props and behavior to a single compatible child element. |
| children | ReactNode | No | Content or child elements of the component. |
| className | string | No | Additional CSS classes to customize the element. |
| defaultChecked | boolean | No | Initial selection of the control. |
| defaultValue | string \| number \| readonly string[] | No | Initial value when the component manages its own state. |
| delayMs | number | No | See the published type. |
| id | string | No | Element identifier; associates labels and descriptions. |
| onChange | ChangeEventHandler<HTMLSpanElement, Element> | No | Change event. Check the type: some controls return an object, others a DOM event. |
| onClick | MouseEventHandler<HTMLSpanElement> | No | Action performed when the element is activated. |
| onSubmit | SubmitEventHandler<HTMLSpanElement> | No | Form submission event. |
| role | AriaRole | No | Semantic role of the element. Keep the default role unless a change is justified. |
| style | CSSProperties | No | React inline styles. |
| tabIndex | number | No | Keyboard focus order and availability. |
| title | string | No | Title or supplementary information. |

Source: https://kivora.pro/docs/componentes/avatar