Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Avatar examples · Standard

Avatar with Online Indicator (Standard) for React

A round avatar with a green dot at the bottom corner showing it is online.

Framework
UI library

You know the small green dot next to profile pictures in chat apps. This React avatar adds one with AvatarBadge, the avatar's own part for a status dot: it sits at the bottom corner with a ring in the background color, and bg-success makes it green. The dot carries a visually hidden Online label for screen readers. Use it in chat, team directories, or any tool where presence matters.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

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.

All 14 avatar examples