From cb639704dd544568fc76e78c621aabd8076da29e Mon Sep 17 00:00:00 2001
From: Thanh Quy - wolf <524H0124@student.tdtu.edu.vn>
Date: Thu, 16 Apr 2026 00:21:13 +0700
Subject: [PATCH] fix: Add className prop to Button component for better
 styling flexibility

---
 components/atoms/buttons/Button.tsx      | 3 ++-
 components/atoms/buttons/Button.types.ts | 1 +
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/components/atoms/buttons/Button.tsx b/components/atoms/buttons/Button.tsx
index 8b42d2d..0a44d0a 100644
--- a/components/atoms/buttons/Button.tsx
+++ b/components/atoms/buttons/Button.tsx
@@ -8,6 +8,7 @@ export default function Button({
   size = "md",
   icon,
   iconPosition = "left",
+  className = "",
   disabled = false,
   children,
   ...props
@@ -43,7 +44,7 @@ export default function Button({
 
   return (
     <button
-      className={`${styles[style]} ${variants[variant]} ${sizes[size]}`}
+      className={`${styles[style]} ${variants[variant]} ${sizes[size]} ${className}`}
       disabled={disabled}
       {...props}
     >
diff --git a/components/atoms/buttons/Button.types.ts b/components/atoms/buttons/Button.types.ts
index aa08ee3..24fb94e 100644
--- a/components/atoms/buttons/Button.types.ts
+++ b/components/atoms/buttons/Button.types.ts
@@ -15,6 +15,7 @@ export interface ButtonProps extends Omit<
   size?: "sm" | "md" | "lg";
   icon?: string; // FontAwesome class like "fa-solid fa-cart-plus"
   iconPosition?: "left" | "right";
+  className?: string;
   disabled?: boolean;
   children: React.ReactNode;
 }