Badge ✅

Author: ariflogs

app/page.tsx

@@ -15,6 +15,7 @@ import {
   Avatar,
 } from "@/components";
 import { Login } from "@/components/Login";
+import { Badge } from "@/components/Badges";
 
 export default function page() {
   return (
@@ -43,6 +44,16 @@ export default function page() {
           <Button>Primary Button</Button>
         </div>
 
+        <div>
+          <H3>Badges</H3>
+          <div className="space-x-2 mt-2">
+            <Badge>Default Badge</Badge>
+            <Badge variant="error">Error Badge</Badge>
+            <Badge variant="success">Success Badge</Badge>
+            <Badge className="rounded-full">Rounded Badge</Badge>
+          </div>
+        </div>
+
         <div>
           <H3>Forms</H3>
           <Input />

components/Badges/Badge.tsx

@@ -0,0 +1,36 @@
+import React, { HTMLAttributes } from "react";
+
+const variants = {
+  default: "border-black text-black",
+  error: "border-red-600 text-red-600",
+  success: "border-green-600 text-green-600",
+};
+
+interface ButtonProps extends HTMLAttributes<HTMLSpanElement> {
+  size?: "sm" | "md" | "lg";
+  variant?: keyof typeof variants;
+  className?: string;
+}
+
+export function Badge({
+  children,
+  size = "md",
+  variant = "default",
+  className = "",
+  ...props
+}: ButtonProps) {
+  const sizeClasses = {
+    sm: "px-4 py-1 text-sm",
+    md: "px-2 py-1 text-sm",
+    lg: "px-8 py-3 text-lg",
+  };
+
+  return (
+    <span
+      className={`text-primary-foreground border-2 ${variants[variant]} ${sizeClasses[size]} ${className}`}
+      {...props}
+    >
+      {children}
+    </span>
+  );
+}

components/Badges/index.ts

@@ -0,0 +1 @@
+export * from "./Badge"