We are live on DevHunt: tool of the week contest

check it out

Status Badge

A badge with a pulsing dot to indicate live or system status.

Preview

Interactive Preview
System OnlineMaintenance ModeCritical FailureDeploying...Legacy

Installation

Usage

tsx
import { StatusBadge } from "@/components/ui/status-badge"

export default function Demo() {
  return (
    <div className="flex gap-4">
      <StatusBadge variant="success">System Live</StatusBadge>
      <StatusBadge variant="error" pulse={false}>Offline</StatusBadge>
    </div>
  )
}

Props

PropTypeDefault
variant
"success""warning""error""info""neutral"
success
pulsebooleantrue