From 976a2afedee615f9631de4c118b7287db7fb9195 Mon Sep 17 00:00:00 2001
From: Ryan Crabbe <rcrabbe@berkeley.edu>
Date: Mon, 9 Mar 2026 17:20:48 -0700
Subject: [PATCH] Migrate user management buttons from Tremor to Ant Design

Replace Tremor Button components with antd Button in the user
management flow (Invite User, Bulk Invite Users, Select Users,
Bulk Edit, and onboarding modal copy link button).
---
 .../src/components/CreateUserButton.tsx       |  6 +-
 .../components/bulk_create_users_button.tsx   | 57 +++++++++----------
 .../src/components/onboarding_link.tsx        |  6 +-
 .../src/components/view_users.tsx             |  6 +-
 4 files changed, 37 insertions(+), 38 deletions(-)

diff --git a/ui/litellm-dashboard/src/components/CreateUserButton.tsx b/ui/litellm-dashboard/src/components/CreateUserButton.tsx
index c7c195835d..fbfcb40276 100644
--- a/ui/litellm-dashboard/src/components/CreateUserButton.tsx
+++ b/ui/litellm-dashboard/src/components/CreateUserButton.tsx
@@ -1,7 +1,7 @@
 import { InfoCircleOutlined, UserAddOutlined } from "@ant-design/icons";
 import { useQueryClient } from "@tanstack/react-query";
 import { useOrganizations } from "@/app/(dashboard)/hooks/organizations/useOrganizations";
-import { Accordion, AccordionBody, AccordionHeader, Button as Button2, SelectItem, TextInput } from "@tremor/react";
+import { Accordion, AccordionBody, AccordionHeader, SelectItem, TextInput } from "@tremor/react";
 import { Alert, Button, Form, Input, Modal, Select, Select as Select2, Space, Tooltip, Typography } from "antd";
 import React, { useEffect, useMemo, useState } from "react";
 import BulkCreateUsers from "./bulk_create_users_button";
