Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Avatar examples · Standard

Avatar with Offline Indicator (Standard) for React

A round avatar with a gray dot at the bottom corner showing it is offline.

Framework
UI library

Not everyone is online all the time, and showing who isn't matters as much as showing who is. This React avatar adds an AvatarBadge with bg-muted-foreground, a quiet gray dot at the bottom corner, with a visually hidden Offline label for screen readers. Use it in chat, team directories, or any list that mixes active and inactive people.

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

All 14 avatar examples