From 6473d389178465746a3b353e7a534e6e42a5b88c Mon Sep 17 00:00:00 2001
From: Albert Zheng <zbinxp@gmail.com>
Date: Sat, 4 Apr 2026 11:21:04 +0800
Subject: [PATCH] fix(frontend): resolve button hydration mismatch with
 undefined variant/size (#1506)

Server-rendered data-variant={undefined} didn't match client hydration.
Now only render data-variant and data-size when explicitly set.

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
Co-authored-by: JeffJiang <for-eleven@hotmail.com>
---
 frontend/src/components/ui/button.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/ui/button.tsx b/frontend/src/components/ui/button.tsx
index f332e0d98..1c05b1abe 100644
--- a/frontend/src/components/ui/button.tsx
+++ b/frontend/src/components/ui/button.tsx
@@ -52,8 +52,8 @@ function Button({
   return (
     <Comp
       data-slot="button"
-      data-variant={variant}
-      data-size={size}
+      {...(variant !== undefined && { "data-variant": variant })}
+      {...(size !== undefined && { "data-size": size })}
       className={cn(buttonVariants({ variant, size, className }))}
       {...props}
     />