Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Avatar examples · Standard

Avatar with Count Indicator (Standard) for React

A round avatar with a red count of unread messages at its top corner.

Framework
UI library

The red bubble with a number is the quickest way to say something is waiting. This React avatar wraps a round avatar with a small destructive Badge showing 3 at its top corner, with visually hidden words that say what the number counts. Use it for unread messages, pending requests or notifications next to a person.

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 unread count built?

The count is a Badge with pill, size="sm", and variant="destructive". The visible text is 3, and the same badge hides the words "unread messages" for screen readers.

How is the count positioned?

The avatar sits in a relative w-fit wrapper. The badge's span is absolute -end-2.5 -top-2.5, with rounded-full bg-background p-0.5 so a gap shows around the pill. -end follows the writing direction.

How do I change the number?

Replace the text 3. The badge has no count prop. Keep the hidden words in step with whatever the number means.

How do I change the count color?

variant="destructive" is the red treatment. default or secondary swap the color and still take pill and size="sm".

What happens if the photo fails?

AvatarImage sets alt, width, and height to 32. AvatarFallback shows CN when the image is missing or fails. The count stays on the wrapper.

Can I also show a presence dot?

AvatarBadge is the part that sits on the bottom end corner. This count is a separate badge on the top end, so the two corners stay free of each other.

All 14 avatar examples