From 016667b2fab1b15340d6a55c29675fd1b57779da Mon Sep 17 00:00:00 2001
From: Ryan Crabbe <rcrabbe@berkeley.edu>
Date: Mon, 16 Mar 2026 15:04:22 -0700
Subject: [PATCH 1/2] chore(ui): migrate DefaultUserSettings buttons from
 Tremor to antd

---
 .../src/components/DefaultUserSettings.tsx       | 16 +++++++---------
 1 file changed, 7 insertions(+), 9 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/DefaultUserSettings.tsx b/ui/litellm-dashboard/src/components/DefaultUserSettings.tsx
index 988a3bcec92..9c38d628b95 100644
--- a/ui/litellm-dashboard/src/components/DefaultUserSettings.tsx
+++ b/ui/litellm-dashboard/src/components/DefaultUserSettings.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from "react";
-import { Card, Title, Text, Divider, Button, TextInput } from "@tremor/react";
-import { Typography, Spin, Switch, Select, InputNumber } from "antd";
+import { Card, Title, Text, Divider, TextInput } from "@tremor/react";
+import { Button, Typography, Spin, Switch, Select, InputNumber } from "antd";
 import { PlusOutlined, DeleteOutlined } from "@ant-design/icons";
 import { getInternalUserSettings, updateInternalUserSettings, modelAvailableCall } from "./networking";
 import BudgetDurationDropdown, { getBudgetDurationLabel } from "./common_components/budget_duration_dropdown";
@@ -160,9 +160,8 @@ const DefaultUserSettings: React.FC<DefaultUserSettingsProps> = ({
             <div className="flex items-center justify-between mb-3">
               <Text className="font-medium">Team {index + 1}</Text>
               <Button
-                size="sm"
-                variant="secondary"
-                icon={DeleteOutlined}
+                size="small"
+                icon={<DeleteOutlined />}
                 onClick={() => removeTeam(index)}
                 className="text-red-500 hover:text-red-700"
               >
@@ -208,7 +207,7 @@ const DefaultUserSettings: React.FC<DefaultUserSettingsProps> = ({
           </div>
         ))}
 
-        <Button variant="secondary" icon={PlusOutlined} onClick={addTeam} className="w-full">
+        <Button icon={<PlusOutlined />} onClick={addTeam} className="w-full">
           Add Team
         </Button>
       </div>
@@ -462,7 +461,6 @@ const DefaultUserSettings: React.FC<DefaultUserSettingsProps> = ({
           (isEditing ? (
             <div className="flex gap-2">
               <Button
-                variant="secondary"
                 onClick={() => {
                   setIsEditing(false);
                   setEditedValues(settings.values || {});
@@ -471,12 +469,12 @@ const DefaultUserSettings: React.FC<DefaultUserSettingsProps> = ({
               >
                 Cancel
               </Button>
-              <Button onClick={handleSaveSettings} loading={saving}>
+              <Button type="primary" onClick={handleSaveSettings} loading={saving}>
                 Save Changes
               </Button>
             </div>
           ) : (
-            <Button onClick={() => setIsEditing(true)}>Edit Settings</Button>
+            <Button type="primary" onClick={() => setIsEditing(true)}>Edit Settings</Button>
           ))}
       </div>
 

From 5befc025d8ebb41b5a7914e732ab862e8e05b0e4 Mon Sep 17 00:00:00 2001
From: Ryan Crabbe <rcrabbe@berkeley.edu>
Date: Mon, 16 Mar 2026 15:36:28 -0700
Subject: [PATCH 2/2] chore(ui): use antd danger prop instead of tailwind for
 Remove button

---
 ui/litellm-dashboard/src/components/DefaultUserSettings.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/litellm-dashboard/src/components/DefaultUserSettings.tsx b/ui/litellm-dashboard/src/components/DefaultUserSettings.tsx
index 9c38d628b95..314946c520b 100644
--- a/ui/litellm-dashboard/src/components/DefaultUserSettings.tsx
+++ b/ui/litellm-dashboard/src/components/DefaultUserSettings.tsx
@@ -161,9 +161,9 @@ const DefaultUserSettings: React.FC<DefaultUserSettingsProps> = ({
               <Text className="font-medium">Team {index + 1}</Text>
               <Button
                 size="small"
+                danger
                 icon={<DeleteOutlined />}
                 onClick={() => removeTeam(index)}
-                className="text-red-500 hover:text-red-700"
               >
                 Remove
               </Button>