From 6e14f4290c77a459fdd456bf1a0cf80e5c509b29 Mon Sep 17 00:00:00 2001
From: Saravana Achu Mac <saravanakumardb1@gmail.com>
Date: Thu, 7 May 2026 13:06:29 -0700
Subject: [PATCH] refactor(ui): use product primitives for settings tabs

---
 web/src/views/SettingsView.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/web/src/views/SettingsView.tsx b/web/src/views/SettingsView.tsx
index f1a9643..b047b3f 100644
--- a/web/src/views/SettingsView.tsx
+++ b/web/src/views/SettingsView.tsx
@@ -5,6 +5,7 @@ import { SettingsTab } from '../tabs/SettingsTab';
 import { AdminTab } from '../tabs/AdminTab';
 import { ConfigTab } from '../tabs/ConfigTab';
 import { PageHeader } from '../components/ui/page-header';
+import { Button } from '../components/ui/Primitives';
 
 type SettingsSection = 'Account' | 'Bot Config' | 'Admin Panel';
 
@@ -42,14 +43,17 @@ export function SettingsView() {
 
       <div className="tab-strip" style={{ marginBottom: 24 }}>
         {sections.map(s => (
-          <button
+          <Button
             key={s}
+            type="button"
             onClick={() => handleSectionChange(s)}
+            variant="ghost"
+            size="sm"
             className="tab-button"
             data-active={section === s}
           >
             {s}
-          </button>
+          </Button>
         ))}
       </div>