Badge

1import { Badge } from "@/components/ui/badge";
2
3<Badge />

1"use client";
2
3import { ark } from "@ark-ui/react/factory";
4import { tv, type VariantProps } from "tailwind-variants";
5import { cn } from "@/lib/utils";
6
7export const badgeVariants = tv({
8  base: [
9    "relative",
10    "inline-flex items-center justify-center gap-1",
11    "select-none whitespace-nowrap font-medium text-xs",
12    "rounded-md border border-transparent",
13    "overflow-hidden",
14    "transition-colors",
15    "outline-none focus-visible:border-primary focus-visible:ring-[3px] focus-visible:ring-ring/32",
16    "[&_svg]:pointer-events-none [&_svg]:size-3 [&_svg]:shrink-0",
17    "[button&,a&]:cursor-pointer [button&,a&]:pointer-coarse:after:absolute [button&,a&]:pointer-coarse:after:size-full [button&,a&]:pointer-coarse:after:min-h-11 [button&,a&]:pointer-coarse:after:min-w-11",
18    "motion-reduce:transition-none!",
19  ],
20  variants: {
21    variant: {
22      default: [
23        "bg-foreground",
24        "text-background",
25        "focus-visible:border-foreground focus-visible:ring-foreground/20",
26        "dark:focus-visible:ring-foreground/40",
27        "[a&]:hover:bg-foreground/90",
28      ],