Status Badge

A pill that names the state of a service, with a live dot.

Installation#

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

Or pass the full URL: https://ui.balick.me/r/status-badge.json

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

export function ApiStatus() {
  return <StatusBadge status="operational" />
}

Prop	Type	Default	Description
`status` The state of the service. Required.	`"operational" \| "degraded" \| "outage" \| "maintenance"`	—	The state of the service. Required.
`children` Replaces the default label.	`React.ReactNode`	—	Replaces the default label.