Badge

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";
5import styles from "./badge.module.css";
6 
7const badgeVariants = cva(styles.badge, {
8  variants: {
9    variant: {
10      default: styles.default,
11      secondary: styles.secondary,
12      destructive: styles.destructive,
13      outline: styles.outline,
14      success: styles.success,
15      info: styles.info,
16    },
17    size: {
18      sm: styles.sm,
19      md: styles.md,
20      lg: styles.lg,
21    },
22  },
23  defaultVariants: {
24    variant: "default",
25    size: "md",
26  },
27});
28 
29function Badge({
30  className,
31  variant = "default",
32  size = "md",
33  render,
34  ...props
35}: useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants>) {
36  return useRender({
37    defaultTagName: "span",
38    props: mergeProps<"span">(
39      {
40        className: cn(badgeVariants({ variant, size, className })),
41      },
42      props
43    ),
44    render,
45    state: {
46      slot: "badge",
47      variant,
48      size,
49    },
50  });
51}
52 
53function BadgeIcon({ className, render, ...props }: useRender.ComponentProps<"span">) {
54  return useRender({
55    defaultTagName: "span",
56    props: mergeProps<"span">(
57      {
58        className: cn(styles.iconContainer, className),
59      },
60      props
61    ),
62    render,
63    state: {
64      slot: "badge-icon",
65    },
66  });
67}
68 
69export { Badge, BadgeIcon };