Skip to content

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

Free

Avatar with Online Indicator (Standard) for Solid

A round photo with a success-colored dot at the bottom corner. The hidden label for that dot says Online.

UI library: Ark UI

A round photo has a success-colored dot at the bottom corner. A hidden label on the dot says Online. The initials CN show only if the picture fails.

Use it in chat or a directory where presence matters. The dot does not update on its own. A word such as Online can sit in a Badge if color is not enough. In Solid, Ark UI does not know who is online.

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-success">
      <span class="sr-only">Online</span>
    </AvatarBadge>
  </Avatar>

FAQ

How is the online dot made?

AvatarBadge is inside Avatar, with bg-success for the green. The component pins it to the bottom end corner and gives it a ring in the background color. This file adds no positioning classes.

How do screen readers get the status?

The badge has no icon. A visually hidden "Online" inside AvatarBadge is what gets read.

Does the dot scale with the avatar?

Yes. AvatarBadge takes its size from the avatar's size. This file uses the default. sm and lg resize the avatar and the dot together.

How do I use a different status color?

Change the class on AvatarBadge. This file uses bg-success. Change the hidden label in the same edit so the words match the color.

What is the fallback for?

AvatarImage sets alt and a 32 by 32 size. AvatarFallback shows CN when the image is missing or fails. The badge stays in the corner either way.

Does the dot move in a right-to-left layout?

Yes. It anchors to the end edge, so it moves to the other corner when the page direction is right to left.

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