fix style

address comments
add dev
2026-03-03 14:45:46 +00:00 · 2026-03-02 19:55:17 -08:00 · 2026-03-02 19:47:20 -08:00 · 2026-03-02 16:15:03 -08:00 · 2026-03-02 16:11:06 -08:00 · 2026-03-02 15:59:47 -08:00
205 changed files with 729 additions and 738 deletions
--- a/backend/onyx/db/models.py
+++ b/backend/onyx/db/models.py
@@ -2822,8 +2822,17 @@ class LLMProvider(Base):
        postgresql.JSONB(), nullable=True
    )

+    # Deprecated: use LLMModelFlow with CHAT flow type instead
+    default_model_name: Mapped[str | None] = mapped_column(String, nullable=True)
+
    deployment_name: Mapped[str | None] = mapped_column(String, nullable=True)

+    # Deprecated: use LLMModelFlow.is_default with CHAT flow type instead
+    is_default_provider: Mapped[bool | None] = mapped_column(Boolean, nullable=True)
+    # Deprecated: use LLMModelFlow.is_default with VISION flow type instead
+    is_default_vision_provider: Mapped[bool | None] = mapped_column(Boolean)
+    # Deprecated: use LLMModelFlow with VISION flow type instead
+    default_vision_model: Mapped[str | None] = mapped_column(String, nullable=True)
    # EE only
    is_public: Mapped[bool] = mapped_column(Boolean, nullable=False, default=True)
    # Auto mode: models, visibility, and defaults are managed by GitHub config
--- a/backend/requirements/default.txt
+++ b/backend/requirements/default.txt
@@ -809,7 +809,7 @@ pypandoc-binary==1.16.2
    # via onyx
 pyparsing==3.2.5
    # via httplib2
-pypdf==6.7.5
+pypdf==6.7.4
    # via
    #   onyx
    #   unstructured-client
--- a/deployment/helm/charts/onyx/Chart.lock
+++ b/deployment/helm/charts/onyx/Chart.lock
@@ -19,6 +19,6 @@ dependencies:
  version: 5.4.0
 - name: code-interpreter
  repository: https://onyx-dot-app.github.io/python-sandbox/
-  version: 0.3.1
-digest: sha256:4965b6ea3674c37163832a2192cd3bc8004f2228729fca170af0b9f457e8f987
-generated: "2026-03-02T15:29:39.632344-08:00"
+  version: 0.3.0
+digest: sha256:cf8f01906d46034962c6ce894770621ee183ac761e6942951118aeb48540eddd
+generated: "2026-02-24T10:59:38.78318-08:00"
--- a/deployment/helm/charts/onyx/Chart.yaml
+++ b/deployment/helm/charts/onyx/Chart.yaml
@@ -45,6 +45,6 @@ dependencies:
    repository: https://charts.min.io/
    condition: minio.enabled
  - name: code-interpreter
