Count Badge

A count pinned to an icon or an avatar, which pops when it changes.

Dependenciesmotion

Installation#

pnpm dlx shadcn@latest add @balick/count-badge

Or pass the full URL: https://ui.balick.me/r/count-badge.json

Usage#

import { Bell } from "lucide-react"

import { CountBadge } from "@/components/ui/count-badge"

export function Notifications({ unread }: { unread: number }) {
  return (
    <CountBadge count={unread} label="unread notifications">
      <Bell className="size-5" />
    </CountBadge>
  )
}

Props#

Prop	Type	Default	Description
`count` The number to show. Nothing shows at 0, unless showZero is set. Required.	`number`	—	The number to show. Nothing shows at 0, unless showZero is set. Required.
`max` Past it, the badge reads "99+".	`number`	99	Past it, the badge reads "99+".
`dot` Show a plain dot instead of the number.	`boolean`	false	Show a plain dot instead of the number.
`showZero` Show the badge when the count is 0.	`boolean`	false	Show the badge when the count is 0.
`tone` Red for alerts, green for presence, or the foreground color.	`"danger" \| "success" \| "neutral"`	"danger"	Red for alerts, green for presence, or the foreground color.
`label` What is counted, read after the number by screen readers.	`string`	—	What is counted, read after the number by screen readers.