chore(fe): opal button migration (#8864)

web/src/app/admin/add-connector/page.tsx

@@ -2,7 +2,7 @@
 import * as SettingsLayouts from "@/layouts/settings-layouts";
 import { SourceCategory, SourceMetadata } from "@/lib/search/interfaces";
 import { listSourceMetadata } from "@/lib/sources";
-import Button from "@/refresh-components/buttons/Button";
+import { Button } from "@opal/components";
 import {
   useCallback,
   useContext,
@@ -254,9 +254,7 @@ export default function Page() {
         icon={route.icon}
         title={route.title}
         rightChildren={
-          <Button href="/admin/indexing/status" primary>
-            See Connectors
-          </Button>
+          <Button href="/admin/indexing/status">See Connectors</Button>
         }
         separator
       />

web/src/app/admin/agents/PersonaTable.tsx

@@ -16,9 +16,8 @@ import {
 } from "./lib";
 import { FiEdit2 } from "react-icons/fi";
 import { useUser } from "@/providers/UserProvider";
-import { Button as OpalButton } from "@opal/components";
+import { Button } from "@opal/components";
 import ConfirmationModalLayout from "@/refresh-components/layouts/ConfirmationModalLayout";
-import Button from "@/refresh-components/buttons/Button";
 import { SvgAlertCircle, SvgTrash } from "@opal/icons";
 import type { Route } from "next";
 
@@ -300,7 +299,7 @@ export function PersonasTable({
               <div key="edit" className="flex">
                 <div className="mr-auto my-auto">
                   {!persona.builtin_persona && isEditable ? (
-                    <OpalButton
+                    <Button
                       icon={SvgTrash}
                       prominence="tertiary"
                       onClick={() => openDeleteModal(persona)}

web/src/app/admin/api-key/OnyxApiKeyForm.tsx

@@ -2,7 +2,7 @@ import { Form, Formik } from "formik";
 import { toast } from "@/hooks/useToast";
 import { createApiKey, updateApiKey } from "./lib";
 import Modal from "@/refresh-components/Modal";
-import Button from "@/refresh-components/buttons/Button";
+import { Button } from "@opal/components";
 import Text from "@/refresh-components/texts/Text";
 import InputTypeIn from "@/refresh-components/inputs/InputTypeIn";
 import InputComboBox from "@/refresh-components/inputs/InputComboBox";

web/src/app/admin/api-key/page.tsx

@@ -27,7 +27,7 @@ import {
   DISCORD_SERVICE_API_KEY_NAME,
 } from "@/app/admin/api-key/types";
 import CreateButton from "@/refresh-components/buttons/CreateButton";
-import Button from "@/refresh-components/buttons/Button";
+import { Button } from "@opal/components";
 import CopyIconButton from "@/refresh-components/buttons/CopyIconButton";
 import Text from "@/refresh-components/texts/Text";
 import { SvgEdit, SvgKey, SvgRefreshCw } from "@opal/icons";
@@ -161,11 +161,11 @@ function Main() {
                 <TableRow key={apiKey.api_key_id}>
                   <TableCell>
                     <Button
-                      internal
+                      prominence="internal"
                       onClick={() => handleEdit(apiKey)}
-                      leftIcon={SvgEdit}
+                      icon={SvgEdit}
                     >
-                      {apiKey.api_key_name || <i>null</i>}
+                      {apiKey.api_key_name || "null"}
                     </Button>
                   </TableCell>
                   <TableCell className="max-w-64">
@@ -176,8 +176,8 @@ function Main() {
                   </TableCell>
                   <TableCell>
                     <Button
-                      internal
-                      leftIcon={SvgRefreshCw}
+                      prominence="internal"
+                      icon={SvgRefreshCw}
                       onClick={async () => {
                         setKeyIsGenerating(true);
                         const response = await regenerateApiKey(apiKey);

web/src/app/admin/billing/BillingDetailsView.tsx

@@ -7,6 +7,7 @@ import { Content } from "@opal/layouts";
 import * as InputLayouts from "@/layouts/input-layouts";
 import Card from "@/refresh-components/cards/Card";
 import Button from "@/refresh-components/buttons/Button";
+import { Button as OpalButton } from "@opal/components";
 import Text from "@/refresh-components/texts/Text";
 import Message from "@/refresh-components/messages/Message";
 import InfoBlock from "@/refresh-components/messages/InfoBlock";
@@ -244,25 +245,20 @@ function SubscriptionCard({
               to make changes.
             </Text>
           ) : disabled ? (
-            <Button
-              main
-              secondary
+            <OpalButton
+              prominence="secondary"
               onClick={handleReconnect}
               rightIcon={SvgArrowRight}
               disabled={isReconnecting}
             >
               {isReconnecting ? "Connecting..." : "Connect to Stripe"}
-            </Button>
+            </OpalButton>
           ) : (
-            <Button
-              main
-              primary
-              onClick={handleManagePlan}
-              rightIcon={SvgExternalLink}
-            >
+            <OpalButton onClick={handleManagePlan} rightIcon={SvgExternalLink}>
               Manage Plan
-            </Button>
+            </OpalButton>
           )}
+          {/* TODO(@raunakab): migrate to opal Button once className/iconClassName is resolved */}
           <Button tertiary onClick={onViewPlans} className="billing-text-link">
             <Text secondaryBody text03>
               View Plan Details
@@ -379,9 +375,13 @@ function SeatsCard({
             sizePreset="main-content"
             variant="section"
           />
-          <Button main secondary onClick={handleCancel} disabled={isSubmitting}>
+          <OpalButton
+            prominence="secondary"
+            onClick={handleCancel}
+            disabled={isSubmitting}
+          >
             Cancel
-          </Button>
+          </OpalButton>
         </Section>
 
         <div className="billing-content-area">
@@ -463,16 +463,14 @@ function SeatsCard({
               No changes to your billing.
             </Text>
           )}
-          <Button
-            main
-            primary
+          <OpalButton
             onClick={handleConfirm}
             disabled={
               isSubmitting || newSeatCount === totalSeats || isBelowMinimum
             }
           >
             {isSubmitting ? "Saving..." : "Confirm Change"}
-          </Button>
+          </OpalButton>
         </Section>
       </Card>
     );
@@ -502,19 +500,22 @@ function SeatsCard({
           height="auto"
           width="auto"
         >
-          <Button main tertiary href="/admin/users" leftIcon={SvgExternalLink}>
+          <OpalButton
+            prominence="tertiary"
+            href="/admin/users"
+            icon={SvgExternalLink}
+          >
             View Users
-          </Button>
+          </OpalButton>
           {!hideUpdateSeats && (
-            <Button
-              main
-              secondary
+            <OpalButton
+              prominence="secondary"
               onClick={handleStartEdit}
-              leftIcon={SvgPlus}
+              icon={SvgPlus}
               disabled={isLoadingUsers || disabled || !billing}
             >
               Update Seats
-            </Button>
+            </OpalButton>
           )}
         </Section>
       </Section>
@@ -566,14 +567,13 @@ function PaymentSection({ billing }: { billing: BillingInformation }) {
                 title="Visa ending in 1234"
                 description="Payment method"
               />
-              <Button
-                main
-                tertiary
+              <OpalButton
+                prominence="tertiary"
                 onClick={handleOpenPortal}
                 rightIcon={SvgExternalLink}
               >
                 Update
-              </Button>
+              </OpalButton>
             </Section>
           </Card>
           {lastPaymentDate && (
@@ -589,14 +589,13 @@ function PaymentSection({ billing }: { billing: BillingInformation }) {
                   title={lastPaymentDate}
                   description="Last payment"
                 />
-                <Button
-                  main
-                  tertiary
+                <OpalButton
+                  prominence="tertiary"
                   onClick={handleOpenPortal}
                   rightIcon={SvgExternalLink}
                 >
                   View Invoice
-                </Button>
+                </OpalButton>
               </Section>
             </Card>
           )}

web/src/app/admin/billing/CheckoutView.tsx

@@ -3,7 +3,7 @@
 import { useState, useMemo, useEffect } from "react";
 import { Section } from "@/layouts/general-layouts";
 import * as InputLayouts from "@/layouts/input-layouts";
-import Button from "@/refresh-components/buttons/Button";
+import { Button } from "@opal/components";
 import Text from "@/refresh-components/texts/Text";
 import Card from "@/refresh-components/cards/Card";
 import Separator from "@/refresh-components/Separator";
@@ -176,7 +176,7 @@ export default function CheckoutView({ onAdjustPlan }: CheckoutViewProps) {
             Business
           </Text>
         </Section>
-        <Button secondary onClick={onAdjustPlan}>
+        <Button prominence="secondary" onClick={onAdjustPlan}>
           Adjust Plan
         </Button>
       </Section>
@@ -262,7 +262,7 @@ export default function CheckoutView({ onAdjustPlan }: CheckoutViewProps) {
           // Empty div to maintain space-between alignment
           <div></div>
         )}
-        <Button main primary onClick={handleSubmit} disabled={isSubmitting}>
+        <Button onClick={handleSubmit} disabled={isSubmitting}>
           {isSubmitting ? "Loading..." : "Continue to Payment"}
         </Button>
       </Section>

web/src/app/admin/billing/LicenseActivationCard.tsx

@@ -2,7 +2,7 @@
 
 import { useState } from "react";
 import Card from "@/refresh-components/cards/Card";
-import Button from "@/refresh-components/buttons/Button";
+import { Button } from "@opal/components";
 import Text from "@/refresh-components/texts/Text";
 import InputFile from "@/refresh-components/inputs/InputFile";
 import { Section } from "@/layouts/general-layouts";
@@ -119,11 +119,11 @@ export default function LicenseActivationCard({
             </Text>
           </Section>
           <Section flexDirection="row" gap={0.5} height="auto" width="auto">
-            <Button main secondary onClick={() => setShowInput(true)}>
+            <Button prominence="secondary" onClick={() => setShowInput(true)}>
               Update Key
             </Button>
             {!hideClose && (
-              <Button main tertiary onClick={handleClose}>
+              <Button prominence="tertiary" onClick={handleClose}>
                 Close
               </Button>
             )}
@@ -146,7 +146,11 @@ export default function LicenseActivationCard({
           <Text headingH3>
             {hasLicense ? "Update License Key" : "Activate License Key"}
           </Text>
-          <Button secondary onClick={handleClose} disabled={isActivating}>
+          <Button
+            prominence="secondary"
+            onClick={handleClose}
+            disabled={isActivating}
+          >
             Cancel
           </Button>
         </Section>
@@ -219,8 +223,6 @@ export default function LicenseActivationCard({
       {/* Footer */}
       <Section flexDirection="row" justifyContent="end" padding={1}>
         <Button
-          main
-          primary
           onClick={handleActivate}
           disabled={isActivating || !licenseKey.trim() || success}
         >

web/src/app/admin/billing/PlansView.tsx

@@ -21,6 +21,7 @@ import "@/app/admin/billing/billing.css";
 import type { IconProps } from "@opal/types";
 import Card from "@/refresh-components/cards/Card";
 import Button from "@/refresh-components/buttons/Button";
+import { Button as OpalButton } from "@opal/components";
 import Text from "@/refresh-components/texts/Text";
 import { Section } from "@/layouts/general-layouts";
 
@@ -146,26 +147,27 @@ function PlanCard({
         {/* Button */}
         <div className="plan-card-button">
           {isCurrentPlan ? (
+            // TODO(@raunakab): migrate to opal Button once className/iconClassName is resolved
             <Button tertiary transient className="pointer-events-none">
               <Text mainUiAction text03>
                 Your Current Plan
               </Text>
             </Button>
           ) : href ? (
-            <Button
-              main
-              secondary
+            <OpalButton
+              prominence="secondary"
               href={href}
               target="_blank"
               rel="noopener noreferrer"
             >
               {buttonLabel}
-            </Button>
+            </OpalButton>
           ) : onClick ? (
-            <Button main primary onClick={onClick} leftIcon={ButtonIcon}>
+            <OpalButton onClick={onClick} icon={ButtonIcon}>
               {buttonLabel}
-            </Button>
+            </OpalButton>
           ) : (
+            // TODO(@raunakab): migrate to opal Button once className/iconClassName is resolved
             <Button tertiary transient className="pointer-events-none">
               <Text mainUiAction text03>
                 Included in your plan

web/src/app/admin/billing/page.tsx

@@ -66,6 +66,7 @@ function FooterLinks({
           <Text secondaryBody text03>
             Have a license key?
           </Text>
+          {/* TODO(@raunakab): migrate to opal Button once className/iconClassName is resolved */}
           <Button action tertiary onClick={onActivateLicense}>
             <Text secondaryBody text05 className="underline">
               {licenseText}
@@ -73,6 +74,7 @@ function FooterLinks({
           </Button>
         </>
       )}
+      {/* TODO(@raunakab): migrate to opal Button once className/iconClassName is resolved */}
       <Button
         action
         tertiary

web/src/app/admin/bots/SlackBotUpdateForm.tsx

@@ -10,7 +10,7 @@ import { SourceIcon } from "@/components/SourceIcon";
 import { EditableStringFieldDisplay } from "@/components/EditableStringFieldDisplay";
 import { deleteSlackBot } from "./new/lib";
 import GenericConfirmModal from "@/components/modals/GenericConfirmModal";
-import Button from "@/refresh-components/buttons/Button";
+import { Button } from "@opal/components";
 import { cn } from "@/lib/utils";
 import { SvgChevronDownSmall, SvgTrash } from "@opal/icons";
 
@@ -106,20 +106,20 @@ export const ExistingSlackBotForm = ({
         <div className="flex flex-col" ref={dropdownRef}>
           <div className="flex items-center gap-4">
             <Button
-              leftIcon={({ className }) => (
+              prominence="secondary"
+              icon={({ className }) => (
                 <SvgChevronDownSmall
                   className={cn(className, !isExpanded && "-rotate-90")}
                 />
               )}
               onClick={() => setIsExpanded(!isExpanded)}
-              secondary
             >
               Update Tokens
             </Button>
             <Button
-              danger
+              variant="danger"
               onClick={() => setShowDeleteModal(true)}
-              leftIcon={SvgTrash}
+              icon={SvgTrash}
             >
               Delete
             </Button>

web/src/app/admin/bots/SlackTokensForm.tsx

@@ -4,7 +4,7 @@ import { TextFormField } from "@/components/Field";
 import { Form, Formik } from "formik";
 import * as Yup from "yup";
 import { createSlackBot, updateSlackBot } from "./new/lib";
-import Button from "@/refresh-components/buttons/Button";
+import { Button } from "@opal/components";
 import Separator from "@/refresh-components/Separator";
 import { useEffect } from "react";
 import { DOCS_ADMINS_PATH } from "@/lib/constants";

web/src/app/admin/bots/[bot-id]/SlackChannelConfigsTable.tsx

@@ -17,9 +17,8 @@ import type { Route } from "next";
 import { useState } from "react";
 import { deleteSlackChannelConfig, isPersonaASlackBotPersona } from "./lib";
 import { Card } from "@/components/ui/card";
-import Button from "@/refresh-components/buttons/Button";
 import CreateButton from "@/refresh-components/buttons/CreateButton";
-import { Button as OpalButton } from "@opal/components";
+import { Button } from "@opal/components";
 import { SvgSettings, SvgTrash } from "@opal/icons";
 const numToDisplay = 50;
 
@@ -45,11 +44,11 @@ export default function SlackChannelConfigsTable({
     <div className="space-y-8">
       <div className="flex justify-between items-center mb-6">
         <Button
+          prominence="secondary"
           onClick={() => {
             window.location.href = `/admin/bots/${slackBotId}/channels/${defaultConfig?.id}`;
           }}
-          secondary
-          leftIcon={SvgSettings}
+          icon={SvgSettings}
         >
           Edit Default Configuration
         </Button>
@@ -121,7 +120,7 @@ export default function SlackChannelConfigsTable({
                         </div>
                       </TableCell>
                       <TableCell onClick={(e) => e.stopPropagation()}>
-                        <OpalButton
+                        <Button
                           onClick={async (e) => {
                             e.stopPropagation();
                             const response = await deleteSlackChannelConfig(

web/src/app/admin/bots/[bot-id]/channels/SlackChannelConfigFormFields.tsx

@@ -11,7 +11,7 @@ import {
   TextArrayField,
   TextFormField,
 } from "@/components/Field";
-import Button from "@/refresh-components/buttons/Button";
+import { Button } from "@opal/components";
 import { MinimalPersonaSnapshot } from "@/app/admin/agents/interfaces";
 import DocumentSetCard from "@/sections/cards/DocumentSetCard";
 import CollapsibleSection from "@/app/admin/agents/CollapsibleSection";
@@ -598,7 +598,7 @@ export function SlackChannelConfigFormFields({
           </TooltipProvider>
         )}
         <Button type="submit">{isUpdate ? "Update" : "Create"}</Button>
-        <Button secondary onClick={() => router.back()}>
+        <Button prominence="secondary" onClick={() => router.back()}>
           Cancel
         </Button>
       </div>

web/src/app/admin/configuration/document-processing/page.tsx

@@ -2,7 +2,7 @@
 
 import { useState } from "react";
 import CardSection from "@/components/admin/CardSection";
-import Button from "@/refresh-components/buttons/Button";
+import { Button } from "@opal/components";
 import InputTypeIn from "@/refresh-components/inputs/InputTypeIn";
 import useSWR from "swr";
 import { ThreeDotsLoader } from "@/components/Loading";
@@ -129,7 +129,7 @@ function Main() {
             <div className="flex flex-col gap-2 desktop:flex-row desktop:items-center desktop:gap-2">
               {isApiKeySet ? (
                 <>
-                  <Button onClick={handleDelete} danger>
+                  <Button variant="danger" onClick={handleDelete}>
                     Delete API Key
                   </Button>
                   <Text as="p" mainContentBody text04 className="desktop:mt-0">
@@ -137,7 +137,7 @@ function Main() {
                   </Text>
                 </>
               ) : (
-                <Button onClick={handleSave} action>
+                <Button variant="action" onClick={handleSave}>
                   Save API Key
                 </Button>
               )}

web/src/app/admin/configuration/search/UpgradingPage.tsx

@@ -10,6 +10,7 @@ import {
 import Text from "@/components/ui/text";
 import Title from "@/components/ui/title";
 import Button from "@/refresh-components/buttons/Button";
+import { Button as OpalButton } from "@opal/components";
 import { useMemo, useState } from "react";
 import useSWR, { mutate } from "swr";
 import { ReindexingProgressTable } from "../../../../components/embedding/ReindexingProgressTable";
@@ -145,10 +146,13 @@ export default function UpgradingPage({
               </div>
             </Modal.Body>
             <Modal.Footer>
-              <Button onClick={onCancel}>Confirm</Button>
-              <Button onClick={() => setIsCancelling(false)} secondary>
+              <OpalButton onClick={onCancel}>Confirm</OpalButton>
+              <OpalButton
+                prominence="secondary"
+                onClick={() => setIsCancelling(false)}
+              >
                 Cancel
-              </Button>
+              </OpalButton>
             </Modal.Footer>
           </Modal.Content>
         </Modal>
@@ -163,6 +167,7 @@ export default function UpgradingPage({
               {futureEmbeddingModel.model_name}
             </div>
 
+            {/* TODO(@raunakab): migrate to opal Button once className/iconClassName is resolved */}
             <Button
               danger
               className="mt-4"

web/src/app/admin/configuration/search/page.tsx

@@ -5,7 +5,7 @@ import { errorHandlingFetcher } from "@/lib/fetcher";
 import * as SettingsLayouts from "@/layouts/settings-layouts";
 import Text from "@/components/ui/text";
 import Title from "@/components/ui/title";
-import Button from "@/refresh-components/buttons/Button";
+import { Button } from "@opal/components";
 import useSWR from "swr";
 import { ModelPreview } from "@/components/embedding/ModelSelector";
 import {
@@ -130,7 +130,7 @@ function Main() {
           </CardSection>
 
           <div className="mt-4">
-            <Button action href="/admin/embeddings">
+            <Button variant="action" href="/admin/embeddings">
               Update Search Settings
             </Button>
           </div>

web/src/app/admin/configuration/web-search/WebProviderSetupModal.tsx

@@ -6,7 +6,7 @@ import { FormField } from "@/refresh-components/form/FormField";
 import InputTypeIn from "@/refresh-components/inputs/InputTypeIn";
 import PasswordInputTypeIn from "@/refresh-components/inputs/PasswordInputTypeIn";
 import Modal from "@/refresh-components/Modal";
-import Button from "@/refresh-components/buttons/Button";
+import { Button } from "@opal/components";
 
 import { SvgArrowExchange, SvgOnyxLogo } from "@opal/icons";
 import type { IconProps } from "@opal/types";
@@ -244,13 +244,11 @@ export const WebProviderSetupModal = memo(
             )}
           </Modal.Body>
           <Modal.Footer>
-            <Button type="button" main secondary onClick={onClose}>
+            <Button prominence="secondary" type="button" onClick={onClose}>
               Cancel
             </Button>
             <Button
               type="button"
-              main
-              primary
               disabled={!canConnect || isProcessing}
               onClick={onConnect}
             >

web/src/app/admin/configuration/web-search/page.tsx

@@ -91,6 +91,7 @@ function HoverIconButton({
 }: HoverIconButtonProps) {
   return (
     <div onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
+      {/* TODO(@raunakab): migrate to opal Button once HoverIconButtonProps typing is resolved */}
       <Button {...buttonProps} rightIcon={isHovered ? SvgX : SvgCheckSquare}>
         {children}
       </Button>
@@ -1010,9 +1011,8 @@ export default function Page() {
                             {buttonState.label}
                           </HoverIconButton>
                         ) : (
-                          <Button
-                            action={false}
-                            tertiary
+                          <OpalButton
+                            prominence="tertiary"
                             disabled={
                               buttonState.disabled || !buttonState.onClick
                             }
@@ -1029,7 +1029,7 @@ export default function Page() {
                             }
                           >
                             {buttonState.label}
-                          </Button>
+                          </OpalButton>
                         )}
                       </div>
                     </div>
@@ -1202,9 +1202,8 @@ export default function Page() {
                           {buttonState.label}
                         </HoverIconButton>
                       ) : (
-                        <Button
-                          action={false}
-                          tertiary
+                        <OpalButton
+                          prominence="tertiary"
                           disabled={
                             buttonState.disabled || !buttonState.onClick
                           }
@@ -1221,7 +1220,7 @@ export default function Page() {
                           }
                         >
                           {buttonState.label}
-                        </Button>
+                        </OpalButton>
                       )}
                     </div>
                   </div>

web/src/app/admin/connector/[ccPairId]/ConfigDisplay.tsx

@@ -5,8 +5,7 @@ import { useState } from "react";
 import { ValidSources } from "@/lib/types";
 import { Section } from "@/layouts/general-layouts";
 import Text from "@/refresh-components/texts/Text";
-import IconButton from "@/refresh-components/buttons/IconButton";
-import Button from "@/refresh-components/buttons/Button";
+import { Button } from "@opal/components";
 import Separator from "@/refresh-components/Separator";
 import { SvgChevronUp, SvgChevronDown, SvgEdit } from "@opal/icons";
 import Truncated from "@/refresh-components/texts/Truncated";
@@ -119,16 +118,21 @@ function ConfigItem({ label, value, onEdit }: ConfigItemProps) {
 
         {isExpandable && (
           <Button
-            tertiary
+            prominence="tertiary"
             size="md"
-            leftIcon={isExpanded ? SvgChevronUp : SvgChevronDown}
+            icon={isExpanded ? SvgChevronUp : SvgChevronDown}
             onClick={() => setIsExpanded(!isExpanded)}
           >
             {isExpanded ? "Show less" : `Show all (${value.length} items)`}
           </Button>
         )}
         {onEdit && (
-          <IconButton icon={SvgEdit} tertiary onClick={onEdit} tooltip="Edit" />
+          <Button
+            prominence="tertiary"
+            icon={SvgEdit}
+            onClick={onEdit}
+            tooltip="Edit"
+          />
         )}
       </Section>
     </Section>

web/src/app/admin/connector/[ccPairId]/IndexAttemptErrorsModal.tsx

@@ -229,6 +229,7 @@ export default function IndexAttemptErrorsModal({
             <div className="flex w-full">
               <div className="flex gap-2 ml-auto">
                 {hasUnresolvedErrors && !isResolvingErrors && (
+                  // TODO(@raunakab): migrate to opal Button once className/iconClassName is resolved
                   <Button
                     onClick={onResolveAll}
                     className="ml-4 whitespace-nowrap"

web/src/app/admin/connector/[ccPairId]/InlineFileManagement.tsx

@@ -1,8 +1,7 @@
 "use client";
 
 import { useState, useRef } from "react";
-import Button from "@/refresh-components/buttons/Button";
-import { Button as OpalButton } from "@opal/components";
+import { Button } from "@opal/components";
 import {
   Table,
   TableBody,
@@ -176,26 +175,25 @@ export default function InlineFileManagement({
         <div className="flex gap-2">
           {!isEditing ? (
             <Button
+              prominence="secondary"
               onClick={() => setIsEditing(true)}
-              secondary
-              leftIcon={SvgEdit}
+              icon={SvgEdit}
             >
               Edit
             </Button>
           ) : (
             <>
               <Button
+                prominence="secondary"
                 onClick={handleCancel}
-                secondary
-                leftIcon={SvgX}
+                icon={SvgX}
                 disabled={isSaving}
               >
                 Cancel
               </Button>
               <Button
                 onClick={handleSaveClick}
-                primary
-                leftIcon={SvgCheck}
+                icon={SvgCheck}
                 disabled={
                   isSaving ||
                   (selectedFilesToRemove.size === 0 && filesToAdd.length === 0)
@@ -295,7 +293,7 @@ export default function InlineFileManagement({
                   >
                     {isEditing && (
                       <TableCell>
-                        <OpalButton
+                        <Button
                           icon={SvgX}
                           variant="danger"
                           prominence="tertiary"
@@ -335,9 +333,9 @@ export default function InlineFileManagement({
             id={`file-upload-${connectorId}`}
           />
           <Button
+            prominence="secondary"
             onClick={() => fileInputRef.current?.click()}
-            secondary
-            leftIcon={SvgPlusCircle}
+            icon={SvgPlusCircle}
             disabled={isSaving}
           >
             Add Files
@@ -398,8 +396,8 @@ export default function InlineFileManagement({
 
           <Modal.Footer>
             <Button
+              prominence="secondary"
               onClick={() => setShowSaveConfirm(false)}
-              secondary
               disabled={isSaving}
             >
               Cancel

web/src/app/admin/connector/[ccPairId]/ReIndexModal.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import Button from "@/refresh-components/buttons/Button";
+import { Button } from "@opal/components";
 import { useState } from "react";
 import { toast } from "@/hooks/useToast";
 import { triggerIndexing } from "@/app/admin/connector/[ccPairId]/lib";

web/src/app/admin/connector/[ccPairId]/page.tsx

@@ -62,7 +62,7 @@ import { DropdownMenuItemWithTooltip } from "@/components/ui/dropdown-menu-with-
 import { timeAgo } from "@/lib/time";
 import { useStatusChange } from "./useStatusChange";
 import { useReIndexModal } from "./ReIndexModal";
-import Button from "@/refresh-components/buttons/Button";
+import { Button } from "@opal/components";
 import { SvgSettings } from "@opal/icons";
 import { UserRole } from "@/lib/types";
 import { useUser } from "@/providers/UserProvider";
@@ -456,7 +456,7 @@ function Main({ ccPairId }: { ccPairId: number }) {
           {ccPair.is_editable_for_current_user && (
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
-                <Button leftIcon={SvgSettings} secondary>
+                <Button prominence="secondary" icon={SvgSettings}>
                   Manage
                 </Button>
               </DropdownMenuTrigger>

web/src/app/admin/connectors/[connector]/AddConnectorPage.tsx

@@ -55,7 +55,7 @@ import {
 } from "@/lib/connectors/oauth";
 import { CreateStdOAuthCredential } from "@/components/credentials/actions/CreateStdOAuthCredential";
 import { Spinner } from "@/components/Spinner";
-import Button from "@/refresh-components/buttons/Button";
+import { Button } from "@opal/components";
 import { deleteConnector } from "@/lib/connector";
 import ConnectorDocsLink from "@/components/admin/connectors/ConnectorDocsLink";
 import Text from "@/refresh-components/texts/Text";
@@ -580,7 +580,7 @@ export default function AddConnector({
                       {oauthSupportedSources.includes(connector) &&
                         (NEXT_PUBLIC_CLOUD_ENABLED || NEXT_PUBLIC_TEST_ENV) && (
                           <Button
-                            action
+                            variant="action"
                             onClick={handleAuthorize}
                             disabled={isAuthorizing}
                             hidden={!isAuthorizeVisible}

web/src/app/admin/connectors/[connector]/ConnectorWrapper.tsx

@@ -48,6 +48,7 @@ export default function ConnectorWrapper({
               <HeaderTitle>
                 <p>&lsquo;{connector}&rsquo; is not a valid Connector Type!</p>
               </HeaderTitle>
+              {/* TODO(@raunakab): migrate to opal Button once className/iconClassName is resolved */}
               <Button
                 onClick={() => window.open("/admin/indexing/status", "_self")}
                 className="mr-auto"

web/src/app/admin/connectors/[connector]/NavigationRow.tsx

@@ -1,5 +1,5 @@
 import { useFormContext } from "@/components/context/FormContext";
-import Button from "@/refresh-components/buttons/Button";
+import { Button } from "@opal/components";
 import { SvgArrowLeft, SvgArrowRight, SvgPlusCircle } from "@opal/icons";
 
 const NavigationRow = ({
@@ -22,7 +22,11 @@ const NavigationRow = ({
       <div>
         {((formStep > 0 && !noCredentials) ||
           (formStep > 1 && !noAdvanced)) && (
-          <Button secondary onClick={prevFormStep} leftIcon={SvgArrowLeft}>
+          <Button
+            prominence="secondary"
+            onClick={prevFormStep}
+            icon={SvgArrowLeft}
+          >
             Previous
           </Button>
         )}
@@ -41,7 +45,7 @@ const NavigationRow = ({
       <div className="flex justify-end">
         {formStep === 0 && (
           <Button
-            action
+            variant="action"
             disabled={!activatedCredential}
             rightIcon={SvgArrowRight}
             onClick={() => nextFormStep()}
@@ -51,7 +55,7 @@ const NavigationRow = ({
         )}
         {!noAdvanced && formStep === 1 && (
           <Button
-            secondary
+            prominence="secondary"
             disabled={!isValid}
             rightIcon={SvgArrowRight}
             onClick={() => nextFormStep()}

web/src/app/admin/connectors/[connector]/oauth/finalize/page.tsx

@@ -3,7 +3,7 @@
 import { useEffect, useState } from "react";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import { AdminPageTitle } from "@/components/admin/Title";
-import Button from "@/refresh-components/buttons/Button";
+import { Button } from "@opal/components";
 import { getSourceMetadata, isValidSource } from "@/lib/sources";
 import { ConfluenceAccessibleResource, ValidSources } from "@/lib/types";
 import CardSection from "@/components/admin/CardSection";

web/src/app/admin/connectors/[connector]/pages/Advanced.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import NumberInput from "./ConnectorInput/NumberInput";
 import { TextFormField } from "@/components/Field";
-import Button from "@/refresh-components/buttons/Button";
+import { Button } from "@opal/components";
 import { SvgTrash } from "@opal/icons";
 export default function AdvancedFormPage() {
   return (
@@ -35,7 +35,7 @@ export default function AdvancedFormPage() {
         name="indexingStart"
       />
       <div className="mt-4 flex w-full mx-auto max-w-2xl justify-start">
-        <Button leftIcon={SvgTrash} danger type="submit">
+        <Button variant="danger" icon={SvgTrash} type="submit">
           Reset
         </Button>
       </div>

web/src/app/admin/connectors/[connector]/pages/gdrive/Credential.tsx

@@ -10,7 +10,7 @@ import { DOCS_ADMINS_PATH } from "@/lib/constants";
 import { TextFormField, SectionHeader } from "@/components/Field";
 import { Form, Formik } from "formik";
 import { User } from "@/lib/types";
-import Button from "@/refresh-components/buttons/Button";
+import { Button } from "@opal/components";
 import {
   Credential,
   GoogleDriveCredentialJson,
@@ -314,7 +314,7 @@ export const DriveJsonUploadSection = ({
           {isAdmin && !existingAuthCredential && (
             <div className="mt-2">
               <Button
-                danger
+                variant="danger"
                 onClick={async () => {
                   const endpoint =
                     localServiceAccountData?.service_account_email
@@ -467,7 +467,7 @@ export const DriveAuthSection = ({
             </div>
           </div>
           <Button
-            danger
+            variant="danger"
             onClick={async () => {
               handleRevokeAccess(
                 connectorAssociated,

web/src/app/admin/connectors/[connector]/pages/gmail/Credential.tsx

@@ -1,4 +1,4 @@
-import Button from "@/refresh-components/buttons/Button";
+import { Button } from "@opal/components";
 import { toast } from "@/hooks/useToast";
 import React, { useState, useEffect } from "react";
 import { useSWRConfig } from "swr";
@@ -314,7 +314,7 @@ export const GmailJsonUploadSection = ({
           {isAdmin && !existingAuthCredential && (
             <div className="mt-2">
               <Button
-                danger
+                variant="danger"
                 onClick={async () => {
                   const endpoint =
                     localServiceAccountData?.service_account_email
@@ -470,7 +470,7 @@ export const GmailAuthSection = ({
           </div>
           <Section flexDirection="row" justifyContent="between" height="fit">
             <Button
-              danger
+              variant="danger"
               onClick={async () => {
                 handleRevokeAccess(
                   connectorExists,
@@ -482,10 +482,7 @@ export const GmailAuthSection = ({
               Revoke Access
             </Button>
             {buildMode && onCredentialCreated && (
-              <Button
-                primary
-                onClick={() => onCredentialCreated(existingCredential)}
-              >
+              <Button onClick={() => onCredentialCreated(existingCredential)}>
                 Continue
               </Button>
             )}

web/src/app/admin/debug/page.tsx

@@ -11,7 +11,7 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
-import Button from "@/refresh-components/buttons/Button";
+import { Button } from "@opal/components";
 import { Card } from "@/components/ui/card";
 import Text from "@/components/ui/text";
 import { Spinner } from "@/components/Spinner";
@@ -99,9 +99,9 @@ function Main() {
                     <TableCell className="font-medium">{category}</TableCell>
                     <TableCell>
                       <Button
+                        prominence="secondary"
                         onClick={() => handleDownload(category)}
-                        secondary
-                        leftIcon={SvgDownloadCloud}
+                        icon={SvgDownloadCloud}
                       >
                         Download Logs
                       </Button>

web/src/app/admin/discord-bot/BotConfigCard.tsx

@@ -4,7 +4,7 @@ import { useState } from "react";
 import { Section } from "@/layouts/general-layouts";
 import Text from "@/refresh-components/texts/Text";
 import Card from "@/refresh-components/cards/Card";
-import Button from "@/refresh-components/buttons/Button";
+import { Button } from "@opal/components";
 import { Badge } from "@/components/ui/badge";
 import PasswordInputTypeIn from "@/refresh-components/inputs/PasswordInputTypeIn";
 import { ThreeDotsLoader } from "@/components/Loading";
@@ -126,9 +126,9 @@ export function BotConfigCard() {
               disabled={!hasServerConfigs}
             >
               <Button
+                variant="danger"
                 onClick={() => setShowDeleteConfirm(true)}
                 disabled={isSubmitting || hasServerConfigs}
-                danger
               >
                 Delete Discord Token
               </Button>

web/src/app/admin/discord-bot/DiscordGuildsTable.tsx

@@ -12,7 +12,7 @@ import {
 } from "@/components/ui/table";
 import { Badge } from "@/components/ui/badge";
 import { DeleteButton } from "@/components/DeleteButton";
-import Button from "@/refresh-components/buttons/Button";
+import { Button } from "@opal/components";
 import Switch from "@/refresh-components/inputs/Switch";
 import { SvgEdit, SvgServer } from "@opal/icons";
 import EmptyMessage from "@/refresh-components/EmptyMessage";
@@ -116,10 +116,10 @@ export function DiscordGuildsTable({ guilds, onRefresh }: Props) {
             <TableRow key={guild.id}>
               <TableCell>
                 <Button
-                  internal
+                  prominence="internal"
                   disabled={!guild.guild_id}
                   onClick={() => router.push(`/admin/discord-bot/${guild.id}`)}
-                  leftIcon={SvgEdit}
+                  icon={SvgEdit}
                 >
                   {guild.guild_name || `Server #${guild.id}`}
                 </Button>

web/src/app/admin/discord-bot/[guild-id]/page.tsx

@@ -12,7 +12,7 @@ import Text from "@/refresh-components/texts/Text";
 import Card from "@/refresh-components/cards/Card";
 import { Callout } from "@/components/ui/callout";
 import Message from "@/refresh-components/messages/Message";
-import Button from "@/refresh-components/buttons/Button";
+import { Button } from "@opal/components";
 import { SvgServer } from "@opal/icons";
 import InputSelect from "@/refresh-components/inputs/InputSelect";
 import {
@@ -104,13 +104,17 @@ function GuildDetailContent({
                 width="fit"
                 gap={0.5}
               >
-                <Button onClick={handleEnableAll} disabled={disabled} secondary>
+                <Button
+                  prominence="secondary"
+                  onClick={handleEnableAll}
+                  disabled={disabled}
+                >
                   Enable All
                 </Button>
                 <Button
+                  prominence="secondary"
                   onClick={handleDisableAll}
                   disabled={disabled}
-                  secondary
                 >
                   Disable All
                 </Button>

web/src/app/admin/document-index-migration/page.tsx

@@ -200,6 +200,7 @@ function RetrievalSourceSection() {
       </InputSelect>
 
       {hasChanges && (
+        // TODO(@raunakab): migrate to opal Button once className/iconClassName is resolved
         <Button
           className="self-center"
           onClick={handleUpdate}

web/src/app/admin/documents/sets/DocumentSetCreationForm.tsx

@@ -257,6 +257,7 @@ export const DocumentSetCreationForm = ({
               </div>
 
               <div className="flex mt-6 pt-4 border-t border-border-02">
+                {/* TODO(@raunakab): migrate to opal Button once className/iconClassName is resolved */}
                 <Button
                   type="submit"
                   disabled={props.isSubmitting}

web/src/app/admin/embeddings/EmbeddingModelSelectionForm.tsx

@@ -27,7 +27,7 @@ import {
   EMBEDDING_PROVIDERS_ADMIN_URL,
 } from "@/lib/llmConfig/constants";
 import { AdvancedSearchConfiguration } from "@/app/admin/embeddings/interfaces";
-import Button from "@/refresh-components/buttons/Button";
+import { Button } from "@opal/components";
 
 export interface EmbeddingDetails {
   api_key?: string;
@@ -279,7 +279,7 @@ export default function EmbeddingModelSelection({
           {currentEmbeddingModel?.provider_type && (
             <div className="mt-2">
               <Button
-                secondary
+                prominence="secondary"
                 onClick={() => {
                   const allProviders = [
                     ...AVAILABLE_CLOUD_PROVIDERS,

web/src/app/admin/embeddings/RerankingFormPage.tsx

@@ -21,7 +21,7 @@ import {
   MixedBreadIcon,
 } from "@/components/icons/icons";
 import Modal from "@/refresh-components/Modal";
-import Button from "@/refresh-components/buttons/Button";
+import { Button } from "@opal/components";
 import { TextFormField } from "@/components/Field";
 import { SettingsContext } from "@/providers/SettingsProvider";
 import { SvgAlertTriangle, SvgKey } from "@opal/icons";

web/src/app/admin/embeddings/modals/AlreadyPickedModal.tsx

@@ -1,5 +1,5 @@
 import Modal from "@/refresh-components/Modal";
-import Button from "@/refresh-components/buttons/Button";
+import { Button } from "@opal/components";
 import { CloudEmbeddingModel } from "../../../../components/embedding/interfaces";
 import { SvgCheck } from "@opal/icons";
 

web/src/app/admin/embeddings/modals/ChangeCredentialsModal.tsx

@@ -268,6 +268,7 @@ export default function ChangeCredentialsModal({
                   </Callout>
                 )}
 
+                {/* TODO(@raunakab): migrate to opal Button once className/iconClassName is resolved */}
                 <Button
                   className="mr-auto mt-4"
                   onClick={() => handleSubmit()}
@@ -289,6 +290,7 @@ export default function ChangeCredentialsModal({
             embedding type!
           </Text>
 
+          {/* TODO(@raunakab): migrate to opal Button once className/iconClassName is resolved */}
           <Button className="mr-auto" onClick={handleDelete} danger>
             Delete Configuration
           </Button>

web/src/app/admin/embeddings/modals/DeleteCredentialsModal.tsx

@@ -1,6 +1,6 @@
 import Modal from "@/refresh-components/Modal";
 import Text from "@/refresh-components/texts/Text";
-import Button from "@/refresh-components/buttons/Button";
+import { Button } from "@opal/components";
 import { Callout } from "@/components/ui/callout";
 import {
   CloudEmbeddingProvider,
@@ -38,10 +38,10 @@ export default function DeleteCredentialsModal({
           <Callout type="danger" title="Point of No Return" />
         </Modal.Body>
         <Modal.Footer>
-          <Button secondary onClick={onCancel}>
+          <Button prominence="secondary" onClick={onCancel}>
             Keep Credentials
           </Button>
-          <Button danger onClick={onConfirm}>
+          <Button variant="danger" onClick={onConfirm}>
             Delete Credentials
           </Button>
         </Modal.Footer>

web/src/app/admin/embeddings/modals/InstantSwitchConfirmModal.tsx

@@ -1,5 +1,5 @@
 import Modal from "@/refresh-components/Modal";
-import Button from "@/refresh-components/buttons/Button";
+import { Button } from "@opal/components";
 import Text from "@/refresh-components/texts/Text";
 import { SvgAlertTriangle } from "@opal/icons";
 export interface InstantSwitchConfirmModalProps {
@@ -31,7 +31,7 @@ export default function InstantSwitchConfirmModal({
         </Modal.Body>
         <Modal.Footer>
           <Button onClick={onConfirm}>Confirm</Button>
-          <Button secondary onClick={onClose}>
+          <Button prominence="secondary" onClick={onClose}>
             Cancel
           </Button>
         </Modal.Footer>

web/src/app/admin/embeddings/modals/ModelSelectionModal.tsx

@@ -1,7 +1,7 @@
 import Modal from "@/refresh-components/Modal";
 import Text from "@/refresh-components/texts/Text";
 import { Callout } from "@/components/ui/callout";
-import Button from "@/refresh-components/buttons/Button";
+import { Button } from "@opal/components";
 import { HostedEmbeddingModel } from "@/components/embedding/interfaces";
 import { SvgServer } from "@opal/icons";
 
@@ -57,7 +57,7 @@ export default function ModelSelectionConfirmationModal({
         </Modal.Body>
         <Modal.Footer>
           <Button onClick={onConfirm}>Confirm</Button>
-          <Button secondary onClick={onCancel}>
+          <Button prominence="secondary" onClick={onCancel}>
             Cancel
           </Button>
         </Modal.Footer>

web/src/app/admin/embeddings/modals/ProviderCreationModal.tsx

@@ -1,11 +1,10 @@
 import React, { useRef, useState } from "react";
 import Text from "@/refresh-components/texts/Text";
 import { Callout } from "@/components/ui/callout";
-import Button from "@/refresh-components/buttons/Button";
+import { Button } from "@opal/components";
 import { Formik, Form } from "formik";
 import * as Yup from "yup";
 import { Label, TextFormField } from "@/components/Field";
-import { LoadingAnimation } from "@/components/Loading";
 import {
   CloudEmbeddingProvider,
   EmbeddingProvider,
@@ -14,6 +13,7 @@ import {
 import { EMBEDDING_PROVIDERS_ADMIN_URL } from "@/lib/llmConfig/constants";
 import Modal from "@/refresh-components/Modal";
 import { SvgSettings } from "@opal/icons";
+import SimpleLoader from "@/refresh-components/loaders/SimpleLoader";
 export interface ProviderCreationModalProps {
   updateCurrentModel: (
     newModel: string,
@@ -39,7 +39,6 @@ export default function ProviderCreationModal({
   const useFileUpload =
     selectedProvider.provider_type == EmbeddingProvider.GOOGLE;
 
-  const [isProcessing, setIsProcessing] = useState(false);
   const [errorMsg, setErrorMsg] = useState<string>("");
   const [fileName, setFileName] = useState<string>("");
 
@@ -110,7 +109,6 @@ export default function ProviderCreationModal({
     values: any,
     { setSubmitting }: { setSubmitting: (isSubmitting: boolean) => void }
   ) => {
-    setIsProcessing(true);
     setErrorMsg("");
     try {
       const customConfig = Object.fromEntries(values.custom_config);
@@ -141,7 +139,6 @@ export default function ProviderCreationModal({
       if (!initialResponse.ok) {
         const errorMsg = (await initialResponse.json()).detail;
         setErrorMsg(errorMsg);
-        setIsProcessing(false);
         setSubmitting(false);
         return;
       }
@@ -179,7 +176,6 @@ export default function ProviderCreationModal({
         setErrorMsg("An unknown error occurred");
       }
     } finally {
-      setIsProcessing(false);
       setSubmitting(false);
     }
   };
@@ -302,16 +298,15 @@ export default function ProviderCreationModal({
 
                 <Button
                   type="submit"
-                  className="w-full"
+                  width="full"
                   disabled={isSubmitting}
+                  icon={isSubmitting ? SimpleLoader : undefined}
                 >
-                  {isProcessing ? (
-                    <LoadingAnimation />
-                  ) : existingProvider ? (
-                    "Update"
-                  ) : (
-                    "Create"
-                  )}
+                  {isSubmitting
+                    ? "Submitting"
+                    : existingProvider
+                      ? "Update"
+                      : "Create"}
                 </Button>
               </Form>
             )}

web/src/app/admin/embeddings/modals/SelectModelModal.tsx

@@ -1,5 +1,5 @@
 import Modal from "@/refresh-components/Modal";
-import Button from "@/refresh-components/buttons/Button";
+import { Button } from "@opal/components";
 import Text from "@/refresh-components/texts/Text";
 import { CloudEmbeddingModel } from "@/components/embedding/interfaces";
 import { SvgServer } from "@opal/icons";
@@ -32,7 +32,7 @@ export default function SelectModelModal({
         </Modal.Body>
         <Modal.Footer>
           <Button onClick={onConfirm}>Confirm</Button>
-          <Button secondary onClick={onCancel}>
+          <Button prominence="secondary" onClick={onCancel}>
             Cancel
           </Button>
         </Modal.Footer>

web/src/app/admin/embeddings/pages/EmbeddingFormPage.tsx

@@ -6,6 +6,7 @@ import EmbeddingModelSelection from "../EmbeddingModelSelectionForm";
 import { useCallback, useEffect, useMemo, useState, useRef } from "react";
 import Text from "@/refresh-components/texts/Text";
 import Button from "@/refresh-components/buttons/Button";
+import { Button as OpalButton } from "@opal/components";
 import { WarningCircle, Warning, CaretDownIcon } from "@phosphor-icons/react";
 import {
   CloudEmbeddingModel,
@@ -247,6 +248,7 @@ export default function EmbeddingForm() {
       return needsReIndex ? (
         <div className="flex mx-auto gap-x-1 ml-auto items-center">
           <div className="flex items-center h-fit">
+            {/* TODO(@raunakab): migrate to opal Button once className/iconClassName is resolved */}
             <Button
               onClick={() => {
                 if (switchoverType == SwitchoverType.INSTANT) {
@@ -268,6 +270,7 @@ export default function EmbeddingForm() {
             </Button>
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
+                {/* TODO(@raunakab): migrate to opal Button once className/iconClassName is resolved */}
                 <Button
                   disabled={!isOverallFormValid}
                   action
@@ -373,7 +376,7 @@ export default function EmbeddingForm() {
         </div>
       ) : (
         <div className="flex mx-auto gap-x-1 ml-auto items-center">
-          <Button
+          <OpalButton
             onClick={() => {
               updateSearch();
               navigateToEmbeddingPage("search settings");
@@ -381,7 +384,7 @@ export default function EmbeddingForm() {
             disabled={!isOverallFormValid}
           >
             Update Search
-          </Button>
+          </OpalButton>
           {!isOverallFormValid &&
             Object.keys(combinedFormErrors).length > 0 && (
               <div className="relative group">
@@ -507,7 +510,8 @@ export default function EmbeddingForm() {
               />
             </CardSection>
             <div className="mt-4 flex w-full justify-end">
-              <Button
+              <OpalButton
+                variant="action"
                 onClick={() => {
                   if (
                     selectedProvider.model_name.includes("e5") &&
@@ -522,10 +526,9 @@ export default function EmbeddingForm() {
                   }
                 }}
                 rightIcon={SvgArrowRight}
-                action
               >
                 Continue
-              </Button>
+              </OpalButton>
             </div>
           </>
         )}
@@ -557,10 +560,13 @@ export default function EmbeddingForm() {
                 </div>
               </Modal.Body>
               <Modal.Footer>
-                <Button secondary onClick={() => setShowPoorModel(false)}>
+                <OpalButton
+                  prominence="secondary"
+                  onClick={() => setShowPoorModel(false)}
+                >
                   Cancel update
-                </Button>
-                <Button
+                </OpalButton>
+                <OpalButton
                   onClick={() => {
                     setShowPoorModel(false);
                     // Skip reranking step (step 1), go directly to advanced settings (step 2)
@@ -569,7 +575,7 @@ export default function EmbeddingForm() {
                   }}
                 >
                   {`Continue with ${selectedProvider.model_name}`}
-                </Button>
+                </OpalButton>
               </Modal.Footer>
             </Modal.Content>
           </Modal>
@@ -615,26 +621,26 @@ export default function EmbeddingForm() {
             </CardSection>
 
             <div className={`mt-4 w-full grid grid-cols-3`}>
-              <Button
-                leftIcon={SvgArrowLeft}
+              <OpalButton
+                prominence="secondary"
+                icon={SvgArrowLeft}
                 onClick={() => prevFormStep()}
-                secondary
               >
                 Previous
-              </Button>
+              </OpalButton>
 
               <ReIndexingButton needsReIndex={needsReIndex} />
 
               <div className="flex w-full justify-end">
-                <Button
+                <OpalButton
+                  prominence="secondary"
                   onClick={() => {
                     nextFormStep();
                   }}
                   rightIcon={SvgArrowRight}
-                  secondary
                 >
                   Advanced
-                </Button>
+                </OpalButton>
               </div>
             </div>
           </>
@@ -660,17 +666,17 @@ export default function EmbeddingForm() {
             </CardSection>
 
             <div className={`mt-4 grid  grid-cols-3 w-full `}>
-              <Button
+              <OpalButton
+                prominence="secondary"
                 onClick={() => {
                   // Skip reranking step (step 1), go back to embedding model (step 0)
                   prevFormStep();
                   prevFormStep();
                 }}
-                leftIcon={SvgArrowLeft}
-                secondary
+                icon={SvgArrowLeft}
               >
                 Previous
-              </Button>
+              </OpalButton>
 
               <ReIndexingButton needsReIndex={needsReIndex} />
             </div>

web/src/app/admin/embeddings/pages/OpenEmbeddingPage.tsx

@@ -62,6 +62,7 @@ export default function OpenEmbeddingPage({
         Onyx team.
       </Text>
       {!configureModel && (
+        // TODO(@raunakab): migrate to opal Button once className/iconClassName is resolved
         <Button
           onClick={() => setConfigureModel(true)}
           className="mt-4"

web/src/app/admin/indexing/status/FilterComponent.tsx

@@ -10,11 +10,10 @@ import {
   DropdownMenuTrigger,
   DropdownMenuCheckboxItem,
 } from "@/components/ui/dropdown-menu";
-import Button from "@/refresh-components/buttons/Button";
 import { Input } from "@/components/ui/input";
 import { Badge } from "@/components/ui/badge";
 import { AccessType, ValidStatuses } from "@/lib/types";
-import { Button as OpalButton } from "@opal/components";
+import { Button } from "@opal/components";
 import { SvgFilter } from "@opal/icons";
 export interface FilterOptions {
   accessType: AccessType[] | null;
@@ -128,11 +127,7 @@ export const FilterComponent = forwardRef<
     <div className="relative">
       <DropdownMenu open={isOpen} onOpenChange={handleOpenChange}>
         <DropdownMenuTrigger asChild>
-          <OpalButton
-            icon={SvgFilter}
-            prominence="secondary"
-            transient={isOpen}
-          />
+          <Button icon={SvgFilter} prominence="secondary" transient={isOpen} />
         </DropdownMenuTrigger>
         <DropdownMenuContent
           align="end"
@@ -242,7 +237,7 @@ export const FilterComponent = forwardRef<
             >
               <div className="flex gap-2">
                 <Button
-                  secondary={docsOperator !== ">"}
+                  prominence={docsOperator !== ">" ? "secondary" : "primary"}
                   onClick={(e) => {
                     e.preventDefault();
                     e.stopPropagation();
@@ -253,7 +248,7 @@ export const FilterComponent = forwardRef<
                   &gt;
                 </Button>
                 <Button
-                  secondary={docsOperator !== "<"}
+                  prominence={docsOperator !== "<" ? "secondary" : "primary"}
                   onClick={(e) => {
                     e.preventDefault();
                     e.stopPropagation();
@@ -264,7 +259,7 @@ export const FilterComponent = forwardRef<
                   &lt;
                 </Button>
                 <Button
-                  secondary={docsOperator !== "="}
+                  prominence={docsOperator !== "=" ? "secondary" : "primary"}
                   onClick={(e) => {
                     e.preventDefault();
                     e.stopPropagation();
@@ -286,7 +281,7 @@ export const FilterComponent = forwardRef<
             </div>
             <div className="px-2 py-1.5">
               <Button
-                className="w-full"
+                width="full"
                 onClick={(e) => {
                   e.preventDefault();
                   e.stopPropagation();

web/src/app/admin/indexing/status/SearchAndFilterControls.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useState, useEffect } from "react";
-import Button from "@/refresh-components/buttons/Button";
+import { Button } from "@opal/components";
 import { Badge } from "@/components/ui/badge";
 import { FilterComponent, FilterOptions } from "./FilterComponent";
 import InputTypeIn from "@/refresh-components/inputs/InputTypeIn";

web/src/app/admin/indexing/status/page.tsx

@@ -8,7 +8,7 @@ import { ADMIN_ROUTE_CONFIG, ADMIN_PATHS } from "@/lib/admin-routes";
 import Text from "@/components/ui/text";
 import { useConnectorIndexingStatusWithPagination } from "@/lib/hooks";
 import { useToastFromQuery } from "@/hooks/useToast";
-import Button from "@/refresh-components/buttons/Button";
+import { Button } from "@opal/components";
 import { useVectorDbEnabled } from "@/providers/SettingsProvider";
 import { useState, useRef, useMemo, RefObject } from "react";
 import { FilterOptions } from "./FilterComponent";

web/src/app/admin/kg/KGEntityTypes.tsx

@@ -7,7 +7,7 @@ import CollapsibleCard from "@/components/CollapsibleCard";
 import { ValidSources } from "@/lib/types";
 import { FaCircleQuestion } from "react-icons/fa6";
 import { CheckmarkIcon } from "@/components/icons/icons";
-import Button from "@/refresh-components/buttons/Button";
+import { Button } from "@opal/components";
 import Text from "@/refresh-components/texts/Text";
 import InputTypeIn from "@/refresh-components/inputs/InputTypeIn";
 import { cn } from "@/lib/utils";
@@ -237,10 +237,7 @@ export default function KGEntityTypes({
           value={search}
           onChange={(event) => setSearch(event.target.value)}
         />
-        <Button
-          className="h-9"
-          onClick={allClosed ? handleExpandAll : handleCollapseAll}
-        >
+        <Button onClick={allClosed ? handleExpandAll : handleCollapseAll}>
           {allClosed ? "Expand All" : "Collapse All"}
         </Button>
       </div>

web/src/app/admin/kg/page.tsx

@@ -9,7 +9,7 @@ import {
 } from "@/components/Field";
 import * as SettingsLayouts from "@/layouts/settings-layouts";
 import Modal from "@/refresh-components/Modal";
-import Button from "@/refresh-components/buttons/Button";
+import { Button } from "@opal/components";
 import SwitchField from "@/refresh-components/form/SwitchField";
 import { Form, Formik, FormikState, useFormikContext } from "formik";
 import { useState } from "react";
@@ -274,7 +274,7 @@ function Main() {
             entities you want to model afterwards.
           </Text>
           <Button
-            leftIcon={SvgSettings}
+            icon={SvgSettings}
             onClick={() => setConfigureModalShown(true)}
           >
             Configure Knowledge Graph

web/src/app/admin/token-rate-limits/CreateRateLimitModal.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import * as Yup from "yup";
-import Button from "@/refresh-components/buttons/Button";
+import { Button } from "@opal/components";
 import { useEffect, useState } from "react";
 import Modal from "@/refresh-components/Modal";
 import { Form, Formik } from "formik";

web/src/app/admin/users/page.tsx

@@ -18,7 +18,7 @@ import { InvitedUserSnapshot } from "@/lib/types";
 import { NEXT_PUBLIC_CLOUD_ENABLED } from "@/lib/constants";
 import PendingUsersTable from "@/components/admin/users/PendingUsersTable";
 import CreateButton from "@/refresh-components/buttons/CreateButton";
-import Button from "@/refresh-components/buttons/Button";
+import { Button } from "@opal/components";
 import InputTypeIn from "@/refresh-components/inputs/InputTypeIn";
 import { Spinner } from "@/components/Spinner";
 import { SvgDownloadCloud, SvgUserPlus } from "@opal/icons";
@@ -150,7 +150,7 @@ function UsersTables({
             <div className="flex justify-between items-center gap-1">
               <CardTitle>Current Users</CardTitle>
               <Button
-                leftIcon={SvgDownloadCloud}
+                icon={SvgDownloadCloud}
                 disabled={isDownloadingUsers}
                 onClick={() => downloadAllUsers()}
               >

web/src/app/app/components/AppPopup.tsx

@@ -2,7 +2,7 @@
 
 import Modal from "@/refresh-components/Modal";
 import { SettingsContext } from "@/providers/SettingsProvider";
-import Button from "@/refresh-components/buttons/Button";
+import { Button } from "@opal/components";
 import Text from "@/refresh-components/texts/Text";
 import { FormField } from "@/refresh-components/form/FormField";
 import Checkbox from "@/refresh-components/inputs/Checkbox";

web/src/app/app/components/projects/ProjectContextPanel.tsx

@@ -7,7 +7,7 @@ import { useProjectsContext } from "@/providers/ProjectsContext";
 import FilePickerPopover from "@/refresh-components/popovers/FilePickerPopover";
 import type { ProjectFile } from "../../projects/projectsService";
 import { MinimalOnyxDocument } from "@/lib/search/interfaces";
-import Button from "@/refresh-components/buttons/Button";
+import { Button } from "@opal/components";
 
 import AddInstructionModal from "@/components/modals/AddInstructionModal";
 import UserFilesModal from "@/components/modals/UserFilesModal";
@@ -150,6 +150,7 @@ export default function ProjectContextPanel({
                 <Text as="p" headingH2 className="font-heading-h2">
                   {projectName}
                 </Text>
+                {/* TODO(@raunakab): migrate to opal Button once className/iconClassName is resolved */}
                 <IconButton
                   icon={SvgEdit}
                   internal
@@ -181,9 +182,9 @@ export default function ProjectContextPanel({
             )}
           </div>
           <Button
-            leftIcon={SvgAddLines}
+            prominence="tertiary"
+            icon={SvgAddLines}
             onClick={() => addInstructionModal.toggle(true)}
-            tertiary
           >
             Set Instructions
           </Button>

web/src/app/app/message/Resubmit.tsx

@@ -1,7 +1,7 @@
 import { useState } from "react";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { SvgChevronDown, SvgChevronRight } from "@opal/icons";
-import Button from "@/refresh-components/buttons/Button";
+import { Button } from "@opal/components";
 import CopyIconButton from "@/refresh-components/buttons/CopyIconButton";
 import { getErrorIcon, getErrorTitle } from "./errorHelpers";
 
@@ -59,10 +59,8 @@ export const ErrorBanner = ({
             <div className="mt-2 border-t border-neutral-200 dark:border-neutral-700 pt-2">
               <div className="flex flex-1 items-center justify-between">
                 <Button
-                  tertiary
-                  leftIcon={
-                    isStackTraceExpanded ? SvgChevronDown : SvgChevronRight
-                  }
+                  prominence="tertiary"
+                  icon={isStackTraceExpanded ? SvgChevronDown : SvgChevronRight}
                   onClick={() => setIsStackTraceExpanded(!isStackTraceExpanded)}
                 >
                   Stack trace

web/src/app/app/message/messageComponents/timeline/primitives/TimelineStepContent.tsx

@@ -2,8 +2,7 @@ import React, { FunctionComponent } from "react";
 import { cn } from "@/lib/utils";
 import { SvgFold, SvgExpand } from "@opal/icons";
 import { IconProps } from "@opal/types";
-import Button from "@/refresh-components/buttons/Button";
-import { Button as OpalButton } from "@opal/components";
+import { Button } from "@opal/components";
 import Text from "@/refresh-components/texts/Text";
 
 export interface TimelineStepContentProps {
@@ -51,8 +50,8 @@ export function TimelineStepContent({
             {showCollapseControls &&
               (buttonTitle ? (
                 <Button
+                  prominence="tertiary"
                   size="md"
-                  tertiary
                   onClick={onToggle}
                   rightIcon={
                     isExpanded ? SvgFold : CollapsedIconComponent || SvgExpand
@@ -61,7 +60,7 @@ export function TimelineStepContent({
                   {buttonTitle}
                 </Button>
               ) : (
-                <OpalButton
+                <Button
                   prominence="tertiary"
                   size="md"
                   onClick={onToggle}

web/src/app/auth/create-account/page.tsx

@@ -2,7 +2,7 @@
 
 import AuthFlowContainer from "@/components/auth/AuthFlowContainer";
 import { REGISTRATION_URL } from "@/lib/constants";
-import Button from "@/refresh-components/buttons/Button";
+import { Button } from "@opal/components";
 import Link from "next/link";
 import { SvgImport } from "@opal/icons";
 
@@ -24,8 +24,8 @@ export default function Page() {
         <div className="flex justify-center">
           <Button
             href={`${REGISTRATION_URL}/register`}
-            className="w-full"
-            leftIcon={SvgImport}
+            width="full"
+            icon={SvgImport}
           >
             Create New Organization
           </Button>

web/src/app/auth/error/page.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import AuthFlowContainer from "@/components/auth/AuthFlowContainer";
-import Button from "@/refresh-components/buttons/Button";
+import { Button } from "@opal/components";
 
 import { NEXT_PUBLIC_CLOUD_ENABLED } from "@/lib/constants";
 
@@ -35,7 +35,7 @@ const Page = () => {
           </ul>
         </div>
 
-        <Button href="/auth/login" className="w-full">
+        <Button href="/auth/login" width="full">
           Return to Login Page
         </Button>
         <p className="text-sm text-text-500 text-center">

web/src/app/auth/forgot-password/page.tsx

@@ -5,7 +5,7 @@ import AuthFlowContainer from "@/components/auth/AuthFlowContainer";
 import Title from "@/components/ui/title";
 import Text from "@/components/ui/text";
 import Link from "next/link";
-import Button from "@/refresh-components/buttons/Button";
+import { Button } from "@opal/components";
 import { Form, Formik } from "formik";
 import * as Yup from "yup";
 import { TextFormField } from "@/components/Field";
@@ -63,11 +63,7 @@ const ForgotPasswordPage: React.FC = () => {
               />
 
               <div className="flex">
-                <Button
-                  type="submit"
-                  disabled={isSubmitting}
-                  className="mx-auto w-full"
-                >
+                <Button type="submit" disabled={isSubmitting} width="full">
                   Reset Password
                 </Button>
               </div>

web/src/app/auth/impersonate/page.tsx

@@ -9,7 +9,7 @@ import { Formik, Form, FormikHelpers } from "formik";
 import * as Yup from "yup";
 import { toast } from "@/hooks/useToast";
 import { TextFormField } from "@/components/Field";
-import Button from "@/refresh-components/buttons/Button";
+import { Button } from "@opal/components";
 import Text from "@/refresh-components/texts/Text";
 
 const ImpersonateSchema = Yup.object().shape({
@@ -89,7 +89,7 @@ export default function ImpersonatePage() {
                 placeholder="Enter API Key"
               />
 
-              <Button type="submit" className="w-full" disabled={isSubmitting}>
+              <Button type="submit" width="full" disabled={isSubmitting}>
                 Impersonate User
               </Button>
             </Form>

web/src/app/auth/login/EmailPasswordForm.tsx

@@ -2,7 +2,7 @@
 
 import { toast } from "@/hooks/useToast";
 import { basicLogin, basicSignup } from "@/lib/user";
-import Button from "@/refresh-components/buttons/Button";
+import { Button } from "@opal/components";
 import { Form, Formik } from "formik";
 import * as Yup from "yup";
 import { requestEmailVerification } from "../lib";
@@ -18,6 +18,7 @@ import { validateInternalRedirect } from "@/lib/auth/redirectValidation";
 import { APIFormFieldState } from "@/refresh-components/form/types";
 import { SvgArrowRightCircle } from "@opal/icons";
 import { useCaptcha } from "@/lib/hooks/useCaptcha";
+import Spacer from "@/refresh-components/Spacer";
 
 interface EmailPasswordFormProps {
   isSignup?: boolean;
@@ -239,9 +240,10 @@ export default function EmailPasswordForm({
                 )}
               />
 
+              <Spacer rem={0.25} />
               <Button
                 type="submit"
-                className="w-full mt-1"
+                width="full"
                 disabled={isSubmitting || !isValid || !dirty}
                 rightIcon={SvgArrowRightCircle}
               >

web/src/app/auth/login/LoginPage.tsx

@@ -7,7 +7,7 @@ import EmailPasswordForm from "./EmailPasswordForm";
 import { AuthType, NEXT_PUBLIC_FORGOT_PASSWORD_ENABLED } from "@/lib/constants";
 import { useSendAuthRequiredMessage } from "@/lib/extension/utils";
 import Text from "@/refresh-components/texts/Text";
-import Button from "@/refresh-components/buttons/Button";
+import { Button } from "@opal/components";
 import Message from "@/refresh-components/messages/Message";
 
 interface LoginPageProps {

web/src/app/auth/login/SignInButton.tsx

@@ -18,7 +18,7 @@
 
 "use client";
 
-import Button from "@/refresh-components/buttons/Button";
+import { Button } from "@opal/components";
 import { AuthType } from "@/lib/constants";
 import { FcGoogle } from "react-icons/fc";
 import type { IconProps } from "@opal/types";
@@ -32,7 +32,7 @@ export default function SignInButton({
   authorizeUrl,
   authType,
 }: SignInButtonProps) {
-  let button: React.ReactNode;
+  let button: string | undefined;
   let icon: React.FunctionComponent<IconProps> | undefined;
 
   if (authType === AuthType.GOOGLE_OAUTH || authType === AuthType.CLOUD) {
@@ -50,11 +50,13 @@ export default function SignInButton({
 
   return (
     <Button
-      secondary={
+      prominence={
         authType === AuthType.GOOGLE_OAUTH || authType === AuthType.CLOUD
+          ? "secondary"
+          : "primary"
       }
-      className="!w-full"
-      leftIcon={icon}
+      width="full"
+      icon={icon}
       href={authorizeUrl}
     >
       {button}

web/src/app/auth/reset-password/page.tsx

@@ -5,7 +5,7 @@ import AuthFlowContainer from "@/components/auth/AuthFlowContainer";
 import Title from "@/components/ui/title";
 import Text from "@/components/ui/text";
 import Link from "next/link";
-import Button from "@/refresh-components/buttons/Button";
+import { Button } from "@opal/components";
 import { Form, Formik } from "formik";
 import * as Yup from "yup";
 import { TextFormField } from "@/components/Field";
@@ -99,11 +99,7 @@ const ResetPasswordPage: React.FC = () => {
               />
 
               <div className="flex">
-                <Button
-                  type="submit"
-                  disabled={isSubmitting}
-                  className="mx-auto w-full"
-                >
+                <Button type="submit" disabled={isSubmitting} width="full">
                   Reset Password
                 </Button>
               </div>

web/src/app/craft/components/ChatPanel.tsx

@@ -401,6 +401,7 @@ export default function BuildChatPanel({
           </div>
           {/* Output panel toggle - only show when panel is fully closed (after animation) */}
           {isOutputPanelFullyClosed && (
+            // TODO(@raunakab): migrate to opal Button once className/iconClassName is resolved
             <IconButton
               icon={SvgSidebar}
               onClick={toggleOutputPanel}

web/src/app/craft/components/FileBrowser.tsx

@@ -2,7 +2,7 @@
 
 import { useState, useCallback, useEffect } from "react";
 import Text from "@/refresh-components/texts/Text";
-import Button from "@/refresh-components/buttons/Button";
+import { Button } from "@opal/components";
 import {
   Collapsible,
   CollapsibleContent,
@@ -180,9 +180,9 @@ function FileNode({ entry, sessionId, depth, onPreview }: FileNodeProps) {
       <div className="flex flex-row gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
         {canPreview && (
           <Button
-            action
-            tertiary
-            leftIcon={SvgEye}
+            variant="action"
+            prominence="tertiary"
+            icon={SvgEye}
             onClick={(e) => {
               e.stopPropagation();
               onPreview(entry);
@@ -196,7 +196,11 @@ function FileNode({ entry, sessionId, depth, onPreview }: FileNodeProps) {
           download={entry.name}
           onClick={(e) => e.stopPropagation()}
         >
-          <Button action tertiary leftIcon={SvgDownloadCloud}>
+          <Button
+            variant="action"
+            prominence="tertiary"
+            icon={SvgDownloadCloud}
+          >
             Download
           </Button>
         </a>

web/src/app/craft/components/FilePreviewModal.tsx

@@ -3,7 +3,7 @@
 import { useState, useEffect } from "react";
 import Modal from "@/refresh-components/Modal";
 import Text from "@/refresh-components/texts/Text";
-import Button from "@/refresh-components/buttons/Button";
+import { Button } from "@opal/components";
 import SimpleLoader from "@/refresh-components/loaders/SimpleLoader";
 import { SvgFileText, SvgDownloadCloud, SvgImage } from "@opal/icons";
 import { getArtifactUrl, FileSystemEntry } from "@/lib/build/client";
@@ -89,11 +89,15 @@ export default function FilePreviewModal({
         </Modal.Body>
         <Modal.Footer>
           <a href={downloadUrl} download={entry.name}>
-            <Button action secondary leftIcon={SvgDownloadCloud}>
+            <Button
+              variant="action"
+              prominence="secondary"
+              icon={SvgDownloadCloud}
+            >
               Download
             </Button>
           </a>
-          <Button action primary onClick={onClose}>
+          <Button variant="action" onClick={onClose}>
             Close
           </Button>
         </Modal.Footer>

web/src/app/craft/components/InputBar.tsx

@@ -406,6 +406,7 @@ const InputBar = memo(
               {/* Bottom right controls */}
               <div className="flex flex-row items-center gap-1">
                 {/* Submit button */}
+                {/* TODO(@raunakab): migrate to opal Button once className/iconClassName is resolved */}
                 <IconButton
                   icon={sandboxInitializing ? SvgLoader : SvgArrowUp}
                   onClick={handleSubmit}

web/src/app/craft/components/ShareButton.tsx

@@ -2,7 +2,7 @@
 
 import { useState, useEffect } from "react";
 import Text from "@/refresh-components/texts/Text";
-import Button from "@/refresh-components/buttons/Button";
+import { Button } from "@opal/components";
 import { SvgLink, SvgCopy, SvgCheck, SvgX } from "@opal/icons";
 import { setSessionSharing } from "@/app/craft/services/apiServices";
 import type { SharingScope } from "@/app/craft/types/streamingTypes";
@@ -98,10 +98,9 @@ export default function ShareButton({
       <Popover open={isOpen} onOpenChange={setIsOpen}>
         <Popover.Trigger asChild>
           <Button
-            action
-            primary={isShared}
-            tertiary={!isShared}
-            leftIcon={SvgLink}
+            variant="action"
+            prominence={isShared ? "primary" : "tertiary"}
+            icon={SvgLink}
             aria-label="Share webapp"
           >
             {isShared ? "Shared" : "Share"}
@@ -162,10 +161,10 @@ export default function ShareButton({
                     </Truncated>
                   </div>
                   <Button
-                    action
-                    tertiary
+                    variant="action"
+                    prominence="tertiary"
                     size="md"
-                    leftIcon={
+                    icon={
                       copyState === "copied"
                         ? SvgCheck
                         : copyState === "error"

web/src/app/craft/components/SideBar.tsx

@@ -33,7 +33,7 @@ import {
   SvgCheckCircle,
 } from "@opal/icons";
 import ConfirmationModalLayout from "@/refresh-components/layouts/ConfirmationModalLayout";
-import Button from "@/refresh-components/buttons/Button";
+import { Button } from "@opal/components";
 import SimpleLoader from "@/refresh-components/loaders/SimpleLoader";
 import TypewriterText from "@/app/craft/components/TypewriterText";
 import {
@@ -178,6 +178,7 @@ function BuildSessionButton({
     <>
       <Popover.Trigger asChild onClick={noProp()}>
         <div>
+          {/* TODO(@raunakab): migrate to opal Button once className/iconClassName is resolved */}
           <IconButton
             icon={SvgMoreHorizontal}
             className={cn(
@@ -270,19 +271,19 @@ function BuildSessionButton({
           twoTone={!isDeleting && !deleteSuccess && !deleteError}
           submit={
             deleteSuccess ? (
-              <Button action disabled leftIcon={SvgCheckCircle}>
+              <Button variant="action" disabled icon={SvgCheckCircle}>
                 Done
               </Button>
             ) : deleteError ? (
-              <Button danger onClick={closeModal}>
+              <Button variant="danger" onClick={closeModal}>
                 Close
               </Button>
             ) : (
               <Button
-                danger
+                variant="danger"
                 onClick={handleConfirmDelete}
                 disabled={isDeleting}
-                leftIcon={isDeleting ? SimpleLoader : undefined}
+                icon={isDeleting ? SimpleLoader : undefined}
               >
                 {isDeleting ? "Deleting..." : "Delete"}
               </Button>

web/src/app/craft/components/output-panel/ArtifactsTab.tsx

@@ -3,7 +3,7 @@
 import { useCallback, useEffect, useState } from "react";
 import useSWR from "swr";
 import Text from "@/refresh-components/texts/Text";
-import Button from "@/refresh-components/buttons/Button";
+import { Button } from "@opal/components";
 import {
   SvgGlobe,
   SvgDownloadCloud,
@@ -162,9 +162,9 @@ export default function ArtifactsTab({
 
               <div className="flex items-center gap-2">
                 <Button
-                  tertiary
-                  action
-                  leftIcon={SvgDownloadCloud}
+                  variant="action"
+                  prominence="tertiary"
+                  icon={SvgDownloadCloud}
                   onClick={handleWebappDownload}
                 >
                   Download
@@ -263,9 +263,9 @@ function OutputEntryRow({
 
         <div className="flex items-center gap-2">
           <Button
-            tertiary
-            action
-            leftIcon={SvgDownloadCloud}
+            variant="action"
+            prominence="tertiary"
+            icon={SvgDownloadCloud}
             onClick={(e) => {
               e.stopPropagation();
               onDownload(entry.path, entry.is_directory);

web/src/app/craft/components/output-panel/UrlBar.tsx

@@ -3,7 +3,7 @@
 import React from "react";
 import { cn } from "@/lib/utils";
 import Text from "@/refresh-components/texts/Text";
-import Button from "@/refresh-components/buttons/Button";
+import { Button } from "@opal/components";
 import {
   SvgDownloadCloud,
   SvgLoader,
@@ -154,9 +154,9 @@ export default function UrlBar({
         {/* Export button — shown for downloadable file previews (e.g. markdown → docx) */}
         {onDownload && (
           <Button
-            action
-            tertiary
-            leftIcon={isDownloading ? SpinningLoader : SvgExternalLink}
+            variant="action"
+            prominence="tertiary"
+            icon={isDownloading ? SpinningLoader : SvgExternalLink}
             disabled={isDownloading}
             onClick={onDownload}
           >

web/src/app/craft/v1/configure/components/ConfigureConnectorModal.tsx

@@ -13,7 +13,7 @@ import CredentialStep from "@/app/craft/v1/configure/components/CredentialStep";
 import ConnectorConfigStep from "@/app/craft/v1/configure/components/ConnectorConfigStep";
 import { OAUTH_STATE_KEY } from "@/app/craft/v1/constants";
 import { connectorConfigs } from "@/lib/connectors/connectors";
-import Button from "@/refresh-components/buttons/Button";
+import { Button } from "@opal/components";
 import { Section } from "@/layouts/general-layouts";
 
 type ModalStep = "credential" | "configure";
@@ -163,11 +163,11 @@ export default function ConfigureConnectorModal({
               <Section flexDirection="row" justifyContent="end" width="full">
                 <div className="pr-10">
                   <Button
+                    variant="action"
+                    prominence="tertiary"
                     rightIcon={SvgExternalLink}
                     href={getSourceDocLink(connectorType)!}
                     target="_blank"
-                    tertiary
-                    action
                   >
                     View setup documentation
                   </Button>

web/src/app/craft/v1/configure/components/ConnectorCard.tsx

@@ -11,7 +11,6 @@ import { SvgMoreHorizontal, SvgPlug, SvgSettings, SvgTrash } from "@opal/icons";
 import { Button } from "@opal/components";
 import { useRouter } from "next/navigation";
 import { cn } from "@/lib/utils";
-import IconButton from "@/refresh-components/buttons/IconButton";
 
 export type ConnectorStatus =
   | "not_connected"
@@ -98,7 +97,7 @@ export default function ConnectorCard({
   // Always-connected connectors show a settings icon
   // Regular connectors show popover menu when connected, plug icon when not
   const rightContent = isDeleting ? null : isAlwaysConnected ? (
-    <IconButton icon={SvgSettings} internal />
+    <Button prominence="internal" icon={SvgSettings} />
   ) : isConnected ? (
     <Popover open={popoverOpen} onOpenChange={setPopoverOpen}>
       <Popover.Trigger asChild>

web/src/app/craft/v1/configure/components/ConnectorConfigStep.tsx

@@ -3,7 +3,7 @@
 import { useState } from "react";
 import { Formik, Form, useFormikContext } from "formik";
 import { Section } from "@/layouts/general-layouts";
-import Button from "@/refresh-components/buttons/Button";
+import { Button } from "@opal/components";
 import { toast } from "@/hooks/useToast";
 import { ValidSources } from "@/lib/types";
 import { Credential } from "@/lib/connectors/credentials";
@@ -95,15 +95,14 @@ function ConnectorConfigForm({
             />
           ))}
         <Section flexDirection="row" justifyContent="between" height="fit">
-          <Button secondary onClick={onBack} disabled={isSubmitting}>
-            Back
-          </Button>
           <Button
-            primary
-            type="button"
-            onClick={handleSubmit}
+            prominence="secondary"
+            onClick={onBack}
             disabled={isSubmitting}
           >
+            Back
+          </Button>
+          <Button type="button" onClick={handleSubmit} disabled={isSubmitting}>
             {isSubmitting ? "Creating..." : "Create Connector"}
           </Button>
         </Section>

web/src/app/craft/v1/configure/components/CreateCredentialInline.tsx

@@ -5,7 +5,7 @@ import { Formik, Form } from "formik";
 import * as Yup from "yup";
 import { Section } from "@/layouts/general-layouts";
 import Text from "@/refresh-components/texts/Text";
-import Button from "@/refresh-components/buttons/Button";
+import { Button } from "@opal/components";
 import { TextFormField } from "@/components/Field";
 import { ValidSources } from "@/lib/types";
 import {
@@ -40,7 +40,7 @@ export default function CreateCredentialInline({
           No credential configuration available for {sourceMetadata.displayName}
           .
         </Text>
-        <Button action secondary onClick={onCancel}>
+        <Button variant="action" prominence="secondary" onClick={onCancel}>
           Cancel
         </Button>
       </Section>
@@ -150,16 +150,15 @@ export default function CreateCredentialInline({
               height="fit"
             >
               <Button
-                action
-                secondary
+                variant="action"
+                prominence="secondary"
                 onClick={onCancel}
                 disabled={isSubmitting}
               >
                 Cancel
               </Button>
               <Button
-                action
-                primary
+                variant="action"
                 type="submit"
                 disabled={!isValid || !dirty || isSubmitting}
               >

web/src/app/craft/v1/configure/components/CredentialStep.tsx

@@ -2,7 +2,7 @@
 
 import { useState } from "react";
 import { Section } from "@/layouts/general-layouts";
-import Button from "@/refresh-components/buttons/Button";
+import { Button } from "@opal/components";
 import Modal from "@/refresh-components/Modal";
 import { SvgKey } from "@opal/icons";
 import {
@@ -229,7 +229,7 @@ export default function CredentialStep({
                   ) &&
                     (NEXT_PUBLIC_CLOUD_ENABLED || NEXT_PUBLIC_TEST_ENV) && (
                       <Button
-                        action
+                        variant="action"
                         onClick={handleAuthorize}
                         disabled={isAuthorizing}
                         hidden={!isAuthorizeVisible}
@@ -244,7 +244,6 @@ export default function CredentialStep({
                 </div>
                 {hasCredentials && (
                   <Button
-                    primary
                     onClick={isSingleStep ? handleConnect : onContinue}
                     disabled={!selectedCredential || isConnecting}
                   >

web/src/app/craft/v1/configure/components/UserLibraryModal.tsx

@@ -12,7 +12,7 @@ import {
 } from "@/app/craft/services/apiServices";
 import { LibraryEntry } from "@/app/craft/types/user-library";
 import Text from "@/refresh-components/texts/Text";
-import Button from "@/refresh-components/buttons/Button";
+import { Button } from "@opal/components";
 import Modal from "@/refresh-components/Modal";
 import ShadowDiv from "@/refresh-components/ShadowDiv";
 import { Section } from "@/layouts/general-layouts";
@@ -245,10 +245,10 @@ export default function UserLibraryModal({
                   gap={0.5}
                   padding={0.5}
                 >
-                  <IconButton
+                  <Button
+                    prominence="secondary"
                     icon={SvgFolderPlus}
                     onClick={() => setShowNewFolderModal(true)}
-                    secondary
                     tooltip="New Folder"
                   />
                   <input
@@ -260,13 +260,13 @@ export default function UserLibraryModal({
                     disabled={isUploading}
                     accept=".xlsx,.xls,.docx,.doc,.pptx,.ppt,.csv,.json,.txt,.pdf,.zip"
                   />
-                  <IconButton
+                  <Button
+                    prominence="secondary"
                     icon={SvgUploadCloud}
                     onClick={() => handleUploadToFolder("/")}
                     disabled={isUploading}
                     tooltip={isUploading ? "Uploading..." : "Upload"}
                     aria-label={isUploading ? "Uploading..." : "Upload"}
-                    secondary
                   />
                 </Section>
 
@@ -373,7 +373,7 @@ export default function UserLibraryModal({
           </Modal.Body>
           <Modal.Footer>
             <Button
-              secondary
+              prominence="secondary"
               onClick={() => {
                 setShowNewFolderModal(false);
                 setNewFolderName("");
@@ -457,6 +457,7 @@ function LibraryTreeView({
 
               {/* Expand/collapse for directories */}
               {entry.is_directory ? (
+                // TODO(@raunakab): migrate to opal Button once it supports style prop
                 <IconButton
                   icon={SvgChevronRight}
                   onClick={() => onToggleFolder(entry.path)}
@@ -516,7 +517,8 @@ function LibraryTreeView({
                 height="fit"
               >
                 {entry.is_directory && (
-                  <IconButton
+                  <Button
+                    size="sm"
                     icon={SvgUploadCloud}
                     onClick={(e) => {
                       e.stopPropagation();
@@ -524,15 +526,14 @@ function LibraryTreeView({
                         entry.path.replace(/^user_library/, "") || "/";
                       onUploadToFolder(uploadPath);
                     }}
-                    small
                     tooltip="Upload to this folder"
                   />
                 )}
-                <IconButton
+                <Button
+                  variant="danger"
+                  size="sm"
                   icon={SvgTrash}
                   onClick={() => onDelete(entry)}
-                  small
-                  danger
                   tooltip="Delete"
                 />
               </Section>

web/src/app/craft/v1/configure/page.tsx

@@ -35,7 +35,7 @@ import {
 import { ConfirmEntityModal } from "@/components/modals/ConfirmEntityModal";
 import { getSourceMetadata } from "@/lib/sources";
 import { deleteConnector } from "@/app/craft/services/apiServices";
-import Button from "@/refresh-components/buttons/Button";
+import { Button } from "@opal/components";
 import {
   OAUTH_STATE_KEY,
   getDemoDataEnabled,
@@ -377,7 +377,7 @@ export default function BuildConfigPage() {
           rightChildren={
             <div className="flex items-center gap-2">
               <Button
-                secondary
+                prominence="secondary"
                 onClick={handleRestoreChanges}
                 disabled={!hasChanges || isUpdating}
               >

web/src/app/ee/admin/billing/BillingInformationPage.tsx

@@ -15,7 +15,7 @@ import {
   CardHeader,
   CardTitle,
 } from "@/components/ui/card";
-import Button from "@/refresh-components/buttons/Button";
+import { Button } from "@opal/components";
 import { SubscriptionSummary } from "./SubscriptionSummary";
 import { BillingAlerts } from "./BillingAlerts";
 import { SvgClipboard, SvgWallet } from "@opal/icons";
@@ -97,8 +97,8 @@ export default function BillingInformationPage() {
         <CardContent>
           <Button
             onClick={handleManageSubscription}
-            className="w-full"
-            leftIcon={SvgClipboard}
+            width="full"
+            icon={SvgClipboard}
           >
             Manage Subscription
           </Button>

web/src/app/ee/admin/groups/UserEditor.tsx

@@ -73,6 +73,7 @@ export const UserEditor = ({
           leftSearchIcon
         />
         {onSubmit && (
+          // TODO(@raunakab): migrate to opal Button once className/iconClassName is resolved
           <Button
             className="ml-3 flex-nowrap w-32"
             onClick={() => onSubmit(selectedUsers)}

web/src/app/ee/admin/groups/UserGroupCreationForm.tsx

@@ -134,6 +134,7 @@ export default function UserGroupCreationForm({
                   />
                 </div>
                 <div className="flex">
+                  {/* TODO(@raunakab): migrate to opal Button once className/iconClassName is resolved */}
                   <Button
                     type="submit"
                     disabled={isSubmitting}

web/src/app/ee/admin/groups/UserGroupsTable.tsx

@@ -70,6 +70,7 @@ export const UserGroupsTable = ({
               return (
                 <TableRow key={userGroup.id}>
                   <TableCell>
+                    {/* TODO(@raunakab): migrate to opal Button once className/iconClassName is resolved */}
                     <Button
                       internal
                       leftIcon={SvgEdit}

web/src/app/ee/admin/groups/[groupId]/AddConnectorForm.tsx

@@ -1,4 +1,4 @@
-import Button from "@/refresh-components/buttons/Button";
+import { Button } from "@opal/components";
 import Modal from "@/refresh-components/Modal";
 import { useState } from "react";
 import { updateUserGroup } from "./lib";

web/src/app/ee/admin/groups/[groupId]/GroupDisplay.tsx

@@ -26,7 +26,7 @@ import {
   TableRow,
 } from "@/components/ui/table";
 import SimpleTooltip from "@/refresh-components/SimpleTooltip";
-import Button from "@/refresh-components/buttons/Button";
+import { Button } from "@opal/components";
 import { DeleteButton } from "@/components/DeleteButton";
 import { Bubble } from "@/components/Bubble";
 import { BookmarkIcon, RobotIcon } from "@/components/icons/icons";
@@ -34,6 +34,7 @@ import { AddTokenRateLimitForm } from "./AddTokenRateLimitForm";
 import { GenericTokenRateLimitTable } from "@/app/admin/token-rate-limits/TokenRateLimitTables";
 import { useUser } from "@/providers/UserProvider";
 import GenericConfirmModal from "@/components/modals/GenericConfirmModal";
+import Spacer from "@/refresh-components/Spacer";
 
 interface GroupDisplayProps {
   users: User[];
@@ -467,12 +468,12 @@ export const GroupDisplay = ({
       />
 
       {isAdmin && (
-        <Button
-          className="mt-3"
-          onClick={() => setAddRateLimitFormVisible(true)}
-        >
-          Create a Token Rate Limit
-        </Button>
+        <>
+          <Spacer rem={0.75} />
+          <Button onClick={() => setAddRateLimitFormVisible(true)}>
+            Create a Token Rate Limit
+          </Button>
+        </>
       )}
     </div>
   );

web/src/app/ee/admin/performance/custom-analytics/CustomAnalyticsUpdateForm.tsx

@@ -3,11 +3,12 @@
 import { Label, SubLabel } from "@/components/Field";
 import { toast } from "@/hooks/useToast";
 import { SettingsContext } from "@/providers/SettingsProvider";
-import Button from "@/refresh-components/buttons/Button";
+import { Button } from "@opal/components";
 import { Callout } from "@/components/ui/callout";
 import Text from "@/components/ui/text";
 import { useContext, useState } from "react";
 import InputTextArea from "@/refresh-components/inputs/InputTextArea";
+import Spacer from "@/refresh-components/Spacer";
 
 export function CustomAnalyticsUpdateForm() {
   const settings = useContext(SettingsContext);
@@ -94,10 +95,8 @@ export function CustomAnalyticsUpdateForm() {
           value={secretKey}
           onChange={(e) => setSecretKey(e.target.value)}
         />
-
-        <Button className="mt-4" type="submit">
-          Update
-        </Button>
+        <Spacer rem={1} />
+        <Button type="submit">Update</Button>
       </form>
     </div>
   );

web/src/app/ee/admin/performance/query-history/KickoffCSVExport.tsx

@@ -111,6 +111,7 @@ export default function KickoffCSVExport({
 
   return (
     <div className="flex flex-1 flex-col w-full justify-center">
+      {/* TODO(@raunakab): migrate to opal Button once className/iconClassName is resolved */}
       <Button
         className="ml-auto"
         onClick={startExport}

web/src/app/ee/admin/performance/query-history/QueryHistoryTable.tsx

@@ -40,7 +40,7 @@ import {
 } from "@/app/ee/admin/performance/query-history/constants";
 import { humanReadableFormatWithTime } from "@/lib/time";
 import Modal from "@/refresh-components/Modal";
-import Button from "@/refresh-components/buttons/Button";
+import { Button } from "@opal/components";
 import { Badge } from "@/components/ui/badge";
 import {
   SvgDownloadCloud,
@@ -324,7 +324,7 @@ export function QueryHistoryTable() {
           </div>
           <div className="flex flex-row w-full items-center gap-x-2">
             <KickoffCSVExport dateRange={dateRange} />
-            <Button secondary onClick={() => setShowModal(true)}>
+            <Button prominence="secondary" onClick={() => setShowModal(true)}>
               {PREVIOUS_CSV_TASK_BUTTON_NAME}
             </Button>
           </div>

web/src/app/ee/admin/performance/usage/UsageReports.tsx

@@ -3,7 +3,7 @@
 import { format } from "date-fns";
 import { errorHandlingFetcher } from "@/lib/fetcher";
 
-import { FiDownload, FiDownloadCloud } from "react-icons/fi";
+import { FiDownload } from "react-icons/fi";
 import {
   Table,
   TableBody,
@@ -15,6 +15,7 @@ import {
 import Text from "@/components/ui/text";
 import Title from "@/components/ui/title";
 import Button from "@/refresh-components/buttons/Button";
+import { Button as OpalButton } from "@opal/components";
 import useSWR from "swr";
 import React, { useState } from "react";
 import { UsageReport } from "./types";
@@ -29,7 +30,7 @@ import Popover from "@/refresh-components/Popover";
 import Calendar from "@/refresh-components/Calendar";
 import { cn } from "@/lib/utils";
 import { Spinner } from "@/components/Spinner";
-import { SvgCalendar } from "@opal/icons";
+import { SvgCalendar, SvgDownloadCloud } from "@opal/icons";
 
 function GenerateReportInput({
   onReportGenerated,
@@ -102,6 +103,7 @@ function GenerateReportInput({
       <div className="grid gap-2 mb-3">
         <Popover>
           <Popover.Trigger asChild>
+            {/* TODO(@raunakab): migrate to opal Button once className/iconClassName is resolved */}
             <Button
               secondary
               className={cn(
@@ -142,9 +144,9 @@ function GenerateReportInput({
               disabled={(date) => date > new Date()}
             />
             <div className="border-t p-3">
-              <Button
-                tertiary
-                className="w-full justify-start"
+              <OpalButton
+                prominence="tertiary"
+                width="full"
                 onClick={() => {
                   setDateRange({
                     from: lastWeek,
@@ -154,10 +156,10 @@ function GenerateReportInput({
                 }}
               >
                 Last 7 days
-              </Button>
-              <Button
-                tertiary
-                className="w-full justify-start"
+              </OpalButton>
+              <OpalButton
+                prominence="tertiary"
+                width="full"
                 onClick={() => {
                   setDateRange({
                     from: lastMonth,
@@ -167,10 +169,10 @@ function GenerateReportInput({
                 }}
               >
                 Last 30 days
-              </Button>
-              <Button
-                tertiary
-                className="w-full justify-start"
+              </OpalButton>
+              <OpalButton
+                prominence="tertiary"
+                width="full"
                 onClick={() => {
                   setDateRange({
                     from: lastYear,
@@ -180,10 +182,10 @@ function GenerateReportInput({
                 }}
               >
                 Last year
-              </Button>
-              <Button
-                tertiary
-                className="w-full justify-start"
+              </OpalButton>
+              <OpalButton
+                prominence="tertiary"
+                width="full"
                 onClick={() => {
                   setDateRange({
                     from: new Date(1970, 0, 1),
@@ -193,19 +195,19 @@ function GenerateReportInput({
                 }}
               >
                 All time
-              </Button>
+              </OpalButton>
             </div>
           </Popover.Content>
         </Popover>
       </div>
-      <Button
+      <OpalButton
         color={"blue"}
-        leftIcon={FiDownloadCloud}
+        icon={SvgDownloadCloud}
         disabled={isLoading || isWaitingForReport}
         onClick={() => requestReport()}
       >
         {isWaitingForReport ? "Generating..." : "Generate Report"}
-      </Button>
+      </OpalButton>
       <p className="mt-1 text-xs">
         {isWaitingForReport
           ? "A report is currently being generated. Please wait..."

web/src/app/ee/admin/standard-answer/StandardAnswerCreationForm.tsx

@@ -198,6 +198,7 @@ export const StandardAnswerCreationForm = ({
                 />
               </div>
               <div className="py-4 flex">
+                {/* TODO(@raunakab): migrate to opal Button once className/iconClassName is resolved */}
                 <Button
                   type="submit"
                   disabled={isSubmitting}

web/src/app/ee/admin/theme/AppearanceThemeSettings.tsx

@@ -9,7 +9,7 @@ import InputTextArea from "@/refresh-components/inputs/InputTextArea";
 import Switch from "@/refresh-components/inputs/Switch";
 import CharacterCount from "@/refresh-components/CharacterCount";
 import InputImage from "@/refresh-components/inputs/InputImage";
-import Button from "@/refresh-components/buttons/Button";
+import { Button } from "@opal/components";
 import { useFormikContext } from "formik";
 import {
   forwardRef,
@@ -313,10 +313,10 @@ export const AppearanceThemeSettings = forwardRef<
           </FormField.Control>
           <div className="mt-2 w-full justify-center items-center flex">
             <Button
-              secondary
+              prominence="secondary"
               disabled={!hasLogo}
               onClick={handleLogoEdit}
-              leftIcon={SvgEdit}
+              icon={SvgEdit}
             >
               Update
             </Button>

web/src/app/ee/admin/theme/page.tsx

@@ -2,7 +2,7 @@
 
 import * as SettingsLayouts from "@/layouts/settings-layouts";
 import { ADMIN_ROUTE_CONFIG, ADMIN_PATHS } from "@/lib/admin-routes";
-import Button from "@/refresh-components/buttons/Button";
+import { Button } from "@opal/components";
 import {
   AppearanceThemeSettings,
   AppearanceThemeSettingsRef,

web/src/app/nrf/NRFChrome.tsx

@@ -7,7 +7,7 @@ import Text from "@/refresh-components/texts/Text";
 import Popover from "@/refresh-components/Popover";
 import { OpenButton } from "@opal/components";
 import LineItem from "@/refresh-components/buttons/LineItem";
-import IconButton from "@/refresh-components/buttons/IconButton";
+import { Button } from "@opal/components";
 import { SvgBubbleText, SvgSearchMenu, SvgSidebar } from "@opal/icons";
 import MinimalMarkdown from "@/components/chat/MinimalMarkdown";
 import { useSettingsContext } from "@/providers/SettingsProvider";
@@ -88,10 +88,10 @@ export default function NRFChrome() {
       {showHeader && (
         <div className="absolute top-0 left-0 p-4 z-10 flex flex-row items-center gap-2">
           {isMobile && (
-            <IconButton
+            <Button
+              prominence="internal"
               icon={SvgSidebar}
               onClick={() => setFolded(false)}
-              internal
             />
           )}
           {showModeToggle && (

web/src/app/nrf/NRFPage.tsx

@@ -5,9 +5,8 @@ import { useSearchParams } from "next/navigation";
 import { useUser } from "@/providers/UserProvider";
 import { toast } from "@/hooks/useToast";
 import { AuthType } from "@/lib/constants";
-import Button from "@/refresh-components/buttons/Button";
 import AppInputBar, { AppInputBarHandle } from "@/sections/input/AppInputBar";
-import IconButton from "@/refresh-components/buttons/IconButton";
+import { Button } from "@opal/components";
 import Modal from "@/refresh-components/Modal";
 import { useFilters, useLlmManager } from "@/lib/hooks";
 import Dropzone from "react-dropzone";
@@ -418,10 +417,10 @@ export default function NRFPage({ isSidePanel = false }: NRFPageProps) {
       {/* Settings button */}
       {!isSidePanel && (
         <div className="absolute top-0 right-0 p-4 z-10">
-          <IconButton
+          <Button
+            prominence="secondary"
             icon={SvgMenu}
             onClick={toggleSettings}
-            secondary
             tooltip="Open settings"
           />
         </div>
@@ -485,8 +484,12 @@ export default function NRFPage({ isSidePanel = false }: NRFPageProps) {
                 ref={chatInputBarRef}
                 deepResearchEnabled={deepResearchEnabled}
                 toggleDeepResearch={toggleDeepResearch}
+                toggleDocumentSidebar={() => {}}
                 filterManager={filterManager}
                 llmManager={llmManager}
+                removeDocs={() => {}}
+                retrievalEnabled={retrievalEnabled}
+                selectedDocuments={[]}
                 initialMessage={message}
                 stopGenerating={stopGenerating}
                 onSubmit={handleChatInputSubmit}
@@ -562,10 +565,13 @@ export default function NRFPage({ isSidePanel = false }: NRFPageProps) {
                 onClose={() => setShowTurnOffModal(false)}
               />
               <Modal.Footer>
-                <Button secondary onClick={() => setShowTurnOffModal(false)}>
+                <Button
+                  prominence="secondary"
+                  onClick={() => setShowTurnOffModal(false)}
+                >
                   Cancel
                 </Button>
-                <Button danger onClick={confirmTurnOff}>
+                <Button variant="danger" onClick={confirmTurnOff}>
                   Turn off
                 </Button>
               </Modal.Footer>
@@ -588,8 +594,8 @@ export default function NRFPage({ isSidePanel = false }: NRFPageProps) {
               ) : (
                 <div className="flex flex-col items-center">
                   <Button
-                    className="w-full"
-                    secondary
+                    width="full"
+                    prominence="secondary"
                     onClick={() => {
                       if (window.top) {
                         window.top.location.href = "/auth/login";
@@ -609,8 +615,8 @@ export default function NRFPage({ isSidePanel = false }: NRFPageProps) {
 
       {user && !llmManager.isLoadingProviders && !llmManager.hasAnyProvider && (
         <Button
-          className="w-full"
-          secondary
+          width="full"
+          prominence="secondary"
           onClick={() => {
             window.location.href = "/admin/configuration/llm";
           }}

web/src/app/nrf/side-panel/SidePanelHeader.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import Logo from "@/refresh-components/Logo";
-import IconButton from "@/refresh-components/buttons/IconButton";
+import { Button } from "@opal/components";
 import { SvgEditBig, SvgExternalLink } from "@opal/icons";
 
 interface SidePanelHeaderProps {
@@ -22,16 +22,16 @@ export default function SidePanelHeader({
     <header className="flex items-center justify-between px-4 py-3 border-b border-border-01 bg-background">
       <Logo />
       <div className="flex items-center gap-1">
-        <IconButton
+        <Button
+          prominence="tertiary"
           icon={SvgEditBig}
           onClick={onNewChat}
-          tertiary
           tooltip="New chat"
         />
-        <IconButton
+        <Button
+          prominence="tertiary"
           icon={SvgExternalLink}
           onClick={handleOpenInOnyx}
-          tertiary
           tooltip="Open in Onyx"
         />
       </div>

web/src/components/AdvancedOptionsToggle.tsx

@@ -13,6 +13,7 @@ export function AdvancedOptionsToggle({
   title,
 }: AdvancedOptionsToggleProps) {
   return (
+    // TODO(@raunakab): migrate to opal Button once className/iconClassName is resolved
     <Button
       internal
       leftIcon={({ className }) => (

web/src/components/EditableStringFieldDisplay.tsx

@@ -101,12 +101,14 @@ export function EditableStringFieldDisplay({
       {isEditing && isEditable ? (
         <>
           <div className={cn("flex", "flex-row")}>
+            {/* TODO(@raunakab): migrate to opal Button once className/iconClassName is resolved */}
             <IconButton
               onClick={handleUpdate}
               internal
               className="ml-2"
               icon={SvgCheck}
             />
+            {/* TODO(@raunakab): migrate to opal Button once className/iconClassName is resolved */}
             <IconButton
               onClick={resetEditing}
               internal

web/src/components/GenericMultiSelect.tsx

@@ -140,6 +140,7 @@ export function GenericMultiSelect<
       {selectedItems.length > 0 && (
         <div className="flex flex-wrap gap-2">
           {selectedItems.map((item) => (
+            // TODO(@raunakab): migrate to opal Button once className/iconClassName is resolved
             <Button
               key={item.id}
               secondary