Lenso UI

Foundation component · Content

Avatar

Image and fallback avatars, status, sizes, and avatar groups.

Live playground

LRonline statusLLRL

Choose Avatar when

  • Always provide meaningful image alt text or a concise fallback.
  • Use groups for compact collaborative identity, not as a people picker.

Accessibility

  • Presence status exposes an accessible state label by default.

Implementation

Base UI owns image loading and fallback behavior; all visual parts remain replaceable.

import { Avatar } from "@lenso/ui/avatar";

<Avatar.Root size="default">
  <Avatar.Image alt="Lenso member" src="/avatar.jpg" />
  <Avatar.Fallback>LR</Avatar.Fallback>
  <Avatar.Status attached state="online" />
</Avatar.Root>;
Lenso UI