Avatar with Count Indicator (Standard) for Ark UI

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

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

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

Q: 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".

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

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

A round photo with a destructive badge at the top corner. The badge shows 3, and its hidden words say unread messages.

A round photo has a destructive badge at the top corner. The badge shows 3. Hidden words in that badge say unread messages. The number does not change on its own.

Use it for unread messages or pending requests next to a person. Pass the real count. Put the number in a Badge beside the name if the corner is crowded. In React, Ark UI does not count the messages.

PreviewCode

Installation

Free with an account. It carries your token, so the CLI installs everything in one go.

Google GitHub

Use email insteadNo credit card

Anatomy

Usage

<div className="relative w-fit">
  <Avatar>
    <AvatarImage
      alt="@shadcn"
      height={32}
      src="https://github.com/shadcn.png"
      width={32}
    />
    <AvatarFallback>CN</AvatarFallback>
  </Avatar>
  <span className="absolute -end-2.5 -top-2.5 rounded-full bg-background p-0.5">
    <Badge pill size="sm" variant="destructive">
      3<span className="sr-only"> unread messages</span>
    </Badge>
  </span>
</div>

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.