Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Avatar examples · Square

Avatar with Offline Indicator (Square) for React

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

Framework
UI library

On a square avatar, a gray dot says a system is down or disconnected, not that a person stepped away. This React avatar uses rounded-lg on the avatar, its image and its fallback, and adds an AvatarBadge with bg-muted-foreground and a visually hidden Offline label. Use it for integrations, workspaces or services that aren't connected.

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 square avatar set up?

rounded-lg goes on Avatar, AvatarImage, and AvatarFallback, plus after:rounded-lg on Avatar for the border. The status dot stays circular.

How is the offline dot made?

AvatarBadge has bg-muted-foreground and sits on the bottom end corner with a ring. The muted token follows the theme.

What names the dot for assistive tech?

A visually hidden "Offline" inside AvatarBadge. The icon slot is empty, so that text is the whole label.

What shows when there is no photo?

AvatarFallback shows CN with the same rounded-lg. AvatarImage still has alt and a 32 by 32 size for when the photo loads.

How do I resize the avatar and the dot?

Set size on Avatar to sm, default, or lg. This file uses the default, and the badge scales from that prop.

How do I recolor the offline dot?

Replace bg-muted-foreground. Change the hidden "Offline" string in the same place if the status means something else.

All 14 avatar examples