feat: simple Badge component

src/app/components/ui/Badge.tsx

@@ -0,0 +1,35 @@
+import { type VariantProps, cva } from "class-variance-authority";
+import { cn } from "lib/cn";
+import { type ElementRef, type HTMLAttributes, forwardRef } from "react";
+
+export const badgeVariants = cva(
+  "inline-flex items-center rounded-md px-2 transition-colors focus:outline-none focus-visible:ring-4 focus:ring-ring font-medium max-w-max gap-1.5 bg-badge-background text-badge-foreground",
+  {
+    variants: {
+      size: {
+        sm: "text-xs h-5",
+        md: "text-sm h-6",
+        lg: "text-base h-8",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+    },
+  },
+);
+
+export interface BadgeProps
+  extends HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+const Badge = forwardRef<ElementRef<"div">, BadgeProps>(
+  ({ className, size, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn(badgeVariants({ size }), className)}
+      {...props}
+    />
+  ),
+);
+
+export { Badge };

src/app/globals.css

@@ -100,6 +100,9 @@
     --button-success-foreground: #fff;
     --button-success-subtle: var(--green-300);
     --button-success-subtle-foreground: var(--green-500);
+
+    --badge-background: rgba(0, 0, 0, 0.06);
+    --badge-foreground: var(--foreground);
   }
 
   :root[data-theme="dark"],

src/stories/Badge.stories.tsx

@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Badge, type BadgeProps } from "app/components/ui/Badge";
+
+const meta: Meta<typeof Badge> = {
+  title: "Design system/Badge",
+  component: Badge,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Badge>;
+
+export const Default: Story = {
+  args: {
+    children: "Default",
+    size: "md",
+  },
+  argTypes: {
+    size: {
+      type: "string",
+      control: "select",
+      options: ["sm", "md", "lg"] satisfies BadgeProps["size"][],
+    },
+  },
+};

tailwind.config.ts

@@ -23,6 +23,10 @@ const config = {
         card: "var(--card)",
         image: "var(--image)",
         skeleton: "var(--skeleton)",
+        badge: {
+          background: "var(--badge-background)",
+          foreground: "var(--badge-foreground)"
+        }
       },
     },
   },