# Avatar

- Page: <https://kznlabs.github.io/labsUI/components/avatar>

## Avatar (`avatar`, component)

Image with initials fallback on error, three sizes and online/away/busy/offline dots.

- Install: `npx @kznlabs/labsui add avatar`
- Docs: <https://kznlabs.github.io/labsUI/components/avatar>
- Brings: utils
- npm: clsx@^2.1.1, tailwind-merge@^3.7.0

### API

- `<Avatar>`
  - `alt: string`: Person's name: used for alt text and initials fallback.
  - `fallback?: ReactNode`: Overrides initials (text or icon).
  - `size?: "sm" | "default" | "lg"` = `"default"`: Diameter.
  - `src?: string`: Image URL; `fallback` or initials show while it loads or if it fails.
  - `status?: "online" | "away" | "busy" | "offline"`: Presence dot in the corner, announced with the name.

### Usage

```tsx
<Avatar src={url} alt="Jane Doe" status="online" size="lg" />
```

### Example: user.tsx

```tsx
import { Bot } from "lucide-react";
import { Avatar } from "@/components/ui/avatar";
export function User() {
  return (
    <Avatar
      src="/jane.png"
      alt="Jane Doe"
      status="online"
      size="lg"
      fallback={<Bot />}
    />
  );
}
```