Status Dot

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

Installation

bash

npx shadcn@latest add @redpanda/status-dot

bash

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

bash

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

bash

bunx shadcn@latest add @redpanda/status-dot

bash

nubx shadcn@latest add @redpanda/status-dot

bash

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

Usage

tsx

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="destructive" />
{/* Positioned on content via DotGroup */}<DotGroup content={<Badge tone="default" variant="subtle">Service</Badge>} size="sm" items={[    {        id: "healthy",        kind: "status",        variant: "success"    }]}/>

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

plaintext

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.

tsx

<DotGroup  content={    <Badge tone="default" variant="subtle">      Messages    </Badge>  }  size="sm"  items={[    {      id: 'healthy',      kind: 'status',      variant: 'success',    },  ]}/>

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 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 →