-    version: 0.3.1
+    version: 0.3.0
    repository: https://onyx-dot-app.github.io/python-sandbox/
    condition: codeInterpreter.enabled
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -92,7 +92,7 @@ backend = [
    "python-gitlab==5.6.0",
    "python-pptx==0.6.23",
    "pypandoc_binary==1.16.2",
-    "pypdf==6.7.5",
+    "pypdf==6.7.4",
    "pytest-mock==3.12.0",
    "pytest-playwright==0.7.0",
    "python-docx==1.1.2",
--- a/uv.lock
+++ b/uv.lock
@@ -4678,7 +4678,7 @@ requires-dist = [
    { name = "pygithub", marker = "extra == 'backend'", specifier = "==2.5.0" },
    { name = "pympler", marker = "extra == 'backend'", specifier = "==1.1" },
    { name = "pypandoc-binary", marker = "extra == 'backend'", specifier = "==1.16.2" },
-    { name = "pypdf", marker = "extra == 'backend'", specifier = "==6.7.5" },
+    { name = "pypdf", marker = "extra == 'backend'", specifier = "==6.7.4" },
    { name = "pytest", marker = "extra == 'dev'", specifier = "==8.3.5" },
    { name = "pytest-alembic", marker = "extra == 'dev'", specifier = "==0.12.1" },
    { name = "pytest-asyncio", marker = "extra == 'dev'", specifier = "==1.3.0" },
@@ -5925,11 +5925,11 @@ wheels = [

 [[package]]
 name = "pypdf"
-version = "6.7.5"
+version = "6.7.4"
 source = { registry = "https://pypi.org/simple" }
-sdist = { url = "https://files.pythonhosted.org/packages/f6/52/37cc0aa9e9d1bf7729a737a0d83f8b3f851c8eb137373d9f71eafb0a3405/pypdf-6.7.5.tar.gz", hash = "sha256:40bb2e2e872078655f12b9b89e2f900888bb505e88a82150b64f9f34fa25651d", size = 5304278, upload-time = "2026-03-02T09:05:21.464Z" }
+sdist = { url = "https://files.pythonhosted.org/packages/09/dc/f52deef12797ad58b88e4663f097a343f53b9361338aef6573f135ac302f/pypdf-6.7.4.tar.gz", hash = "sha256:9edd1cd47938bb35ec87795f61225fd58a07cfaf0c5699018ae1a47d6f8ab0e3", size = 5304821, upload-time = "2026-02-27T10:44:39.395Z" }
 wheels = [
-    { url = "https://files.pythonhosted.org/packages/05/89/336673efd0a88956562658aba4f0bbef7cb92a6fbcbcaf94926dbc82b408/pypdf-6.7.5-py3-none-any.whl", hash = "sha256:07ba7f1d6e6d9aa2a17f5452e320a84718d4ce863367f7ede2fd72280349ab13", size = 331421, upload-time = "2026-03-02T09:05:19.722Z" },
+    { url = "https://files.pythonhosted.org/packages/c1/be/cded021305f5c81b47265b8c5292b99388615a4391c21ff00fd538d34a56/pypdf-6.7.4-py3-none-any.whl", hash = "sha256:527d6da23274a6c70a9cb59d1986d93946ba8e36a6bc17f3f7cce86331492dda", size = 331496, upload-time = "2026-02-27T10:44:37.527Z" },
 ]

 [[package]]
--- a/web/lib/opal/src/icons/bookmark.tsx
+++ b/web/lib/opal/src/icons/bookmark.tsx
@@ -1,20 +0,0 @@
-import type { IconProps } from "@opal/types";
-const SvgBookmark = ({ size, ...props }: IconProps) => (
-  <svg
-    width={size}
-    height={size}
-    viewBox="0 0 16 16"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    stroke="currentColor"
-    {...props}
-  >
-    <path
-      d="M12.6667 14L7.99999 10.6667L3.33333 14V3.33333C3.33333 2.97971 3.4738 2.64057 3.72385 2.39052C3.9739 2.14048 4.31304 2 4.66666 2H11.3333C11.6869 2 12.0261 2.14048 12.2761 2.39052C12.5262 2.64057 12.6667 2.97971 12.6667 3.33333V14Z"
-      strokeWidth={1.5}
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  </svg>
-);
-export default SvgBookmark;
--- a/web/lib/opal/src/icons/index.ts
+++ b/web/lib/opal/src/icons/index.ts
@@ -25,7 +25,6 @@ export { default as SvgBarChartSmall } from "@opal/icons/bar-chart-small";
 export { default as SvgBell } from "@opal/icons/bell";
 export { default as SvgBlocks } from "@opal/icons/blocks";
 export { default as SvgBookOpen } from "@opal/icons/book-open";
-export { default as SvgBookmark } from "@opal/icons/bookmark";
 export { default as SvgBooksLineSmall } from "@opal/icons/books-line-small";
 export { default as SvgBooksStackSmall } from "@opal/icons/books-stack-small";
 export { default as SvgBracketCurly } from "@opal/icons/bracket-curly";
--- a/web/next.config.js
+++ b/web/next.config.js
@@ -78,16 +78,6 @@ const nextConfig = {
  },
  async rewrites() {
    return [
-      {
-        source: "/ph_ingest/static/:path*",
-        destination: "https://us-assets.i.posthog.com/static/:path*",
-      },
-      {
-        source: "/ph_ingest/:path*",
-        destination: `${
-          process.env.NEXT_PUBLIC_POSTHOG_HOST || "https://us.i.posthog.com"
-        }/:path*`,
-      },
      {
        source: "/api/docs/:path*", // catch /api/docs and /api/docs/...
        destination: `${
--- a/web/src/app/admin/add-connector/page.tsx
+++ b/web/src/app/admin/add-connector/page.tsx
@@ -2,7 +2,7 @@
 import { AdminPageTitle } from "@/components/admin/Title";
 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,
@@ -253,9 +253,7 @@ export default function Page() {
        icon={SvgUploadCloud}
        title="Add Connector"
        farRightElement={
-          <Button href="/admin/indexing/status" primary>
-            See Connectors
-          </Button>
+          <Button href="/admin/indexing/status">See Connectors</Button>
        }
      />

--- a/web/src/app/admin/agents/PersonaTable.tsx
+++ b/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)}
--- a/web/src/app/admin/api-key/OnyxApiKeyForm.tsx
+++ b/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";
--- a/web/src/app/admin/api-key/page.tsx
+++ b/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";
@@ -158,11 +158,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">
@@ -173,8 +173,8 @@ function Main() {
                  </TableCell>
                  <TableCell>
                    <Button
-                      internal
-                      leftIcon={SvgRefreshCw}
+                      prominence="internal"
+                      icon={SvgRefreshCw}
                      onClick={async () => {
                        setKeyIsGenerating(true);
                        const response = await regenerateApiKey(apiKey);
--- a/web/src/app/admin/billing/BillingDetailsView.tsx
+++ b/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(opal-migration, @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>
          )}
--- a/web/src/app/admin/billing/CheckoutView.tsx
+++ b/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>
--- a/web/src/app/admin/billing/LicenseActivationCard.tsx
+++ b/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}
        >
--- a/web/src/app/admin/billing/PlansView.tsx
+++ b/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(opal-migration, @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(opal-migration, @raunakab): migrate to opal Button once className/iconClassName is resolved
            <Button tertiary transient className="pointer-events-none">
              <Text mainUiAction text03>
                Included in your plan
--- a/web/src/app/admin/billing/page.tsx
+++ b/web/src/app/admin/billing/page.tsx
@@ -66,6 +66,7 @@ function FooterLinks({
          <Text secondaryBody text03>
            Have a license key?
          </Text>
+          {/* TODO(opal-migration, @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(opal-migration, @raunakab): migrate to opal Button once className/iconClassName is resolved */}
      <Button
        action
        tertiary
--- a/web/src/app/admin/bots/SlackBotUpdateForm.tsx
+++ b/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>
--- a/web/src/app/admin/bots/SlackTokensForm.tsx
+++ b/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";
--- a/web/src/app/admin/bots/[bot-id]/SlackChannelConfigsTable.tsx
+++ b/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(
--- a/web/src/app/admin/bots/[bot-id]/channels/SlackChannelConfigFormFields.tsx
+++ b/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>
--- a/web/src/app/admin/configuration/document-processing/page.tsx
+++ b/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 { DocumentIcon2 } from "@/components/icons/icons";
 import useSWR from "swr";
@@ -127,7 +127,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">
@@ -135,7 +135,7 @@ function Main() {
                  </Text>
                </>
              ) : (
-                <Button onClick={handleSave} action>
+                <Button variant="action" onClick={handleSave}>
                  Save API Key
                </Button>
              )}
--- a/web/src/app/admin/configuration/search/UpgradingPage.tsx
+++ b/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";
@@ -140,10 +141,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>
@@ -158,6 +162,7 @@ export default function UpgradingPage({
              {futureEmbeddingModel.model_name}
            </div>

+            {/* TODO(opal-migration, @raunakab): migrate to opal Button once className/iconClassName is resolved */}
            <Button
              danger
              className="mt-4"
--- a/web/src/app/admin/configuration/search/page.tsx
+++ b/web/src/app/admin/configuration/search/page.tsx
@@ -5,7 +5,7 @@ import { AdminPageTitle } from "@/components/admin/Title";
 import { errorHandlingFetcher } from "@/lib/fetcher";
 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 {
@@ -127,7 +127,7 @@ function Main() {
          </CardSection>

          <div className="mt-4">
-            <Button action href="/admin/embeddings">
+            <Button variant="action" href="/admin/embeddings">
              Update Search Settings
            </Button>
          </div>
--- a/web/src/app/admin/configuration/web-search/WebProviderSetupModal.tsx
+++ b/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}
            >
--- a/web/src/app/admin/configuration/web-search/page.tsx
+++ b/web/src/app/admin/configuration/web-search/page.tsx
@@ -88,6 +88,7 @@ function HoverIconButton({
 }: HoverIconButtonProps) {
  return (
    <div onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
+      {/* TODO(opal-migration, @raunakab): migrate to opal Button once HoverIconButtonProps typing is resolved */}
      <Button {...buttonProps} rightIcon={isHovered ? SvgX : SvgCheckSquare}>
        {children}
      </Button>
@@ -1007,9 +1008,8 @@ export default function Page() {
                            {buttonState.label}
                          </HoverIconButton>
                        ) : (
-                          <Button
-                            action={false}
-                            tertiary
+                          <OpalButton
+                            prominence="tertiary"
                            disabled={
                              buttonState.disabled || !buttonState.onClick
                            }
@@ -1026,7 +1026,7 @@ export default function Page() {
                            }
                          >
                            {buttonState.label}
-                          </Button>
+                          </OpalButton>
                        )}
                      </div>
                    </div>
@@ -1199,9 +1199,8 @@ export default function Page() {
                          {buttonState.label}
                        </HoverIconButton>
                      ) : (
-                        <Button
-                          action={false}
-                          tertiary
+                        <OpalButton
+                          prominence="tertiary"
                          disabled={
                            buttonState.disabled || !buttonState.onClick
                          }
@@ -1218,7 +1217,7 @@ export default function Page() {
                          }
                        >
                          {buttonState.label}
-                        </Button>
+                        </OpalButton>
                      )}
                    </div>
                  </div>
--- a/web/src/app/admin/connector/[ccPairId]/ConfigDisplay.tsx
+++ b/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>
--- a/web/src/app/admin/connector/[ccPairId]/IndexAttemptErrorsModal.tsx
+++ b/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(opal-migration, @raunakab): migrate to opal Button once className/iconClassName is resolved
                  <Button
                    onClick={onResolveAll}
                    className="ml-4 whitespace-nowrap"
--- a/web/src/app/admin/connector/[ccPairId]/InlineFileManagement.tsx
+++ b/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
--- a/web/src/app/admin/connector/[ccPairId]/ReIndexModal.tsx
+++ b/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";
--- a/web/src/app/admin/connector/[ccPairId]/page.tsx
+++ b/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";
 // synchronize these validations with the SQLAlchemy connector class until we have a
 // centralized schema for both frontend and backend
@@ -447,7 +447,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>
--- a/web/src/app/admin/connectors/[connector]/AddConnectorPage.tsx
+++ b/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}
--- a/web/src/app/admin/connectors/[connector]/ConnectorWrapper.tsx
+++ b/web/src/app/admin/connectors/[connector]/ConnectorWrapper.tsx
@@ -40,6 +40,7 @@ export default function ConnectorWrapper({
              <HeaderTitle>
                <p>&lsquo;{connector}&rsquo; is not a valid Connector Type!</p>
              </HeaderTitle>
+              {/* TODO(opal-migration, @raunakab): migrate to opal Button once className/iconClassName is resolved */}
              <Button
                onClick={() => window.open("/admin/indexing/status", "_self")}
                className="mr-auto"
--- a/web/src/app/admin/connectors/[connector]/NavigationRow.tsx
+++ b/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()}
--- a/web/src/app/admin/connectors/[connector]/oauth/finalize/page.tsx
+++ b/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";
--- a/web/src/app/admin/connectors/[connector]/pages/Advanced.tsx
+++ b/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>
--- a/web/src/app/admin/connectors/[connector]/pages/gdrive/Credential.tsx
+++ b/web/src/app/admin/connectors/[connector]/pages/gdrive/Credential.tsx
@@ -14,7 +14,7 @@ import Cookies from "js-cookie";
 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,
@@ -318,7 +318,7 @@ export const DriveJsonUploadSection = ({
          {isAdmin && !existingAuthCredential && (
            <div className="mt-2">
              <Button
-                danger
+                variant="danger"
                onClick={async () => {
                  const endpoint =
                    localServiceAccountData?.service_account_email
@@ -471,7 +471,7 @@ export const DriveAuthSection = ({
            </div>
          </div>
          <Button
-            danger
+            variant="danger"
            onClick={async () => {
              handleRevokeAccess(
                connectorAssociated,
--- a/web/src/app/admin/connectors/[connector]/pages/gmail/Credential.tsx
+++ b/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";
@@ -317,7 +317,7 @@ export const GmailJsonUploadSection = ({
          {isAdmin && !existingAuthCredential && (
            <div className="mt-2">
              <Button
-                danger
+                variant="danger"
                onClick={async () => {
                  const endpoint =
                    localServiceAccountData?.service_account_email
@@ -473,7 +473,7 @@ export const GmailAuthSection = ({
          </div>
          <Section flexDirection="row" justifyContent="between" height="fit">
            <Button
-              danger
+              variant="danger"
              onClick={async () => {
                handleRevokeAccess(
                  connectorExists,
@@ -485,10 +485,7 @@ export const GmailAuthSection = ({
              Revoke Access
            </Button>
            {buildMode && onCredentialCreated && (
-              <Button
-                primary
-                onClick={() => onCredentialCreated(existingCredential)}
-              >
+              <Button onClick={() => onCredentialCreated(existingCredential)}>
                Continue
              </Button>
            )}
--- a/web/src/app/admin/debug/page.tsx
+++ b/web/src/app/admin/debug/page.tsx
@@ -12,7 +12,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";
@@ -96,9 +96,9 @@ function Main() {
                    <TableCell className="font-medium">{category}</TableCell>
                    <TableCell>
                      <Button
+                        prominence="secondary"
                        onClick={() => handleDownload(category)}
-                        secondary
-                        leftIcon={SvgDownloadCloud}
+                        icon={SvgDownloadCloud}
                      >
                        Download Logs
                      </Button>
--- a/web/src/app/admin/discord-bot/BotConfigCard.tsx
+++ b/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>
--- a/web/src/app/admin/discord-bot/DiscordGuildsTable.tsx
+++ b/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>
--- a/web/src/app/admin/discord-bot/[guild-id]/page.tsx
+++ b/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>
--- a/web/src/app/admin/document-index-migration/page.tsx
+++ b/web/src/app/admin/document-index-migration/page.tsx
@@ -197,6 +197,7 @@ function RetrievalSourceSection() {
      </InputSelect>

      {hasChanges && (
+        // TODO(opal-migration, @raunakab): migrate to opal Button once className/iconClassName is resolved
        <Button
          className="self-center"
          onClick={handleUpdate}
--- a/web/src/app/admin/documents/sets/DocumentSetCreationForm.tsx
+++ b/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(opal-migration, @raunakab): migrate to opal Button once className/iconClassName is resolved */}
                <Button
                  type="submit"
                  disabled={props.isSubmitting}
--- a/web/src/app/admin/embeddings/EmbeddingModelSelectionForm.tsx
+++ b/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,
--- a/web/src/app/admin/embeddings/RerankingFormPage.tsx
+++ b/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";
--- a/web/src/app/admin/embeddings/modals/AlreadyPickedModal.tsx
+++ b/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";

--- a/web/src/app/admin/embeddings/modals/ChangeCredentialsModal.tsx
+++ b/web/src/app/admin/embeddings/modals/ChangeCredentialsModal.tsx
@@ -268,6 +268,7 @@ export default function ChangeCredentialsModal({
                  </Callout>
                )}

+                {/* TODO(opal-migration, @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(opal-migration, @raunakab): migrate to opal Button once className/iconClassName is resolved */}
          <Button className="mr-auto" onClick={handleDelete} danger>
            Delete Configuration
          </Button>
--- a/web/src/app/admin/embeddings/modals/DeleteCredentialsModal.tsx
+++ b/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>
--- a/web/src/app/admin/embeddings/modals/InstantSwitchConfirmModal.tsx
+++ b/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>
--- a/web/src/app/admin/embeddings/modals/ModelSelectionModal.tsx
+++ b/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>
--- a/web/src/app/admin/embeddings/modals/ProviderCreationModal.tsx
+++ b/web/src/app/admin/embeddings/modals/ProviderCreationModal.tsx
@@ -300,6 +300,7 @@ export default function ProviderCreationModal({
                  </Callout>
                )}

+                {/* TODO(opal-migration, @raunakab): migrate to opal Button once className/iconClassName is resolved */}
                <Button
                  type="submit"
                  className="w-full"
--- a/web/src/app/admin/embeddings/modals/SelectModelModal.tsx
+++ b/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>
--- a/web/src/app/admin/embeddings/pages/EmbeddingFormPage.tsx
+++ b/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(opal-migration, @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(opal-migration, @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>
--- a/web/src/app/admin/embeddings/pages/OpenEmbeddingPage.tsx
+++ b/web/src/app/admin/embeddings/pages/OpenEmbeddingPage.tsx
@@ -62,6 +62,7 @@ export default function OpenEmbeddingPage({
        Onyx team.
      </Text>
      {!configureModel && (
+        // TODO(opal-migration, @raunakab): migrate to opal Button once className/iconClassName is resolved
        <Button
          onClick={() => setConfigureModel(true)}
          className="mt-4"
--- a/web/src/app/admin/indexing/status/FilterComponent.tsx
+++ b/web/src/app/admin/indexing/status/FilterComponent.tsx
@@ -241,8 +241,8 @@ export const FilterComponent = forwardRef<
              onClick={(e) => e.stopPropagation()}
            >
              <div className="flex gap-2">
-                <Button
-                  secondary={docsOperator !== ">"}
+                <OpalButton
+                  prominence={docsOperator !== ">" ? "secondary" : "primary"}
                  onClick={(e) => {
                    e.preventDefault();
                    e.stopPropagation();
@@ -251,9 +251,9 @@ export const FilterComponent = forwardRef<
                  type="button"
                >
                  &gt;
-                </Button>
-                <Button
-                  secondary={docsOperator !== "<"}
+                </OpalButton>
+                <OpalButton
+                  prominence={docsOperator !== "<" ? "secondary" : "primary"}
                  onClick={(e) => {
                    e.preventDefault();
                    e.stopPropagation();
@@ -262,9 +262,9 @@ export const FilterComponent = forwardRef<
                  type="button"
                >
                  &lt;
-                </Button>
-                <Button
-                  secondary={docsOperator !== "="}
+                </OpalButton>
+                <OpalButton
+                  prominence={docsOperator !== "=" ? "secondary" : "primary"}
                  onClick={(e) => {
                    e.preventDefault();
                    e.stopPropagation();
@@ -273,7 +273,7 @@ export const FilterComponent = forwardRef<
                  type="button"
                >
                  =
-                </Button>
+                </OpalButton>
              </div>
              <Input
                type="number"
@@ -285,6 +285,7 @@ export const FilterComponent = forwardRef<
              />
            </div>
            <div className="px-2 py-1.5">
+              {/* TODO(opal-migration, @raunakab): migrate to opal Button once className/iconClassName is resolved */}
              <Button
                className="w-full"
                onClick={(e) => {
--- a/web/src/app/admin/indexing/status/SearchAndFilterControls.tsx
+++ b/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";
--- a/web/src/app/admin/indexing/status/page.tsx
+++ b/web/src/app/admin/indexing/status/page.tsx
@@ -8,7 +8,7 @@ import Link from "next/link";
 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 { useState, useRef, useMemo, RefObject } from "react";
 import { FilterOptions } from "./FilterComponent";
 import { ValidSources } from "@/lib/types";
--- a/web/src/app/admin/kg/KGEntityTypes.tsx
+++ b/web/src/app/admin/kg/KGEntityTypes.tsx
@@ -237,6 +237,7 @@ export default function KGEntityTypes({
          value={search}
          onChange={(event) => setSearch(event.target.value)}
        />
+        {/* TODO(opal-migration, @raunakab): migrate to opal Button once className/iconClassName is resolved */}
        <Button
          className="h-9"
          onClick={allClosed ? handleExpandAll : handleCollapseAll}
--- a/web/src/app/admin/kg/page.tsx
+++ b/web/src/app/admin/kg/page.tsx
@@ -10,7 +10,7 @@ import {
 } from "@/components/Field";
 import { BrainIcon } from "@/components/icons/icons";
 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";
@@ -272,7 +272,7 @@ function Main() {
            entities you want to model afterwards.
          </Text>
          <Button
-            leftIcon={SvgSettings}
+            icon={SvgSettings}
            onClick={() => setConfigureModalShown(true)}
          >
            Configure Knowledge Graph
--- a/web/src/app/admin/token-rate-limits/CreateRateLimitModal.tsx
+++ b/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";
--- a/web/src/app/admin/users/page.tsx
+++ b/web/src/app/admin/users/page.tsx
@@ -19,7 +19,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, SvgUser, SvgUserPlus } from "@opal/icons";
@@ -147,7 +147,7 @@ const UsersTables = ({
            <div className="flex justify-between items-center gap-1">
              <CardTitle>Current Users</CardTitle>
              <Button
-                leftIcon={SvgDownloadCloud}
+                icon={SvgDownloadCloud}
                disabled={isDownloadingUsers}
                onClick={() => downloadAllUsers()}
              >
--- a/web/src/app/app/components/AppPopup.tsx
+++ b/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";
--- a/web/src/app/app/components/files/images/InMessageImage.tsx
+++ b/web/src/app/app/components/files/images/InMessageImage.tsx
@@ -1,5 +1,5 @@
-import { memo, useState } from "react";
-import { SvgDownload } from "@opal/icons";
+import { useState } from "react";
+import { FiDownload } from "react-icons/fi";
 import { ImageShape } from "@/app/app/services/streamingModels";
 import { FullImageModal } from "@/app/app/components/files/images/FullImageModal";
 import { buildImgUrl } from "@/app/app/components/files/images/utils";
@@ -24,22 +24,17 @@ const SHAPE_CLASSES: Record<ImageShape, { container: string; image: string }> =
    },
  };

-// Used to stop image flashing as images are loaded and response continues
-const loadedImages = new Set<string>();
-
 interface InMessageImageProps {
  fileId: string;
-  fileName?: string;
  shape?: ImageShape;
 }

-export const InMessageImage = memo(function InMessageImage({
+export function InMessageImage({
  fileId,
-  fileName,
  shape = DEFAULT_SHAPE,
 }: InMessageImageProps) {
  const [fullImageShowing, setFullImageShowing] = useState(false);
-  const [imageLoaded, setImageLoaded] = useState(loadedImages.has(fileId));
+  const [imageLoaded, setImageLoaded] = useState(false);

  const normalizedShape = SHAPE_CLASSES[shape] ? shape : DEFAULT_SHAPE;
  const { container: shapeContainerClasses, image: shapeImageClasses } =
@@ -50,15 +45,11 @@ export const InMessageImage = memo(function InMessageImage({

    try {
      const response = await fetch(buildImgUrl(fileId));
-      if (!response.ok) {
-        console.error("Failed to download image:", response.status);
-        return;
-      }
      const blob = await response.blob();
      const url = window.URL.createObjectURL(blob);
      const a = document.createElement("a");
      a.href = url;
-      a.download = fileName || `image-${fileId}.png`;
+      a.download = `image-${fileId}.png`; // You can adjust the filename/extension as needed
      document.body.appendChild(a);
      a.click();
      window.URL.revokeObjectURL(url);
@@ -85,10 +76,7 @@ export const InMessageImage = memo(function InMessageImage({
          width={1200}
          height={1200}
          alt="Chat Message Image"
-          onLoad={() => {
-            loadedImages.add(fileId);
-            setImageLoaded(true);
-          }}
+          onLoad={() => setImageLoaded(true)}
          className={cn(
            "object-contain object-left overflow-hidden rounded-lg w-full h-full transition-opacity duration-300 cursor-pointer",
            shapeImageClasses,
@@ -106,7 +94,7 @@ export const InMessageImage = memo(function InMessageImage({
          )}
        >
          <Button
-            icon={SvgDownload}
+            icon={FiDownload}
            tooltip="Download"
            onClick={handleDownload}
          />
@@ -114,4 +102,4 @@ export const InMessageImage = memo(function InMessageImage({
      </div>
    </>
  );
-});
+}
--- a/web/src/app/app/components/files/images/utils.ts
+++ b/web/src/app/app/components/files/images/utils.ts
@@ -1,21 +1,3 @@
-const CHAT_FILE_URL_REGEX = /\/api\/chat\/file\/([^/?#]+)/;
-const IMAGE_EXTENSIONS = /\.(png|jpe?g|gif|webp|svg|bmp|ico|tiff?)$/i;
-
 export function buildImgUrl(fileId: string) {
  return `/api/chat/file/${fileId}`;
 }
-
-/**
- * If `href` points to a chat file and `linkText` ends with an image extension,
- * returns the file ID. Otherwise returns null.
- */
-export function extractChatImageFileId(
-  href: string | undefined,
-  linkText: string
-): string | null {
-  if (!href) return null;
-  const match = CHAT_FILE_URL_REGEX.exec(href);
-  if (!match?.[1]) return null;
-  if (!IMAGE_EXTENSIONS.test(linkText)) return null;
-  return match[1];
-}
--- a/web/src/app/app/components/projects/ProjectContextPanel.tsx
+++ b/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(opal-migration, @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>
--- a/web/src/app/app/message/HumanMessage.tsx
+++ b/web/src/app/app/message/HumanMessage.tsx
@@ -195,7 +195,7 @@ const HumanMessage = React.memo(function HumanMessage({
            <div className="md:max-w-[37.5rem] flex basis-[100%] md:basis-auto justify-end md:order-1">
              <div
                className={
-                  "max-w-[30rem] md:max-w-[37.5rem] whitespace-break-spaces break-anywhere rounded-t-16 rounded-bl-16 bg-background-tint-02 py-2 px-3"
+                  "max-w-[30rem] md:max-w-[37.5rem] whitespace-break-spaces rounded-t-16 rounded-bl-16 bg-background-tint-02 py-2 px-3"
                }
                onCopy={(e) => {
                  const selection = window.getSelection();
--- a/web/src/app/app/message/Resubmit.tsx
+++ b/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
--- a/web/src/app/app/message/messageComponents/markdownUtils.tsx
+++ b/web/src/app/app/message/messageComponents/markdownUtils.tsx
@@ -14,8 +14,6 @@ import {
 import { extractCodeText, preprocessLaTeX } from "@/app/app/message/codeUtils";
 import { CodeBlock } from "@/app/app/message/CodeBlock";
 import { transformLinkUri, cn } from "@/lib/utils";
-import { InMessageImage } from "@/app/app/components/files/images/InMessageImage";
-import { extractChatImageFileId } from "@/app/app/components/files/images/utils";

 /**
 * Processes content for markdown rendering by handling code blocks and LaTeX
@@ -60,31 +58,17 @@ export const useMarkdownComponents = (
  );

  const anchorCallback = useCallback(
-    (props: any) => {
-      const imageFileId = extractChatImageFileId(
-        props.href,
-        String(props.children ?? "")
-      );
-      if (imageFileId) {
-        return (
-          <InMessageImage
-            fileId={imageFileId}
-            fileName={String(props.children ?? "")}
-          />
-        );
-      }
-      return (
-        <MemoizedAnchor
-          updatePresentingDocument={state?.setPresentingDocument || (() => {})}
-          docs={state?.docs || []}
-          userFiles={state?.userFiles || []}
-          citations={state?.citations}
-          href={props.href}
-        >
-          {props.children}
-        </MemoizedAnchor>
-      );
-    },
+    (props: any) => (
+      <MemoizedAnchor
+        updatePresentingDocument={state?.setPresentingDocument || (() => {})}
+        docs={state?.docs || []}
+        userFiles={state?.userFiles || []}
+        citations={state?.citations}
+        href={props.href}
+      >
+        {props.children}
+      </MemoizedAnchor>
+    ),
    [
      state?.docs,
      state?.userFiles,
--- a/web/src/app/app/message/messageComponents/timeline/primitives/TimelineStepContent.tsx
+++ b/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}
--- a/web/src/app/auth/create-account/page.tsx
+++ b/web/src/app/auth/create-account/page.tsx
@@ -22,6 +22,7 @@ export default function Page() {
          <li>Create a new Onyx team</li>
        </ul>
        <div className="flex justify-center">
+          {/* TODO(opal-migration, @raunakab): migrate to opal Button once className/iconClassName is resolved */}
          <Button
            href={`${REGISTRATION_URL}/register`}
            className="w-full"
--- a/web/src/app/auth/error/page.tsx
+++ b/web/src/app/auth/error/page.tsx
@@ -35,6 +35,7 @@ const Page = () => {
          </ul>
        </div>

+        {/* TODO(opal-migration, @raunakab): migrate to opal Button once className/iconClassName is resolved */}
        <Button href="/auth/login" className="w-full">
          Return to Login Page
        </Button>
--- a/web/src/app/auth/forgot-password/page.tsx
+++ b/web/src/app/auth/forgot-password/page.tsx
@@ -63,6 +63,7 @@ const ForgotPasswordPage: React.FC = () => {
              />

              <div className="flex">
+                {/* TODO(opal-migration, @raunakab): migrate to opal Button once className/iconClassName is resolved */}
                <Button
                  type="submit"
                  disabled={isSubmitting}
--- a/web/src/app/auth/impersonate/page.tsx
+++ b/web/src/app/auth/impersonate/page.tsx
@@ -89,6 +89,7 @@ export default function ImpersonatePage() {
                placeholder="Enter API Key"
              />

+              {/* TODO(opal-migration, @raunakab): migrate to opal Button once className/iconClassName is resolved */}
              <Button type="submit" className="w-full" disabled={isSubmitting}>
                Impersonate User
              </Button>
--- a/web/src/app/auth/login/EmailPasswordForm.tsx
+++ b/web/src/app/auth/login/EmailPasswordForm.tsx
@@ -239,6 +239,7 @@ export default function EmailPasswordForm({
                )}
              />

+              {/* TODO(opal-migration, @raunakab): migrate to opal Button once className/iconClassName is resolved */}
              <Button
                type="submit"
                className="w-full mt-1"
--- a/web/src/app/auth/login/LoginPage.tsx
+++ b/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 {
--- a/web/src/app/auth/login/SignInButton.tsx
+++ b/web/src/app/auth/login/SignInButton.tsx
@@ -49,6 +49,7 @@ export default function SignInButton({
  }

  return (
+    // TODO(opal-migration, @raunakab): migrate to opal Button once className/iconClassName is resolved
    <Button
      secondary={
        authType === AuthType.GOOGLE_OAUTH || authType === AuthType.CLOUD
--- a/web/src/app/auth/reset-password/page.tsx
+++ b/web/src/app/auth/reset-password/page.tsx
@@ -99,6 +99,7 @@ const ResetPasswordPage: React.FC = () => {
              />

              <div className="flex">
+                {/* TODO(opal-migration, @raunakab): migrate to opal Button once className/iconClassName is resolved */}
                <Button
                  type="submit"
                  disabled={isSubmitting}
--- a/web/src/app/craft/components/ChatPanel.tsx
+++ b/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(opal-migration, @raunakab): migrate to opal Button once className/iconClassName is resolved
            <IconButton
              icon={SvgSidebar}
              onClick={toggleOutputPanel}
--- a/web/src/app/craft/components/FileBrowser.tsx
+++ b/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>
--- a/web/src/app/craft/components/FilePreviewModal.tsx
+++ b/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>
--- a/web/src/app/craft/components/InputBar.tsx
+++ b/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(opal-migration, @raunakab): migrate to opal Button once className/iconClassName is resolved */}
                <IconButton
                  icon={sandboxInitializing ? SvgLoader : SvgArrowUp}
                  onClick={handleSubmit}
--- a/web/src/app/craft/components/ShareButton.tsx
+++ b/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"
--- a/web/src/app/craft/components/SideBar.tsx
+++ b/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(opal-migration, @raunakab): migrate to opal Button once className/iconClassName is resolved */}
          <IconButton
            icon={SvgMoreHorizontal}
            className={cn(
@@ -271,19 +272,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>
--- a/web/src/app/craft/components/output-panel/ArtifactsTab.tsx
+++ b/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);
--- a/web/src/app/craft/components/output-panel/UrlBar.tsx
+++ b/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}
          >
--- a/web/src/app/craft/v1/configure/components/ConfigureConnectorModal.tsx
+++ b/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>
--- a/web/src/app/craft/v1/configure/components/ConnectorCard.tsx
+++ b/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>
--- a/web/src/app/craft/v1/configure/components/ConnectorConfigStep.tsx
+++ b/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>
--- a/web/src/app/craft/v1/configure/components/CreateCredentialInline.tsx
+++ b/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}
              >
--- a/web/src/app/craft/v1/configure/components/CredentialStep.tsx
+++ b/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}
                  >
--- a/web/src/app/craft/v1/configure/components/UserLibraryModal.tsx
+++ b/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(opal-migration, @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>
--- a/web/src/app/craft/v1/configure/page.tsx
+++ b/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}
              >
--- a/web/src/app/ee/admin/billing/BillingInformationPage.tsx
+++ b/web/src/app/ee/admin/billing/BillingInformationPage.tsx
@@ -95,6 +95,7 @@ export default function BillingInformationPage() {
          </CardDescription>
        </CardHeader>
        <CardContent>
+          {/* TODO(opal-migration, @raunakab): migrate to opal Button once className/iconClassName is resolved */}
          <Button
            onClick={handleManageSubscription}
            className="w-full"
--- a/web/src/app/ee/admin/groups/UserEditor.tsx
+++ b/web/src/app/ee/admin/groups/UserEditor.tsx
@@ -73,6 +73,7 @@ export const UserEditor = ({
          leftSearchIcon
        />
        {onSubmit && (
+          // TODO(opal-migration, @raunakab): migrate to opal Button once className/iconClassName is resolved
          <Button
            className="ml-3 flex-nowrap w-32"
            onClick={() => onSubmit(selectedUsers)}
--- a/web/src/app/ee/admin/groups/UserGroupCreationForm.tsx
+++ b/web/src/app/ee/admin/groups/UserGroupCreationForm.tsx
@@ -123,6 +123,7 @@ export default function UserGroupCreationForm({
                  />
                </div>
                <div className="flex">
+                  {/* TODO(opal-migration, @raunakab): migrate to opal Button once className/iconClassName is resolved */}
                  <Button
                    type="submit"
                    disabled={isSubmitting}
--- a/web/src/app/ee/admin/groups/UserGroupsTable.tsx
+++ b/web/src/app/ee/admin/groups/UserGroupsTable.tsx
@@ -70,6 +70,7 @@ export const UserGroupsTable = ({
              return (
                <TableRow key={userGroup.id}>
                  <TableCell>
+                    {/* TODO(opal-migration, @raunakab): migrate to opal Button once className/iconClassName is resolved */}
                    <Button
                      internal
                      leftIcon={SvgEdit}
--- a/web/src/app/ee/admin/groups/[groupId]/AddConnectorForm.tsx
+++ b/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";
--- a/web/src/app/ee/admin/groups/[groupId]/GroupDisplay.tsx
+++ b/web/src/app/ee/admin/groups/[groupId]/GroupDisplay.tsx
@@ -27,6 +27,7 @@ import {
 } from "@/components/ui/table";
 import SimpleTooltip from "@/refresh-components/SimpleTooltip";
 import Button from "@/refresh-components/buttons/Button";
+import { Button as OpalButton } from "@opal/components";
 import { DeleteButton } from "@/components/DeleteButton";
 import { Bubble } from "@/components/Bubble";
 import { BookmarkIcon, RobotIcon } from "@/components/icons/icons";
@@ -277,7 +278,7 @@ export const GroupDisplay = ({
        tooltip="Cannot update group while sync is occurring"
        disabled={userGroup.is_up_to_date}
      >
-        <Button
+        <OpalButton
          disabled={!userGroup.is_up_to_date}
          onClick={() => {
            if (userGroup.is_up_to_date) {
@@ -286,7 +287,7 @@ export const GroupDisplay = ({
          }}
        >
          Add Users
-        </Button>
+        </OpalButton>
      </SimpleTooltip>
      {addMemberFormVisible && (
        <AddMemberForm
@@ -377,7 +378,7 @@ export const GroupDisplay = ({
        tooltip="Cannot update group while sync is occurring"
        disabled={userGroup.is_up_to_date}
      >
-        <Button
+        <OpalButton
          disabled={!userGroup.is_up_to_date}
          onClick={() => {
            if (userGroup.is_up_to_date) {
@@ -386,7 +387,7 @@ export const GroupDisplay = ({
          }}
        >
          Add Connectors
-        </Button>
+        </OpalButton>
      </SimpleTooltip>

      {addConnectorFormVisible && (
@@ -467,6 +468,7 @@ export const GroupDisplay = ({
      />

      {isAdmin && (
+        // TODO(opal-migration, @raunakab): migrate to opal Button once className/iconClassName is resolved
        <Button
          className="mt-3"
          onClick={() => setAddRateLimitFormVisible(true)}
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Bo-Onyx	4cb85784e6	fix style	2026-03-02 19:55:17 -08:00
Bo-Onyx	58e7ce527d	address comments	2026-03-02 19:47:20 -08:00
Bo-Onyx	39f5e33c02	add dev	2026-03-02 16:15:03 -08:00
Bo-Onyx	d10d340469	fix dev	2026-03-02 16:11:06 -08:00
Bo-Onyx	afb45e5ddc	fix	2026-03-02 15:59:47 -08:00
Bo-Onyx	2d4886abde	fix dev	2026-03-02 15:55:29 -08:00
Bo-Onyx	0c52522b4b	fix	2026-03-02 15:52:35 -08:00
Bo-Onyx	41530c9bf2	fix type and style	2026-03-02 15:35:03 -08:00
Bo-Onyx	69884c416b	fix rebase	2026-03-02 15:30:32 -08:00
Bo-Onyx	27b3225129	fix conditional variant and prominence	2026-03-02 15:30:32 -08:00
Bo-Onyx	82f6d8640e	manually clean	2026-03-02 15:30:32 -08:00
Bo-Onyx	8ca9b4677a	chore(fe): opal button migration	2026-03-02 15:30:32 -08:00