Count Dot

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

Installation

Loading component...

Usage

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="error" />

<CountDot count={150} max={99} variant="info" />

{/* Positioned on content via DotGroup */}
<DotGroup content={<Badge variant="neutral-inverted">Inbox</Badge>} size="sm">
  <CountDot count={3} variant="error" />
</DotGroup>

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

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.

<DotGroup content={<Badge variant="neutral-inverted">Alerts</Badge>} size="sm">
  <CountDot count={42} variant="warning" />
</DotGroup>

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 b…#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 →