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
| Prop | Type | Default |
|---|---|---|
| variant | "success""warning""error""info""neutral" | success |
| pulse | boolean | true |