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 }
44