Status Dot

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

Loading component...

Installation

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.