ui / status

Badge

Compact metadata badges across neutral and semantic tones.

PREVIEW READY

LIVE PREVIEWDARK / LIGHT COMPATIBLE

Neutral Safe Missing headers Vulnerable

INSTALL / SOURCE REGISTRY

Add 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/badge.json

registry/default/ui/badge.tsx

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

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

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