Count Dot

A numerical indicator dot for displaying counts with semantic color variants and optional stacked positioning.

Installation

bash

npx shadcn@latest add @redpanda/count-dot

bash

pnpm dlx shadcn@latest add @redpanda/count-dot

bash

yarn dlx shadcn@latest add @redpanda/count-dot

bash

bunx shadcn@latest add @redpanda/count-dot

bash

nubx shadcn@latest add @redpanda/count-dot

bash

aube dlx shadcn@latest add @redpanda/count-dot

Usage

tsx

import { CountDot } from "@/components/redpanda-ui/count-dot"import { DotGroup } from "@/components/redpanda-ui/dot-group"import { Badge } from "@/components/redpanda-ui/badge"
<CountDot count={5} variant="destructive" />
<CountDot count={150} max={99} variant="informative" />
{/* Positioned on content via DotGroup */}<DotGroup content={<Badge tone="default" variant="subtle">Inbox</Badge>} size="sm" items={[    {        id: "errors",        kind: "count",        count: 3,        variant: "destructive"    }]}/>

When to use

Use CountDot when:

Showing unread message or notification counts
Indicating the number of items requiring attention
Displaying a count badge on icons, avatars, or badges

Don’t use CountDot when:

Showing status without a count (use StatusDot)
You need a label alongside a status indicator (use StatusBadge)
On a StatusBadge — it already includes a StatusDot internally

Behavior

Returns null when count <= 0 — nothing renders
When count > max, displays "{max}+" (e.g., 99+)
Default max is 99

Anatomy

plaintext

CountDot┌───────┐│  42   │  ← rounded pill with count text└───────┘
Positioned on Badge (via DotGroup)┌─────────────────────┐│  Badge Label  [3]───┤  ← positioned at corner with border ring└─────────────────────┘

Positioning pattern: Use DotGroup with the content prop to position CountDot on badges, avatars, or other elements.

tsx

<DotGroup  content={    <Badge tone="default" variant="subtle">      Alerts    </Badge>  }  size="sm"  items={[    {      id: 'warnings',      kind: 'count',      count: 42,      variant: 'warning',    },  ]}/>

API Reference

`CountDot`

Prop	Type	Default	Description
`count`	`number`	—	The number to display (required)
`max`	`number`	`99`	Maximum count before showing overflow (e.g., `99+`)
`variant`	`"success" \| "info" \| "warning" \| "error" \| "disabled"`	`"info"`	Dot color variant
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Indicator size
`stacked`	`boolean`	`false`	Adds border ring for overlapping contexts (managed by DotGroup)
`testId`	`string?`	—	Test ID for visual regression testing
`className`	`string?`	—	Additional CSS classes

Credits

Shares the same semantic color variants as StatusDot for a consistent indicator system.

Recent changes

patchv1.2.0Pin shipped dependency floors to the version we develop against. Registry items now declare ranges like `^5.1.9` (the actual installed version) instead of collapsing to `^5.0.0`, so consumers start on the known-tested baseline while caret semantics still allow any compatible release within the same major.#133

minorv1.1.0Theme docs refresh, readability pass on semantic foregrounds, and consumer-facing Base UI regression fixes.#121

minorv1.0.0Post-Base-UI polish. Public API unchanged.#116

majorv1.0.0Migrate every Radix-based primitive to `@base-ui/react@^1.4.0` (Base UI).#114

minorv0.3.0Add theme-provider component to the registry with documentation and tests. Includes playground type improvements (export RegistryItem, remove as-const boilerplate) and docs site dark mode border color fix.#109

See full history →