Status Badge

Displays a pulsing status indicator with a label, useful for showing the state of a process or service.

Installation

bash

npx shadcn@latest add @redpanda/status-badge

bash

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

bash

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

bash

bunx shadcn@latest add @redpanda/status-badge

bash

nubx shadcn@latest add @redpanda/status-badge

bash

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

Usage

tsx

import { StatusBadge } from "@/components/redpanda-ui/status-badge"
{/* Default label deduced from variant */}<StatusBadge variant="success" />        {/* → "Running" */}<StatusBadge variant="starting" />       {/* → "Starting" (spinner) */}<StatusBadge variant="stopping" />       {/* → "Stopping" (spinner) */}
{/* Custom label overrides default */}<StatusBadge variant="success">Healthy</StatusBadge>
{/* Enable pulsing when Mali says so */}<StatusBadge variant="disabled" pulsing />

When to use

Use StatusBadge when:

Showing live process state (running, starting, stopping, error)
Displaying service health (online, degraded, offline)
Indicating connection or sync status

Don’t use StatusBadge when:

Displaying static categories or tags (use Badge)
You only need the dot without a label (use StatusDot)
Showing counts or notifications (use CountDot)
The status is purely informational with no temporal aspect

Anatomy

plaintext

StatusBadge (static state)┌────────────────────────────────────────┐│  ┌────────────┐                        ││  │  StatusDot  │      Label Text       ││  │  ◉ (pulse) │                        ││  └────────────┘                        │└────────────────────────────────────────┘
StatusBadge (transitioning state)┌────────────────────────────────────────┐│  ┌────────────┐                        ││  │  Spinner ↻  │      Label Text       ││  │             │                        ││  └────────────┘                        │└────────────────────────────────────────┘

Component Structure:

StatusBadge (Root): Wraps Badge with an indicator icon
StatusDot: Animated colored dot for static states (success, informative, warning, destructive, disabled)
Spinner: Animated loading spinner for transitioning states (starting, stopping)

Note: StatusBadge composes StatusDot internally — do not wrap StatusBadge in DotGroup or add dot components to it.

API Reference

`StatusBadge`

Prop	Type	Default	Description
`variant`	`"success" \| "info" \| "warning" \| "error" \| "disabled" \| "starting" \| "stopping"`	`"info"`	Status variant; `starting`/`stopping` show a spinner
`pulsing`	`boolean`	`false`	Whether the indicator dot animates (ignored for spinner variants)
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Badge and indicator size
`children`	`ReactNode?`	Deduced from variant	Label text; defaults to variant name (see table below)
`testId`	`string?`	—	Test ID for visual regression testing
`className`	`string?`	—	Additional CSS classes

Default labels

When no children are provided, the label is deduced from the variant:

Variant	Default Label	Indicator
`success`	Running	StatusDot
`informative`	Pending	StatusDot
`warning`	Warning	StatusDot
`destructive`	Error	StatusDot
`disabled`	Stopped	StatusDot
`starting`	Starting	Spinner
`stopping`	Stopping	Spinner

StatusDot — Standalone animated status indicator dot
CountDot — Numerical count indicator dot
Badge — Base badge component

Credits

Inspired by the Kibo UI Status component for the pulsing indicator pattern and variant design.
Built on top of the Badge component for consistent sizing and styling.

Status Badge

Recent changes