Avatar with Count Indicator (Standard) for Svelte

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.

Ark UI

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 Svelte, Ark UI does not count the messages.

PreviewCode

Installation

MCP · Pro

Make your AI a shadcn expert

Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.

Get MCP See plans

Part of Pro

Anatomy

Usage

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