Count Dot

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

Loading component...

Installation

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.