Component

Status Badge

Displays network or service status with configurable labels and visual indicators.

Preview

Installation

terminal

$npx shadcn@latest add https://uxdotsol.xyz/r/status-badge.json

Usage

status-badge.tsx

import { StatusBadge } from "@/components/status-badge";
 
export default function App() {
  return (
    <div className="flex justify-center p-8">
      <StatusBadge />
    </div>
  );
}

Props / Arguments

Name	Type	Default	Description
size	'sm' \| 'md' \| 'lg'	'md'	Badge size variant.
onClick	() => void	undefined	Optional click handler. Clicking the badge also triggers an immediate status refetch.