Badge

1import * as React from "react";
2import { cva, type VariantProps } from "class-variance-authority";
3 
4import { cn } from "@/lib/utils";
5 
6const badgeVariants = cva(
7  [
8    "inline-flex items-center gap-1 px-1.5 py-0.5 rounded-sm",
9    "text-mono text-[10px] uppercase tracking-[0.08em] font-medium",
10    "border whitespace-nowrap",
11  ].join(" "),
12  {
13    variants: {
14      tone: {
15        neutral: "bg-secondary text-foreground border-border",
16        primary: "bg-primary/15 text-primary border-primary/40",
17        success: "bg-success/15 text-success border-success/40",
18        warning: "bg-warning/15 text-warning border-warning/40",
19        danger: "bg-danger/15 text-danger border-danger/40",
20        info: "bg-info/15 text-info border-info/40",
21        gold: "bg-gold/15 text-gold border-gold/40",
22      },
23      variant: {
24        soft: "",
25        solid: "",
26        outline: "bg-transparent",
27      },
28    },
29    compoundVariants: [
30      {
31        variant: "solid",
32        tone: "neutral",
33        class: "bg-foreground/90 text-background border-foreground/90",
34      },
35      {
36        variant: "solid",
37        tone: "primary",
38        class: "bg-primary text-primary-foreground border-primary",
39      },
40      {
41        variant: "solid",
42        tone: "success",
43        class: "bg-success text-success-foreground border-success",
44      },
45      {
46        variant: "solid",
47        tone: "warning",
48        class: "bg-warning text-warning-foreground border-warning",
49      },
50      { variant: "solid", tone: "danger", class: "bg-danger text-danger-foreground border-danger" },
51      { variant: "solid", tone: "info", class: "bg-info text-info-foreground border-info" },
52      { variant: "solid", tone: "gold", class: "bg-gold text-gold-foreground border-gold" },
53    ],
54    defaultVariants: {
55      tone: "neutral",
56      variant: "soft",
57    },
58  },
59);
60 
61export interface BadgeProps
62  extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof badgeVariants> {}
63 
64const Badge = React.memo(function Badge({ className, tone, variant, ...props }: BadgeProps) {
65  return <span className={cn(badgeVariants({ tone, variant }), className)} {...props} />;
66});
67 
68export { Badge, badgeVariants };