Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Avatar with Offline Indicator (Standard) for Solid

A round photo with a muted dot at the bottom corner. The hidden label for that dot says Offline.

UI library: Ark UI

A round photo has a muted dot at the bottom corner. A hidden label on the dot says Offline. The initials CN show only if the picture fails.

Use it in a list that mixes people who are here and people who are not. The dot does not track presence. A text status fits a Badge beside the name. In Solid, Ark UI does not know who is away.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

Avatar anatomy: image, badge, fallback, group, group count

Usage

<Avatar>
    <AvatarImage alt="@shadcn" height={32} src="https://github.com/shadcn.png" width={32} />
    <AvatarFallback>CN</AvatarFallback>
    <AvatarBadge class="bg-muted-foreground">
      <span class="sr-only">Offline</span>
    </AvatarBadge>
  </Avatar>

FAQ

How is the offline dot made?

AvatarBadge uses bg-muted-foreground, so the dot picks up the theme's muted foreground in light and dark. It sits on the bottom end corner with a ring in the background color.

How do screen readers get Offline?

The badge contains a visually hidden "Offline". There is no icon. The gray class is not announced.

How do I use this dot for a different status?

Swap bg-muted-foreground for another background token, and change the hidden text to match. This file's pair is the muted token plus "Offline".

Does the dot scale with the avatar?

Yes. AvatarBadge reads size on Avatar. This file leaves size at the default, so you get the default dot.

What is behind the dot?

AvatarImage sets alt and a 32 by 32 size. AvatarFallback shows CN when the image is missing or fails.

Which corner does the dot use?

The end edge, the bottom one. In a right-to-left page that end flips, and the dot moves with it.

API Reference

Avatar

Sets alt="@shadcn", height={32}, src="https://github.com/shadcn.png" and width={32}. The rest is on the Avatar page.

All 14 avatar examples