Badge (Tailwind)

1import { mergeProps } from "@base-ui/react/merge-props";
2import { useRender } from "@base-ui/react/use-render";
3import { cva, type VariantProps } from "class-variance-authority";
4import { cn } from "@/lib/utils";
5 
6const badgeVariants = cva(
7  [
8    "inline-flex items-center justify-center border-[0.5px] border-border/80 font-normal",
9    "w-fit flex-shrink-0 gap-1.5 whitespace-nowrap",
10    "overflow-hidden transition-[color,box-shadow] duration-150 ease-in-out",
11    "[&_svg]:pointer-events-none",
12    "focus-visible:border-ring focus-visible:shadow-[0_0_0_3px_var(--ring),inset_0_0_0_1px_var(--ring)]",
13    "aria-[invalid=true]:border-destructive aria-[invalid=true]:shadow-[0_0_0_1px_var(--destructive)]",
14  ],
15  {
16    variants: {
17      variant: {
18        default:
19          "selection:!bg-[oklch(0_0_0)] selection:!text-foreground [&_*]:selection:!bg-[oklch(0_0_0)] [&_*]:selection:!text-foreground [.light_&]:selection:!bg-white [.light_&]:selection:!text-black [.light_&_*]:selection:!bg-white [.light_&_*]:selection:!text-black [[data-theme='light']_&]:selection:!bg-white [[data-theme='light']_&]:selection:!text-black [[data-theme='light']_&_*]:selection:!bg-white [[data-theme='light']_&_*]:selection:!text-black bg-foreground text-primary-foreground",
20        secondary: "border-transparent bg-[var(--secondary)] text-secondary-foreground",
21        destructive: [
22          "border-transparent bg-[var(--secondary)] text-destructive",
23          "focus-visible:shadow-[0_0_0_3px_var(--destructive),inset_0_0_0_1px_var(--destructive)]",
24        ],
25        success: [
26          "border-transparent bg-[var(--secondary)] text-success",
27          "focus-visible:shadow-[0_0_0_3px_var(--success),inset_0_0_0_1px_var(--success)]",
28        ],
29        info: [
30          "border-transparent bg-[var(--secondary)] text-info",
31          "focus-visible:shadow-[0_0_0_3px_var(--info),inset_0_0_0_1px_var(--info)]",
32        ],
33        outline: "border-border bg-transparent text-foreground hover:bg-card",
34      },
35      size: {
36        sm: "rounded-[var(--radius)] px-1.5 py-px text-[0.625rem] leading-[15px]",
37        md: "rounded-[var(--radius)] px-2 py-0.5 text-xs leading-[14px]",
38        lg: "rounded-[var(--radius-lg)] px-3 py-1 text-sm",
39      },
40    },
41    defaultVariants: {
42      variant: "default",
43      size: "md",
44    },
45  }
46);
47 
48function Badge({
49  className,
50  variant = "default",
51  size = "md",
52  render,
53  ...props
54// … truncated