# Avatar

Source: https://lumeo.nativ.sh/components/avatar

# Avatar

An image element with a fallback for representing the user.

## Installation

.NET CLI PackageReference Lumeo CLI

dotnet add package Lumeo

One-time app setup (`AddLumeo()`, CSS & JS) is covered in the [installation guide](docs/introduction).

## 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

Preview Code

With Image

![User avatar](https://github.com/shadcn.png)

CN

![Vercel](https://github.com/vercel.png)

VC

Preview Code

Fallback Initials

JD

AB

Preview Code

Sizes

![Small](https://github.com/shadcn.png)

SM

![Default](https://github.com/shadcn.png)

MD

![Large](https://github.com/shadcn.png)

LG

Preview Code

Group

![User 1](https://github.com/shadcn.png)

U1

U2

U3

+3

Preview Code

Shape (interactive)

Toggle the shape to see Circle vs Square applied live.

Circle Square

![User](https://github.com/shadcn.png)

JD

AB

XL

Preview Code

Presence Status (interactive)

Select a status to see the presence indicator update.

None Online Away Busy Offline

![User](https://github.com/shadcn.png)

JD

Status: **Online**

## Keyboard Interactions

Key

Action

Tab

Move 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).

Shape

AvatarShape

Circle

Outline shape. Values: Circle, Square, Rounded.

Status

AvatarStatus

None

Presence indicator. Values: None, Online, Offline, Busy, Away.

### AvatarGroup

Property

Type

Default

Description

Max

int

0

Maximum visible avatars; overflow is replaced by a "+N" placeholder. 0 means no limit.

Total

int?

null

Explicit 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](/components/badge) — Overlay a dot badge on an avatar to show online status or notification counts
-   [Tooltip](/components/tooltip) — Show the full user name on hover when only an avatar is displayed
-   [HoverCard](/components/hover-card) — Display a rich profile preview when hovering over an avatar