@@ -229,9 +229,9 @@ export const CreateUserButton: React.FC<CreateuserProps> = ({
   // Original return for standalone mode
   return (
     <div className="flex gap-2">
-      <Button2 className="mb-0" onClick={() => setIsModalVisible(true)}>
+      <Button type="primary" className="mb-0" onClick={() => setIsModalVisible(true)}>
         + Invite User
-      </Button2>
+      </Button>
       <BulkCreateUsers accessToken={accessToken} teams={teams} possibleUIRoles={possibleUIRoles} />
       <Modal
         title="Invite User"
diff --git a/ui/litellm-dashboard/src/components/bulk_create_users_button.tsx b/ui/litellm-dashboard/src/components/bulk_create_users_button.tsx
index a2f964df08..4d0eb254d0 100644
--- a/ui/litellm-dashboard/src/components/bulk_create_users_button.tsx
+++ b/ui/litellm-dashboard/src/components/bulk_create_users_button.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from "react";
-import { Button as TremorButton, Text } from "@tremor/react";
-import { Modal, Table, Upload, Typography } from "antd";
+import { Text } from "@tremor/react";
+import { Button, Modal, Table, Upload, Typography } from "antd";
 import {
   UploadOutlined,
   DownloadOutlined,
@@ -540,9 +540,9 @@ const BulkCreateUsersButton: React.FC<BulkCreateUsersProps> = ({
 
   return (
     <>
-      <TremorButton className="mb-0" onClick={() => setIsModalVisible(true)}>
+      <Button type="primary" className="mb-0" onClick={() => setIsModalVisible(true)}>
         + Bulk Invite Users
-      </TremorButton>
+      </Button>
 
       <Modal
         title="Bulk Invite Users"
@@ -629,9 +629,9 @@ const BulkCreateUsersButton: React.FC<BulkCreateUsersProps> = ({
                   </div>
                 </div>
 
-                <TremorButton onClick={downloadTemplate} size="lg" className="w-full md:w-auto">
-                  <DownloadOutlined className="mr-2" /> Download CSV Template
-                </TremorButton>
+                <Button type="primary" size="large" className="w-full md:w-auto" icon={<DownloadOutlined />}>
+                  Download CSV Template
+                </Button>
               </div>
 
               <div className="flex items-center mb-4">
@@ -662,14 +662,14 @@ const BulkCreateUsersButton: React.FC<BulkCreateUsersProps> = ({
                           </Typography.Text>
                         </div>
                       </div>
-                      <TremorButton
-                        size="xs"
-                        variant="secondary"
+                      <Button
+                        size="small"
                         onClick={removeSelectedFile}
                         className="flex items-center"
+                        icon={<DeleteOutlined />}
                       >
-                        <DeleteOutlined className="mr-1" /> Remove
-                      </TremorButton>
+                        Remove
+                      </Button>
                     </div>
 
                     {fileError ? (
@@ -694,7 +694,7 @@ const BulkCreateUsersButton: React.FC<BulkCreateUsersProps> = ({
                       <UploadOutlined className="text-3xl text-gray-400 mb-2" />
                       <p className="mb-1">Drag and drop your CSV file here</p>
                       <p className="text-sm text-gray-500 mb-3">or</p>
-                      <TremorButton size="sm">Browse files</TremorButton>
+                      <Button size="small">Browse files</Button>
                       <p className="text-xs text-gray-500 mt-4">Only CSV files (.csv) are supported</p>
                     </div>
                   </Upload>
@@ -781,21 +781,21 @@ const BulkCreateUsersButton: React.FC<BulkCreateUsersProps> = ({
 
                   {!parsedData.some((user) => user.status === "success" || user.status === "failed") && (
                     <div className="flex space-x-3">
-                      <TremorButton
+                      <Button
                         onClick={() => {
                           setParsedData([]);
                           setParseError(null);
                         }}
-                        variant="secondary"
                       >
                         Back
-                      </TremorButton>
-                      <TremorButton
+                      </Button>
+                      <Button
+                        type="primary"
                         onClick={handleBulkCreate}
                         disabled={parsedData.filter((d) => d.isValid).length === 0 || isProcessing}
                       >
                         {isProcessing ? "Creating..." : `Create ${parsedData.filter((d) => d.isValid).length} Users`}
-                      </TremorButton>
+                      </Button>
                     </div>
                   )}
                 </div>
@@ -829,40 +829,39 @@ const BulkCreateUsersButton: React.FC<BulkCreateUsersProps> = ({
 
                 {!parsedData.some((user) => user.status === "success" || user.status === "failed") && (
                   <div className="flex justify-end mt-4">
-                    <TremorButton
+                    <Button
                       onClick={() => {
                         setParsedData([]);
                         setParseError(null);
                       }}
-                      variant="secondary"
                       className="mr-3"
                     >
                       Back
-                    </TremorButton>
-                    <TremorButton
+                    </Button>
+                    <Button
+                      type="primary"
                       onClick={handleBulkCreate}
                       disabled={parsedData.filter((d) => d.isValid).length === 0 || isProcessing}
                     >
                       {isProcessing ? "Creating..." : `Create ${parsedData.filter((d) => d.isValid).length} Users`}
-                    </TremorButton>
+                    </Button>
                   </div>
                 )}
 
                 {parsedData.some((user) => user.status === "success" || user.status === "failed") && (
                   <div className="flex justify-end mt-4">
-                    <TremorButton
+                    <Button
                       onClick={() => {
                         setParsedData([]);
                         setParseError(null);
                       }}
-                      variant="secondary"
                       className="mr-3"
                     >
                       Start New Bulk Import
-                    </TremorButton>
-                    <TremorButton onClick={downloadResults} variant="primary" className="flex items-center">
-                      <DownloadOutlined className="mr-2" /> Download User Credentials
-                    </TremorButton>
+                    </Button>
+                    <Button type="primary" onClick={downloadResults} icon={<DownloadOutlined />}>
+                      Download User Credentials
+                    </Button>
                   </div>
                 )}
               </div>
diff --git a/ui/litellm-dashboard/src/components/onboarding_link.tsx b/ui/litellm-dashboard/src/components/onboarding_link.tsx
index e6461d26a4..7eb337a970 100644
--- a/ui/litellm-dashboard/src/components/onboarding_link.tsx
+++ b/ui/litellm-dashboard/src/components/onboarding_link.tsx
@@ -1,7 +1,7 @@
 import React from "react";
-import { Modal, Typography } from "antd";
+import { Button, Modal, Typography } from "antd";
 import { CopyToClipboard } from "react-copy-to-clipboard";
-import { Text, Button } from "@tremor/react";
+import { Text } from "@tremor/react";
 import NotificationsManager from "./molecules/notifications_manager";
 
 export interface InvitationLink {
@@ -86,7 +86,7 @@ export default function OnboardingModal({
       </div>
       <div className="flex justify-end mt-5">
         <CopyToClipboard text={getInvitationUrl()} onCopy={() => NotificationsManager.success("Copied!")}>
-          <Button variant="primary">
+          <Button type="primary">
             {modalType === "invitation" ? "Copy invitation link" : "Copy password reset link"}
           </Button>
         </CopyToClipboard>
diff --git a/ui/litellm-dashboard/src/components/view_users.tsx b/ui/litellm-dashboard/src/components/view_users.tsx
index f4c821fb01..50123a8395 100644
--- a/ui/litellm-dashboard/src/components/view_users.tsx
+++ b/ui/litellm-dashboard/src/components/view_users.tsx
@@ -1,7 +1,7 @@
 import { Tab, TabGroup, TabList, TabPanel, TabPanels } from "@tremor/react";
 import React, { useEffect, useState } from "react";
 
-import { Button } from "@tremor/react";
+import { Button } from "antd";
 import BulkEditUserModal from "./BulkEditUsers";
 import { CreateUserButton } from "./CreateUserButton";
 import EditUserModal from "./edit_user";
@@ -309,7 +309,7 @@ const ViewUserDashboard: React.FC<ViewUserDashboardProps> = ({ accessToken, toke
               {isProxyAdmin && (
                 <Button
                   onClick={handleToggleSelectionMode}
-                  variant={selectionMode ? "primary" : "secondary"}
+                  type={selectionMode ? "primary" : "default"}
                   className="flex items-center"
                 >
                   {selectionMode ? "Cancel Selection" : "Select Users"}
@@ -317,7 +317,7 @@ const ViewUserDashboard: React.FC<ViewUserDashboardProps> = ({ accessToken, toke
               )}
 
               {isProxyAdmin && selectionMode && (
-                <Button onClick={handleBulkEdit} disabled={selectedUsers.length === 0} className="flex items-center">
+                <Button type="primary" onClick={handleBulkEdit} disabled={selectedUsers.length === 0} className="flex items-center">
                   Bulk Edit ({selectedUsers.length} selected)
                 </Button>
               )}