Badge

1import { Slot } from "@radix-ui/react-slot"
2import { cva, type VariantProps } from "class-variance-authority"
3
4import * as React from "react"
5
6import { cn } from "@/lib/utils"
7
8const badgeVariants = cva(
9  "inline-flex items-center justify-center rounded-base border-2 border-border px-2.5 py-0.5 text-xs font-base w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] overflow-hidden",
10  {
11    variants: {
12      variant: {
13        default: "bg-main text-main-foreground",
14        neutral: "bg-secondary-background text-foreground",
15      },
16    },
17    defaultVariants: {
18      variant: "default",
19    },
20  },
21)
22
23function Badge({
24  className,
25  variant,
26  asChild = false,
27  ...props
28}: React.ComponentProps<"span"> &
29  VariantProps<typeof badgeVariants> & {
30    asChild?: boolean
31  }) {
32  const Comp = asChild ? Slot : "span"
33
34  return (
35    <Comp
36      data-slot="badge"
37      className={cn(badgeVariants({ variant }), className)}
38      {...props}
39    />
40  )
41}
42
43export { Badge, badgeVariants }