Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Avatar examples · Square

Avatar with Online Indicator (Square) for React

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

Framework
UI library

On a square avatar, a status dot usually says a system is up rather than a person is around. This React avatar uses rounded-lg on the avatar, its image and its fallback, and adds an AvatarBadge with bg-success at the bottom corner, with a visually hidden Online label. Use it for workspaces, integrations, bots or services that are connected and responding.

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 this avatar squared off?

rounded-lg is on Avatar, AvatarImage, and AvatarFallback, and after:rounded-lg is on Avatar so the border follows. AvatarBadge is a circle of its own and doesn't take those classes.

How is the online dot made?

AvatarBadge uses bg-success. It sits on the bottom end corner with a ring in the background color, from the badge styles.

How is the dot labeled?

A visually hidden "Online" inside AvatarBadge is the accessible name. The green class is only the paint.

Does the dot follow the avatar size?

Yes. Leave size at the default, as this file does, or set sm or lg. The badge scales with that prop.

What shows if the image fails?

AvatarFallback shows CN with rounded-lg. AvatarImage still carries alt and width and height of 32.

How do I recolor the dot?

Replace bg-success on AvatarBadge, and replace the hidden "Online" text so it still describes the status.

All 14 avatar examples