Lumeo

Avatar

An image element with a fallback for representing the user.

Installation

dotnet add package Lumeo

One-time app setup (AddLumeo(), CSS & JS) is covered in the installation guide.

Usage

@using Lumeo

<Avatar />

When to Use

  • Display user profile pictures in headers, sidebars, or navigation
  • Show team member lists with photos or initials
  • Identify authors in comment threads and activity feeds
  • Represent contacts in cards, chat interfaces, or directory pages
  • Provide a visual identity fallback with initials when no image is available
User avatar
CN
Vercel
VC
JD
AB
Small
SM
Default
MD
Large
LG
User 1
U1
U2
U3
+3

Toggle the shape to see Circle vs Square applied live.

User
JD
AB
XL

Select a status to see the presence indicator update.

User
JD

Status: Online

Keyboard Interactions

Key Action
TabMove focus to the avatar if it is wrapped in a link or button

Avatar is a display-only component with no built-in keyboard interactions. When used as a link or inside a button, it inherits the wrapper's keyboard behavior.

Parameter Coverage

Every Size, AvatarShape, and AvatarStatus value rendered live.

Size

Xs
MB
Sm
MB
Md
MB
Lg
MB
Xl
MB
Xxl
MB
Xxs
MB

AvatarShape

Circle
MB
Square
MB

AvatarStatus

None
MB
Online
MB
Offline
MB
Away
MB
Busy
MB

API Reference

Avatar

Property Type Default Description
Size AvatarSize Default Size of the avatar circle. Values: Sm (32px), Default (40px), Lg (48px).
ShapeAvatarShapeCircleOutline shape. Values: Circle, Square, Rounded.
StatusAvatarStatusNonePresence indicator. Values: None, Online, Offline, Busy, Away.

AvatarGroup

Property Type Default Description
Maxint0Maximum visible avatars; overflow is replaced by a "+N" placeholder. 0 means no limit.
Totalint?nullExplicit total count used to compute the overflow badge when more avatars exist than rendered.

AvatarImage

Property Type Default Description
Src string? null URL of the avatar image.
Alt string? null Alternative text for the image for accessibility.
OnError EventCallback — Callback invoked when the image fails to load.

AvatarFallback

Property Type Default Description
Renders the fallback content (initials or icon) inside the avatar circle.

Related Components

  • Badge — Overlay a dot badge on an avatar to show online status or notification counts
  • Tooltip — Show the full user name on hover when only an avatar is displayed
  • HoverCard — Display a rich profile preview when hovering over an avatar