feat(components): Badge component

front/src/components/ui/badge.stories.tsx

@@ -0,0 +1,64 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import { Badge, BadgeProps } from "@/components/ui/badge";
+
+const meta: Meta<BadgeProps> = {
+	component: Badge,
+	title: "Badge",
+	args: {
+		size: "default",
+		children: "Badge content",
+		className: "",
+	},
+	argTypes: {
+		variant: {
+			type: "string",
+			control: "select",
+			options: ["default", "outline", "secondary", "destructive"],
+		},
+		size: {
+			type: "string",
+			control: "select",
+			options: ["default", "sm", "lg"],
+		},
+		className: {
+			type: "string",
+			control: "text",
+		},
+	},
+};
+type Story = StoryObj<BadgeProps>;
+
+const Render = (args: Meta<BadgeProps>) => <Badge {...args} />;
+
+export const Default: Story = {
+	args: {
+		variant: "default",
+		size: "default",
+	},
+	parameters: {
+		backgrounds: {
+			default: "light",
+		},
+	},
+	render: Render,
+};
+
+export const DarkMode: Story = {
+	args: {
+		variant: "default",
+		size: "default",
+	},
+	parameters: {
+		backgrounds: {
+			default: "dark",
+		},
+	},
+	render: (args) => (
+		<div className="dark">
+			<Render {...args} />
+		</div>
+	),
+};
+
+export default meta;

front/src/components/ui/badge.tsx

@@ -0,0 +1,35 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import React from "react";
+
+import { cn } from "@/lib/utils";
+
+const badgeVariants = cva(
+	"inline-flex items-center px-2 py-0.25 rounded-xl border font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+	{
+		variants: {
+			variant: {
+				default: "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
+				secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+				destructive: "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
+				outline: "text-foreground",
+			},
+			size: {
+				default: "h-6 text-xs",
+				sm: "text-xs",
+				lg: "h-8 text-sm",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+			size: "default",
+		},
+	},
+);
+
+export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, size, ...props }: BadgeProps) {
+	return <div className={cn(badgeVariants({ variant, size }), className)} {...props} />;
+}
+
+export { Badge, badgeVariants };

front/src/components/ui/button.tsx

@@ -40,7 +40,7 @@ export interface ButtonProps
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 	({ className, variant, size, asChild = false, ...props }, ref) => {
 		const Comp = asChild ? Slot : "button";
-		return <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />;
+		return <Comp className={cn(buttonVariants({ variant, size }), className)} ref={ref} {...props} />;
 	},
 );
 Button.displayName = "Button";