Inbox Tab Bar Badges

FreeNew

A tab bar whose Inbox tab shows an unread count that reads aloud, updates as messages arrive or are read, caps at 99+ and announces new messages politely. Use this when a tab needs to show unread or pending counts that change while the app is open.

Customize

Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.

unread1

Guide and examples

When to use it

Use it when a tab needs to show unread or pending counts that change while the app is open.

Do not use it for counts that never change or for badges that are decoration.

Installation


pnpm dlx shadcn@latest add https://ui.tealmac.com/r/inbox-tab-bar-badges.json

It composes button, @tealmac/tab-bar, which the CLI installs for you.

Usage

import { InboxTabBarBadges } from "@/components/inbox-tab-bar-badges"

<div className="flex w-full max-w-sm flex-col gap-3">
  <div className="flex gap-2">
    <Button size="sm" variant="outline" onClick={() => setUnread((n) => n + 1)}>
      New message
    </Button>
    <Button size="sm" variant="outline" onClick={() => setUnread(0)}>
      Read all
    </Button>
  </div>
  <InboxTabBarBadges unread={unread} tab={tab} onTabChange={setTab} />
</div>

Props

Prop	Type	Default	Description
`unread`	`number`	`required`	Unread message count.
`onSimulate`	`() => void`	`-`	Demo hook to add a message.

Accessibility

The badge text is part of the tab's name ("Inbox, 3 new"); the number in the badge is hidden from assistive technology so it is not read twice.
A new message is announced once in a polite status ("New message, 4 unread") and is not repeated on re-render.

Testing

The pattern ships with a Testing Library test (inbox-tab-bar-badges.test.tsx) that drives it through roles and the keyboard.