Skip to content

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

Free

Avatar with Offline Indicator (Square) for React

A square photo with a muted dot at the bottom corner. The hidden label for that dot says Offline.

A photo with square corners has a muted dot at the bottom corner. A hidden label on the dot says Offline. The initials CN show only if the picture fails.

Use it for an integration or a service that is disconnected, not for a person who stepped away. Pair it with a round photo for people. A Badge can spell out Offline if the dot is too quiet. In React, Base UI does not detect the outage.

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

Anatomy

Avatar anatomy: image, badge, fallback, group, group count

Usage

<Avatar className="rounded-lg after:rounded-lg">
  <AvatarImage
    alt="@shadcn"
    className="rounded-lg"
    height={32}
    src="https://github.com/shadcn.png"
    width={32}
  />
  <AvatarFallback className="rounded-lg">CN</AvatarFallback>
  <AvatarBadge className="bg-muted-foreground">
    <span className="sr-only">Offline</span>
  </AvatarBadge>
</Avatar>

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.

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