Badge

npx shadcn@latest add https://ui.thjsecurity.tech/r/badge.json

import * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"

/** Mono small-caps pill on a soft tint (`.pill` in globals.css). Colour
 *  carries severity, never category: crimson, orange, amber, sage, stone. */
const badgeVariants = cva("pill", {
  variants: {
    variant: {
      default: "",
      secondary: "",
      destructive: "pill-signal",
      outline: "border border-glass-border bg-transparent text-paper-dim",
      critical: "pill-signal",
      high: "bg-sev-high/15 text-sev-high",
      medium: "pill-amber",
      low: "pill-sage",
      info: "",
    },
  },
  defaultVariants: {
    variant: "default",
  },
})

export interface BadgeProps
  extends React.HTMLAttributes<HTMLDivElement>,
    VariantProps<typeof badgeVariants> {}

function Badge({ className, variant, ...props }: BadgeProps) {
  return (
    <div className={cn(badgeVariants({ variant }), className)} {...props} />
  )
}

export { Badge, badgeVariants }