Status Dot

A standalone animated status indicator dot with semantic color variants and optional stacked positioning.

Installation

Loading component...

Usage

import { StatusDot } from "@/components/redpanda-ui/status-dot"
import { DotGroup } from "@/components/redpanda-ui/dot-group"
import { Badge } from "@/components/redpanda-ui/badge"

<StatusDot variant="success" />

<StatusDot variant="error" />

{/* Positioned on content via DotGroup */}
<DotGroup content={<Badge variant="neutral-inverted">Service</Badge>} size="sm">
  <StatusDot variant="success" />
</DotGroup>

When to use

Use StatusDot when:

Showing live status inline next to text or labels
Indicating connection or health state on a badge or avatar
Building custom status indicators with composition

Don't use StatusDot when:

You need a label alongside the dot (use StatusBadge)
Showing numerical counts (use CountDot)
On a StatusBadge — it already includes a StatusDot internally

Anatomy

StatusDot
┌───────────────┐
│  ● ping ring  │  ← animated pulse (when pulsing=true)
│  ● solid dot  │  ← inner colored dot
└───────────────┘

Positioned on Badge (via DotGroup)
┌─────────────────────┐
│  Badge Label    [●]─┤  ← positioned at corner with border ring
└─────────────────────┘

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

<DotGroup content={<Badge variant="neutral-inverted">Messages</Badge>} size="sm">
  <StatusDot variant="success" />
</DotGroup>

API Reference

`StatusDot`

Prop	Type	Default	Description
`variant`	`"success" \| "info" \| "warning" \| "error" \| "disabled"`	`"info"`	Dot color variant
`pulsing`	`boolean`	`false`	Whether the dot has a ping animation
`size`	`"xxs" \| "xs" \| "sm" \| "md" \| "lg"`	`"md"`	Indicator size
`stacked`	`boolean`	`false`	Adds border ring for overlapping contexts (managed by DotGroup)
`children`	`ReactNode?`	—	Content rendered inside the inner dot
`testId`	`string?`	—	Test ID for visual regression testing
`className`	`string?`	—	Additional CSS classes

Credits

Extracted from the StatusBadge component for standalone use.
Inspired by the Kibo UI Status component for the pulsing indicator pattern.

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 →