ui / status

Status Badge

Semantic status with a quiet signal dot and readable label.

PREVIEW READY

LIVE PREVIEWDARK / LIGHT COMPATIBLE

Neutral Safe Missing headers Vulnerable

INSTALL / SOURCE REGISTRY

Add Status Badge to your project

The command adds the component source and its DesignOS base dependency.

$pnpm dlx shadcn@latest add https://designos.h4rithd.com/r/status-badge.json

registry/default/ui/status-badge.tsx

import * as React from "react"
import { clsx as cn } from "clsx"
import "@/components/designos/designos.css"

export function StatusBadge({ status = "info", className, children, ...props }: React.HTMLAttributes<HTMLSpanElement> & { status?: "success" | "warning" | "danger" | "info" }) {
  return <span className={cn("dos-status", `dos-status--${status}`, className)} {...props}>{children}</span>
}

Component contract

Source-owned after installation
Dark and light theme variables
Keyboard and visible-focus behavior
Reduced-motion fallback
Responsive from 320px upward
IBM Plex Sans + JetBrains Mono hierarchy