# Avatar

Circular profile image with fallback initials and a presence dot. An optional mode shows presence on the photo itself, bright when online and faded when away or offline.

> Primitive · Free · Data Display — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add avatar
```

## Import

```tsx
import { Avatar } from "@/components/ui/avatar/avatar";
```

## Variants

- `fallback` — Fallback: `npx @lumioui/cli add avatar-fallback`
- `presence` — Presence: `npx @lumioui/cli add avatar-presence`
- `sizes` — Sizes: `npx @lumioui/cli add avatar-sizes`

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `size?` | `"sm" | "md" | "lg" | "xl"` | — |
| `source?` | `ImageSourcePropType` | Image source for the avatar — fades in when it loads. |
| `fallback?` | `string` | Fallback initials shown when no image (or it fails). |
| `status?` | `keyof typeof statusColors` | Presence dot in the corner — chat/status lists. |
| `onPress?` | `(e: GestureResponderEvent) => void` | Makes the avatar tappable (profile → detail). |
| `className?` | `string` | — |
| `alt?` | `string` | Accessibility label — defaults to "Avatar". |
| `lit?` | `boolean` | Presence as light (opt-in): the photo is switched on by presence — full when online or busy, dimmed under a surface veil when away (80%) or offline (60%) — and the dot gets a shape per state (filled online, hollow away, barred busy, hollow grey offline). Default false. |

## Icons rendered

- `user` — /icons.html?i=user

Source: https://lumioui.com/components/avatar