# Avatar

User or entity image with fallback.

## Examples

### Default

```tsx
import { Avatar } from '@var-ui/react';

<Avatar name="Ada Lovelace" status="success" />
```

```astro
---
import { Avatar } from '@var-ui/astro';
---

<Avatar name="Ada Lovelace" status="success" />
```

```html
<span data-size="md" class="var-ui-avatar"><span data-size="md" class="var-ui-avatar__initials" role="img" aria-label="Ada Lovelace">AL</span><span data-size="md" class="var-ui-avatar__status" data-avatar-status><span data-tone="success" class="var-ui-status-dot"></span></span></span>
```

## Props

| Name | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| alt | string \| undefined | no |  | Accessible description of the image. |
| className | string \| undefined | no |  | Additional CSS class names merged onto the root element. |
| name | string \| undefined | no |  | Display name — initials fallback uses the first letter of the first two words. |
| src | string \| undefined | no |  | Image URL. When missing or on load error, initials are shown instead. |
| status | AvatarStatusTone \| undefined | no |  | Optional presence indicator shown on the avatar rim. |
| size | AvatarSize \| undefined | no |  |  |

## Accessibility

Built on React Aria Components where applicable.