From 1fbd3a01aac94d7e56a190fcc495818e4902733c Mon Sep 17 00:00:00 2001
From: Mikyo King <mikyo@arize.com>
Date: Thu, 26 Dec 2024 09:43:26 -0700
Subject: [PATCH] chore(components): deprecate button (#5816)

* add an eslint rule for the button

* migrate copy to clipboard button

* migrate span details

* migrate src/pages/trace/SpanToDatasetExampleDialog.tsx:

* migrate 	modified:   src/pages/settings/UsersCard.tsx
	modified:   src/pages/trace/EditSpanAnnotationsButton.tsx
	modified:   src/pages/trace/SpanAnnotationsEmpty.tsx
	modified:   src/pages/trace/SpanToDatasetExampleDialog.tsx

* migrate src/components/auth/CreateAPIKeyDialog.tsx src/components/auth/OneTimeAPIKeyDialog.tsx src/components/code/styles.tsx

* fix span image

* src/pages/settings/UserRoleChangeDialog.tsx

* migrate more

* convert more buttons: src/components/table/CellWithControlsWrapper.tsx
	modified:   src/components/trace/TraceTree.tsx
	modified:   src/pages/ErrorElement.tsx
	modified:   src/pages/auth/OAuth2Login.tsx
	modified:   src/pages/auth/ResetPasswordForm.tsx
	modified:   src/pages/auth/ResetPasswordWithTokenForm.tsx
	modified:   src/pages/dataset/DatasetHistoryButton.tsx
	modified:   src/pages/embedding/ExportSelectionButton.tsx
	modified:   src/pages/embedding/PointSelectionPanelContent.tsx
	modified:   src/pages/example/EditExampleDialog.tsx
	modified:   src/pages/experiment/ExperimentCompareTable.tsx
	modified:   src/pages/experiments/ExperimentSelectionToolbar.tsx
	modified:   src/pages/playground/ModelConfigButton.tsx
	modified:   src/pages/playground/PlaygroundDatasetExamplesTable.tsx
	modified:   src/pages/playground/PlaygroundRunButton.tsx
	modified:   src/pages/playground/PlaygroundRunTraceDialog.tsx
	modified:   src/pages/playground/PlaygroundTemplate.tsx
	modified:   src/pages/playground/RunMetadataFooter.tsx

* WIP

* finish migration

* fix playwrite

* fix types
---
 app/.eslintrc.js                              | 11 ++-
 app/global-setup.ts                           |  7 +-
 app/package.json                              |  1 +
 app/pnpm-lock.yaml                            | 12 +++
 app/src/components/ConfirmNavigation.tsx      | 23 ++---
 app/src/components/CopyToClipboardButton.tsx  | 47 ++++-----
 .../components/auth/CreateAPIKeyDialog.tsx    | 15 +--
 .../components/auth/DeleteAPIKeyButton.tsx    |  9 +-
 .../components/auth/OneTimeAPIKeyDialog.tsx   |  2 +-
 app/src/components/button/index.tsx           |  1 +
 app/src/components/code/styles.tsx            |  4 +
 app/src/components/dataset/DatasetForm.tsx    | 21 ++--
 .../components/dataset/NewDatasetButton.tsx   |  2 +-
 app/src/components/index.tsx                  |  3 +
 .../CanvasDisplaySettingsDropdown.tsx         |  7 +-
 .../pointcloud/ClusteringSettings.tsx         |  9 +-
 app/src/components/pointcloud/PointCloud.tsx  | 16 ++--
 .../PointCloudParameterSettings.tsx           |  2 +-
 app/src/components/settings/UserForm.tsx      |  7 +-
 .../table/CellWithControlsWrapper.tsx         |  2 +-
 app/src/components/table/Table.tsx            | 19 ++--
 .../trace/EditSpanAnnotationsDialog.tsx       | 19 ++--
 .../trace/SpanAnnotationActionMenu.tsx        | 13 +--
 .../components/trace/SpanAnnotationForm.tsx   | 14 +--
 app/src/components/trace/TraceTree.tsx        | 90 +++++++++---------
 app/src/pages/ErrorElement.tsx                |  8 +-
 app/src/pages/auth/ForgotPasswordForm.tsx     |  7 +-
 app/src/pages/auth/LoginForm.tsx              | 12 ++-
 app/src/pages/auth/OAuth2Login.tsx            |  3 +-
 app/src/pages/auth/ResetPasswordForm.tsx      |  8 +-
 .../pages/auth/ResetPasswordWithTokenForm.tsx |  5 +-
 .../pages/dataset/AddDatasetExampleButton.tsx |  9 +-
 .../pages/dataset/AddDatasetExampleDialog.tsx | 14 +--
 app/src/pages/dataset/DatasetCodeDropdown.tsx |  8 +-
 .../pages/dataset/DatasetHistoryButton.tsx    |  6 +-
 app/src/pages/dataset/DatasetPage.tsx         |  6 +-
 app/src/pages/dataset/RunExperimentButton.tsx |  7 +-
 app/src/pages/datasets/DatasetFromCSVForm.tsx |  6 +-
 .../pages/datasets/DeleteDatasetDialog.tsx    | 20 +++-
 .../pages/embedding/ExportSelectionButton.tsx | 26 ++---
 .../embedding/PointSelectionPanelContent.tsx  |  7 +-
 app/src/pages/example/EditExampleButton.tsx   |  9 +-
 app/src/pages/example/EditExampleDialog.tsx   | 18 +++-
 .../pages/example/ExampleDetailsDialog.tsx    |  8 +-
 .../example/ExampleExperimentRunsTable.tsx    | 15 +--
 .../examples/ExampleSelectionToolbar.tsx      | 23 +++--
 .../experiment/ExperimentCompareTable.tsx     | 22 ++---
 .../ExperimentSelectionToolbar.tsx            | 31 +++---
 .../pages/playground/ModelConfigButton.tsx    | 14 +--
 app/src/pages/playground/Playground.tsx       | 29 ++----
 .../playground/PlaygroundChatTemplate.tsx     |  8 +-
 .../PlaygroundChatTemplateFooter.tsx          | 20 ++--
 .../PlaygroundDatasetExamplesTable.tsx        | 24 ++---
 .../playground/PlaygroundDatasetPicker.tsx    | 10 +-
 .../playground/PlaygroundDatasetSection.tsx   | 95 ++++++-------------
 .../playground/PlaygroundOutputMoveButton.tsx | 15 +--
 .../playground/PlaygroundResponseFormat.tsx   |  7 +-
 .../pages/playground/PlaygroundRunButton.tsx  | 30 ++----
 .../playground/PlaygroundRunTraceDialog.tsx   |  6 +-
 .../pages/playground/PlaygroundTemplate.tsx   |  8 +-
 app/src/pages/playground/PlaygroundTool.tsx   |  8 +-
 .../pages/playground/RunMetadataFooter.tsx    | 20 ++--
 .../pages/playground/SpanPlaygroundPage.tsx   |  7 +-
 app/src/pages/profile/ViewerAPIKeys.tsx       | 14 +--
 app/src/pages/profile/ViewerProfileCard.tsx   | 13 ++-
 .../project/DatasetSelectorPopoverContent.tsx |  5 +-
 app/src/pages/project/ProjectTableEmpty.tsx   |  6 +-
 app/src/pages/project/SessionsTableEmpty.tsx  |  7 +-
 .../project/SpanFilterConditionField.tsx      |  6 +-
 .../pages/project/SpanSelectionToolbar.tsx    | 25 +++--
 app/src/pages/projects/NewProjectButton.tsx   |  5 +-
 app/src/pages/projects/ProjectActionMenu.tsx  |  7 +-
 .../pages/projects/RemoveProjectDataForm.tsx  | 13 ++-
 app/src/pages/settings/APIKeysCard.tsx        |  8 +-
 app/src/pages/settings/DeleteUserDialog.tsx   |  9 +-
 .../pages/settings/ResetPasswordDialog.tsx    | 14 +--
 app/src/pages/settings/SettingsPage.tsx       |  2 +-
 .../pages/settings/UserRoleChangeDialog.tsx   | 10 +-
 app/src/pages/settings/UsersCard.tsx          | 15 +--
 .../pages/trace/EditSpanAnnotationsButton.tsx | 16 +---
 .../pages/trace/SessionDetailsTraceList.tsx   |  2 +-
 app/src/pages/trace/SpanAnnotationsEmpty.tsx  |  8 +-
 app/src/pages/trace/SpanCodeDropdown.tsx      |  4 +-
 app/src/pages/trace/SpanDetails.tsx           | 10 +-
 app/src/pages/trace/SpanImage.tsx             |  8 +-
 .../trace/SpanToDatasetExampleDialog.tsx      | 19 ++--
 app/tests/admin-access.ts                     |  2 +-
 app/tests/login.rate-limit.spec.ts            |  2 +-
 app/tests/member-access.spec.ts               |  2 +-
 app/tests/user-management.spec.ts             |  2 +-
 cspell.json                                   |  1 +
 91 files changed, 562 insertions(+), 608 deletions(-)
 create mode 100644 app/src/components/button/index.tsx

diff --git a/app/.eslintrc.js b/app/.eslintrc.js
index 68c0375f57..ec93a7489d 100644
--- a/app/.eslintrc.js
+++ b/app/.eslintrc.js
@@ -8,7 +8,7 @@ module.exports = {
     "eslint:recommended",
     "plugin:react/recommended",
     "plugin:@typescript-eslint/recommended",
-    "plugin:storybook/recommended"
+    "plugin:storybook/recommended",
   ],
   overrides: [],
   parser: "@typescript-eslint/parser",
@@ -22,6 +22,7 @@ module.exports = {
     "simple-import-sort",
     "@typescript-eslint",
     "eslint-plugin-react-compiler",
+    "deprecate",
   ],
   rules: {
     "react/no-unknown-property": ["error", { ignore: ["css"] }],
@@ -51,6 +52,14 @@ module.exports = {
         ],
       },
     ],
+    "deprecate/import": [
+      "error",
+      {
+        name: "Button",
+        module: "@arizeai/components",
+        use: "@phoenix/components/button",
+      },
+    ],
   },
   settings: {
     react: {
diff --git a/app/global-setup.ts b/app/global-setup.ts
index 92a4705391..7b4f779e86 100644
--- a/app/global-setup.ts
+++ b/app/global-setup.ts
@@ -7,7 +7,7 @@ async function globalSetup(config: FullConfig) {
   page.goto(`${baseURL}/login`);
   await page.getByLabel("Email").fill("admin@localhost");
   await page.getByLabel("Password").fill("admin");
-  await page.getByRole("button", { name: "Login", exact: true }).click();
+  await page.getByRole("button", { name: "Log In", exact: true }).click();
 
   // Reset admin password
   await page.waitForURL("**/reset-password");
@@ -15,12 +15,11 @@ async function globalSetup(config: FullConfig) {
   await page.getByLabel("New Password").fill("admin123");
   await page.getByLabel("Confirm Password").fill("admin123");
   await page.getByRole("button", { name: "Reset Password" }).click();
-
   await page.goto(`${baseURL}/login`);
 
   await page.getByLabel("Email").fill("admin@localhost");
   await page.getByLabel("Password").fill("admin123");
-  await page.getByRole("button", { name: "Login", exact: true }).click();
+  await page.getByRole("button", { name: "Log In", exact: true }).click();
   await page.waitForURL("**/projects");
   await page.goto(`${baseURL}/settings`);
   await page.waitForURL("**/settings");
@@ -46,7 +45,7 @@ async function globalSetup(config: FullConfig) {
   page.goto(`${baseURL}/login`);
   await page.getByLabel("Email").fill("member@localhost.com");
   await page.getByLabel("Password").fill("member");
-  await page.getByRole("button", { name: "Login", exact: true }).click();
+  await page.getByRole("button", { name: "Log In", exact: true }).click();
 
   // Reset member password
   await page.waitForURL("**/reset-password");
diff --git a/app/package.json b/app/package.json
index fa7af4e0d4..078a743fdf 100644
--- a/app/package.json
+++ b/app/package.json
@@ -92,6 +92,7 @@
     "chromatic": "^11.20.0",
     "cpy-cli": "^5.0.0",
     "eslint": "^8.57.0",
+    "eslint-plugin-deprecate": "^0.8.5",
     "eslint-plugin-react": "^7.34.4",
     "eslint-plugin-react-compiler": "0.0.0-experimental-42acc6a-20241001",
     "eslint-plugin-react-hooks": "^4.6.2",
diff --git a/app/pnpm-lock.yaml b/app/pnpm-lock.yaml
index 47e5b6f2bf..5d5556058e 100644
--- a/app/pnpm-lock.yaml
+++ b/app/pnpm-lock.yaml
@@ -264,6 +264,9 @@ importers:
       eslint:
         specifier: ^8.57.0
         version: 8.57.0
+      eslint-plugin-deprecate:
+        specifier: ^0.8.5
+        version: 0.8.5(eslint@8.57.0)
       eslint-plugin-react:
         specifier: ^7.34.4
         version: 7.34.4(eslint@8.57.0)
@@ -3055,6 +3058,11 @@ packages:
     peerDependencies:
       eslint: '>=7.0.0'
 
+  eslint-plugin-deprecate@0.8.5:
+    resolution: {integrity: sha512-nBH14smi2O1qsQY/deVf1xg1XPMB5ADPPcXWpUDp5ptGrWuNGD7Ghe0mIQKmsoFr6VjjDxJZ5tt78hb5GaCScA==}
+    peerDependencies:
+      eslint: '>=2.x'
+
   eslint-plugin-react-compiler@0.0.0-experimental-42acc6a-20241001:
     resolution: {integrity: sha512-pzkTsWowlHK4yKHsK1d9tTKOUtApZzL7wI6jT5iN31d00DhI9JGDD0pkLohQ6Wfkll+2aiqTPGj9esJoGYmRaw==}
     engines: {node: ^14.17.0 || ^16.0.0 || >= 18.0.0}
@@ -8851,6 +8859,10 @@ snapshots:
     dependencies:
       eslint: 8.57.0
 
+  eslint-plugin-deprecate@0.8.5(eslint@8.57.0):
+    dependencies:
+      eslint: 8.57.0
+
   eslint-plugin-react-compiler@0.0.0-experimental-42acc6a-20241001(eslint@8.57.0):
     dependencies:
       '@babel/core': 7.24.9
diff --git a/app/src/components/ConfirmNavigation.tsx b/app/src/components/ConfirmNavigation.tsx
index 73e7a85405..1cdfaff679 100644
--- a/app/src/components/ConfirmNavigation.tsx
+++ b/app/src/components/ConfirmNavigation.tsx
@@ -1,30 +1,21 @@
 import React, { ReactNode } from "react";
 import { Blocker } from "react-router";
 
-import {
-  Button,
-  Dialog,
-  DialogContainer,
-  Flex,
-  Text,
-  View,
-} from "@arizeai/components";
+import { Dialog, DialogContainer, Flex, Text, View } from "@arizeai/components";
+
+import { Button } from "@phoenix/components";
 
 function ConfirmNavigationDialogFooter({ blocker }: { blocker: Blocker }) {
   return (
     <View padding={"size-100"} borderTopColor={"dark"} borderTopWidth={"thin"}>
       <Flex justifyContent={"end"} gap={"size-100"}>
-        <Button
-          variant={"default"}
-          onClick={() => blocker.reset && blocker.reset()}
-          size={"compact"}
-        >
+        <Button onPress={() => blocker.reset && blocker.reset()} size="S">
           Cancel
         </Button>
         <Button
-          variant={"primary"}
-          onClick={() => blocker.proceed && blocker.proceed()}
-          size={"compact"}
+          variant="primary"
+          onPress={() => blocker.proceed && blocker.proceed()}
+          size="S"
         >
           Confirm
         </Button>
diff --git a/app/src/components/CopyToClipboardButton.tsx b/app/src/components/CopyToClipboardButton.tsx
index c769f56c83..15ee613fdf 100644
--- a/app/src/components/CopyToClipboardButton.tsx
+++ b/app/src/components/CopyToClipboardButton.tsx
@@ -1,33 +1,35 @@
 import React, { useCallback, useState } from "react";
 import copy from "copy-to-clipboard";
 
-import {
-  Button,
-  ButtonProps,
-  Icon,
-  Icons,
-  Tooltip,
-  TooltipTrigger,
-} from "@arizeai/components";
+import { Icon, Icons, Tooltip, TooltipTrigger } from "@arizeai/components";
 
 const SHOW_COPIED_TIMEOUT_MS = 2000;
 
+import { Button, ButtonProps } from "@phoenix/components";
+
+export type CopyToClipboardButtonProps = Omit<
+  ButtonProps,
+  "icon" | "onPress" | "size"
+> & {
+  /**
+   * The size of the button
+   * @default S
+   */
+  size?: ButtonProps["size"];
+  /**
+   * The text to copy to the clipboard
+   */
+  text: string;
+};
+
 /**
  * An Icon button that copies the given text to the clipboard when clicked.
  */
-export function CopyToClipboardButton({
-  text,
-  size = "compact",
-  disabled = false,
-}: {
-  text: string;
-
-  size?: ButtonProps["size"];
-  disabled?: boolean;
-}) {
+export function CopyToClipboardButton(props: CopyToClipboardButtonProps) {
+  const { text, size = "S", ...otherProps } = props;
   const [isCopied, setIsCopied] = useState(false);
 
-  const onClick = useCallback(() => {
+  const onPress = useCallback(() => {
     copy(text);
     setIsCopied(true);
     setTimeout(() => {
@@ -38,15 +40,14 @@ export function CopyToClipboardButton({
     <div className="copy-to-clipboard-button">
       <TooltipTrigger delay={0} offset={5}>
         <Button
-          variant="default"
-          disabled={disabled}
+          size={size}
           icon={
             <Icon
               svg={isCopied ? <Icons.Checkmark /> : <Icons.ClipboardCopy />}
             />
           }
-          size={size}
-          onClick={onClick}
+          onPress={onPress}
+          {...otherProps}
         />
         <Tooltip>Copy</Tooltip>
       </TooltipTrigger>
diff --git a/app/src/components/auth/CreateAPIKeyDialog.tsx b/app/src/components/auth/CreateAPIKeyDialog.tsx
index aaf9889715..a8b761b26e 100644
--- a/app/src/components/auth/CreateAPIKeyDialog.tsx
+++ b/app/src/components/auth/CreateAPIKeyDialog.tsx
@@ -3,14 +3,9 @@ import { Controller, useForm } from "react-hook-form";
 import { Form } from "react-router-dom";
 import { isValid as dateIsValid, parseISO } from "date-fns";
 
-import {
-  Button,
-  Dialog,
-  Flex,
-  TextArea,
-  TextField,
-  View,
-} from "@arizeai/components";
+import { Dialog, Flex, TextArea, TextField, View } from "@arizeai/components";
+
+import { Button } from "@phoenix/components";
 
 export type APIKeyFormParams = {
   name: string;
@@ -129,8 +124,8 @@ export function CreateAPIKeyDialog(props: {
             <Button
               variant={isDirty ? "primary" : "default"}
               type="submit"
-              size="compact"
-              disabled={!isValid || isCommitting}
+              size="S"
+              isDisabled={!isValid || isCommitting}
             >
               {isCommitting ? "Creating..." : "Create Key"}
             </Button>
diff --git a/app/src/components/auth/DeleteAPIKeyButton.tsx b/app/src/components/auth/DeleteAPIKeyButton.tsx
index 346b25c719..3a5d4a066b 100644
--- a/app/src/components/auth/DeleteAPIKeyButton.tsx
+++ b/app/src/components/auth/DeleteAPIKeyButton.tsx
@@ -1,7 +1,6 @@
 import React, { ReactNode, useState } from "react";
 
 import {
-  Button,
   Dialog,
   DialogContainer,
   Flex,
@@ -11,6 +10,8 @@ import {
   View,
 } from "@arizeai/components";
 
+import { Button } from "@phoenix/components";
+
 export function DeleteAPIKeyButton({
   handleDelete,
 }: {
@@ -36,7 +37,7 @@ export function DeleteAPIKeyButton({
           <Flex direction="row" justifyContent="end">
             <Button
               variant="danger"
-              onClick={() => {
+              onPress={() => {
                 handleDelete();
                 setDialog(null);
               }}
@@ -52,10 +53,10 @@ export function DeleteAPIKeyButton({
     <>
       <Button
         variant="danger"
-        size="compact"
+        size="S"
         icon={<Icon svg={<Icons.TrashOutline />} />}
         aria-label="Delete System Key"
-        onClick={onDelete}
+        onPress={onDelete}
       />
       <DialogContainer
         isDismissable
diff --git a/app/src/components/auth/OneTimeAPIKeyDialog.tsx b/app/src/components/auth/OneTimeAPIKeyDialog.tsx
index a85b3b86d9..16b648cea1 100644
--- a/app/src/components/auth/OneTimeAPIKeyDialog.tsx
+++ b/app/src/components/auth/OneTimeAPIKeyDialog.tsx
@@ -37,7 +37,7 @@ export function OneTimeAPIKeyDialog(props: { jwt: string }) {
         <View padding="size-200">
           <Flex direction="row" gap="size-100" alignItems="end">
             <TextField label="API Key" isReadOnly value={jwt} minWidth="100%" />
-            <CopyToClipboardButton text={jwt} size="default" />
+            <CopyToClipboardButton text={jwt} />
           </Flex>
         </View>
         <View padding="size-200" borderTopColor="light" borderTopWidth="thin">
diff --git a/app/src/components/button/index.tsx b/app/src/components/button/index.tsx
new file mode 100644
index 0000000000..e22c29adcf
--- /dev/null
+++ b/app/src/components/button/index.tsx
@@ -0,0 +1 @@
+export * from "./Button";
diff --git a/app/src/components/code/styles.tsx b/app/src/components/code/styles.tsx
index c8c3293326..b3e58a5256 100644
--- a/app/src/components/code/styles.tsx
+++ b/app/src/components/code/styles.tsx
@@ -9,6 +9,10 @@ export const readOnlyCodeMirrorCSS = css`
 
 export const codeBlockWithCopyCSS = css`
   position: relative;
+  min-height: 47px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
   .copy-to-clipboard-button {
     position: absolute;
     top: var(--ac-global-dimension-size-100);
diff --git a/app/src/components/dataset/DatasetForm.tsx b/app/src/components/dataset/DatasetForm.tsx
index f53d1bcf4e..61e52c7ecc 100644
--- a/app/src/components/dataset/DatasetForm.tsx
+++ b/app/src/components/dataset/DatasetForm.tsx
@@ -1,15 +1,9 @@
 import React from "react";
 import { Controller, useForm } from "react-hook-form";
 
-import {
-  Button,
-  Flex,
-  Form,
-  TextArea,
-  TextField,
-  View,
-} from "@arizeai/components";
+import { Flex, Form, TextArea, TextField, View } from "@arizeai/components";
 
+import { Button } from "@phoenix/components";
 import { CodeEditorFieldWrapper, JSONEditor } from "@phoenix/components/code";
 import { isJSONObjectString } from "@phoenix/utils/jsonUtils";
 
@@ -129,11 +123,14 @@ export function DatasetForm({
           <Button
             // Only allow submission if the form is dirty for edits
             // When creating allow the user to click create without any changes as the form will be prefilled with valid values
-            disabled={formMode === "edit" ? !isDirty : false}
+            isDisabled={
+              (formMode === "edit" ? !isDirty : false) || isSubmitting
+            }
             variant={isDirty ? "primary" : "default"}
-            size="compact"
-            loading={isSubmitting}
-            onClick={handleSubmit(onSubmit)}
+            size="S"
+            onPress={() => {
+              handleSubmit(onSubmit)();
+            }}
           >
             {submitButtonText}
           </Button>
diff --git a/app/src/components/dataset/NewDatasetButton.tsx b/app/src/components/dataset/NewDatasetButton.tsx
index 813f00ce13..2442c736d3 100644
--- a/app/src/components/dataset/NewDatasetButton.tsx
+++ b/app/src/components/dataset/NewDatasetButton.tsx
@@ -2,7 +2,6 @@ import React, { useState } from "react";
 
 import {
   Alert,
-  Button,
   Card,
   Icon,
   Icons,
@@ -10,6 +9,7 @@ import {
   View,
 } from "@arizeai/components";
 
+import { Button } from "@phoenix/components";
 import { useNotifySuccess } from "@phoenix/contexts";
 
 import { CreateDatasetForm } from "./CreateDatasetForm";
diff --git a/app/src/components/index.tsx b/app/src/components/index.tsx
index aff57eeed2..640f378814 100644
--- a/app/src/components/index.tsx
+++ b/app/src/components/index.tsx
@@ -5,4 +5,7 @@ export * from "./LoadingMask";
 export * from "./Loading";
 export * from "./ViewSummaryAside";
 export * from "./CopyToClipboardButton";
+
+// design system based components
 export * from "./combobox";
+export * from "./button";
diff --git a/app/src/components/pointcloud/CanvasDisplaySettingsDropdown.tsx b/app/src/components/pointcloud/CanvasDisplaySettingsDropdown.tsx
index 625565d112..1724565320 100644
--- a/app/src/components/pointcloud/CanvasDisplaySettingsDropdown.tsx
+++ b/app/src/components/pointcloud/CanvasDisplaySettingsDropdown.tsx
@@ -1,7 +1,8 @@
 import React from "react";
 
+// eslint-disable-next-line deprecate/import
 import {
-  Button,
+  Button as LegacyButton,
   DropdownMenu,
   DropdownTrigger,
   Flex,
@@ -20,8 +21,8 @@ export function CanvasDisplaySettingsDropdown() {
   const pointSizeScale = usePointCloudContext((state) => state.pointSizeScale);
   return (
     <DropdownTrigger placement="bottom left">
-      <Button
-        variant={"default"}
+      <LegacyButton
+        variant="default"
         size="compact"
         icon={<Icon svg={<Icons.OptionsOutline />} />}
         aria-label="Display Settings"
diff --git a/app/src/components/pointcloud/ClusteringSettings.tsx b/app/src/components/pointcloud/ClusteringSettings.tsx
index 51d3c36804..1a0aeee218 100644
--- a/app/src/components/pointcloud/ClusteringSettings.tsx
+++ b/app/src/components/pointcloud/ClusteringSettings.tsx
@@ -3,7 +3,6 @@ import { Controller, useForm } from "react-hook-form";
 import { css } from "@emotion/react";
 
 import {
-  Button,
   Content,
   ContextualHelp,
   Form,
@@ -12,6 +11,7 @@ import {
   TextField,
 } from "@arizeai/components";
 
+import { Button } from "@phoenix/components";
 import { MAX_32_BIT_INTEGER } from "@phoenix/constants/numberConstants";
 import {
   MIN_CLUSTER_MIN_SAMPLES,
@@ -243,15 +243,12 @@ export default function ClusteringSettings() {
           <Button
             variant={isDirty ? "primary" : "default"}
             type="submit"
-            isDisabled={!isValid}
-            loading={clustersLoading}
+            isDisabled={!isValid || clustersLoading}
             css={css`
               width: 100%;
             `}
           >
-            {clustersLoading
-              ? "Applying parameters"
-              : "Apply Clustering Config"}
+            {clustersLoading ? "Applying..." : "Apply Clustering Config"}
           </Button>
         </div>
       </Form>
diff --git a/app/src/components/pointcloud/PointCloud.tsx b/app/src/components/pointcloud/PointCloud.tsx
index a58e49cde8..9586776a87 100644
--- a/app/src/components/pointcloud/PointCloud.tsx
+++ b/app/src/components/pointcloud/PointCloud.tsx
@@ -5,11 +5,11 @@ import { ThemeContext as EmotionThemeContext } from "@emotion/react";
 
 import {
   ActionTooltip,
-  Button,
   Heading,
   Icon,
   InfoOutline,
   TooltipTrigger,
+  TriggerWrap,
 } from "@arizeai/components";
 import {
   Axes,
@@ -21,6 +21,7 @@ import {
   ThreeDimensionalControls,
 } from "@arizeai/point-cloud";
 
+import { Button } from "@phoenix/components";
 import { UNKNOWN_COLOR } from "@phoenix/constants/pointCloudConstants";
 import {
   InferencesContext,
@@ -184,12 +185,13 @@ function CanvasTools() {
 function CanvasInfo() {
   return (
     <TooltipTrigger placement="bottom left" delay={0}>
-      <Button
-        variant="default"
-        size="compact"
-        icon={<Icon svg={<InfoOutline />} />}
-        aria-label="Information bout the point-cloud display"
-      />
+      <TriggerWrap>
+        <Button
+          size="S"
+          icon={<Icon svg={<InfoOutline />} />}
+          aria-label="Information bout the point-cloud display"
+        />
+      </TriggerWrap>
       <ActionTooltip title={"Point Cloud Summary"}>
         <PointCloudInfo />
       </ActionTooltip>
diff --git a/app/src/components/pointcloud/PointCloudParameterSettings.tsx b/app/src/components/pointcloud/PointCloudParameterSettings.tsx
index f7413fcdad..d91a057334 100644
--- a/app/src/components/pointcloud/PointCloudParameterSettings.tsx
+++ b/app/src/components/pointcloud/PointCloudParameterSettings.tsx
@@ -3,7 +3,6 @@ import { Controller, useForm } from "react-hook-form";
 import { css } from "@emotion/react";
 
 import {
-  Button,
   Content,
   ContextualHelp,
   Form,
@@ -12,6 +11,7 @@ import {
   TextField,
 } from "@arizeai/components";
 
+import { Button } from "@phoenix/components";
 import {
   MAX_INFERENCES_SAMPLE_SIZE,
   MAX_MIN_DIST,
diff --git a/app/src/components/settings/UserForm.tsx b/app/src/components/settings/UserForm.tsx
index 1a72c8a54a..a3020f5399 100644
--- a/app/src/components/settings/UserForm.tsx
+++ b/app/src/components/settings/UserForm.tsx
@@ -2,8 +2,9 @@ import React from "react";
 import { Controller, useForm } from "react-hook-form";
 import { css } from "@emotion/react";
 
-import { Button, Flex, Form, TextField, View } from "@arizeai/components";
+import { Flex, Form, TextField, View } from "@arizeai/components";
 
+import { Button } from "@phoenix/components";
 import { UserRole } from "@phoenix/constants";
 
 import { RolePicker } from "./RolePicker";
@@ -193,8 +194,8 @@ export function UserForm({
             <Button
               variant={isDirty ? "primary" : "default"}
               type="submit"
-              size="compact"
-              disabled={isSubmitting}
+              size="S"
+              isDisabled={isSubmitting}
             >
               {isSubmitting ? "Adding..." : "Add User"}
             </Button>
diff --git a/app/src/components/table/CellWithControlsWrapper.tsx b/app/src/components/table/CellWithControlsWrapper.tsx
index 0d5fa72309..2bfe78920c 100644
--- a/app/src/components/table/CellWithControlsWrapper.tsx
+++ b/app/src/components/table/CellWithControlsWrapper.tsx
@@ -14,7 +14,7 @@ const cellWithControlsWrapCSS = css`
     opacity: 1;
     display: flex;
     // make them stand out
-    .ac-button {
+    button {
       border-color: var(--ac-global-color-primary);
     }
   }
diff --git a/app/src/components/table/Table.tsx b/app/src/components/table/Table.tsx
index ff33afa07e..3ee6e12f15 100644
--- a/app/src/components/table/Table.tsx
+++ b/app/src/components/table/Table.tsx
@@ -8,7 +8,9 @@ import {
   useReactTable,
 } from "@tanstack/react-table";
 
-import { Button, Icon, Icons } from "@arizeai/components";
+import { Icon, Icons } from "@arizeai/components";
+
+import { Button } from "@phoenix/components";
 
 import { paginationCSS, tableCSS } from "./styles";
 import { TableEmpty } from "./TableEmpty";
@@ -75,25 +77,24 @@ export function Table<DataRow extends object>({
         </thead>
         {body}
       </table>
-      {/* 
+      {/*
         TODO(mikeldking): style tables
           This is just a very basic UI implementation
         */}
       <div css={paginationCSS}>
         <Button
           variant="default"
-          size="compact"
-          onClick={table.previousPage}
-          disabled={!table.getCanPreviousPage()}
+          size="S"
+          onPress={table.previousPage}
+          isDisabled={!table.getCanPreviousPage()}
           aria-label="Previous Page"
           icon={<Icon svg={<Icons.ArrowIosBackOutline />} />}
         />
 
         <Button
-          variant="default"
-          size="compact"
-          onClick={table.nextPage}
-          disabled={!table.getCanNextPage()}
+          size="S"
+          onPress={table.nextPage}
+          isDisabled={!table.getCanNextPage()}
           aria-label="Next Page"
           icon={<Icon svg={<Icons.ArrowIosForwardOutline />} />}
         />
diff --git a/app/src/components/trace/EditSpanAnnotationsDialog.tsx b/app/src/components/trace/EditSpanAnnotationsDialog.tsx
index b0757bc320..f7472a34f3 100644
--- a/app/src/components/trace/EditSpanAnnotationsDialog.tsx
+++ b/app/src/components/trace/EditSpanAnnotationsDialog.tsx
@@ -13,9 +13,10 @@ import {
 } from "react-relay";
 import { css } from "@emotion/react";
 
+// eslint-disable-next-line deprecate/import
 import {
   Alert,
-  Button,
+  Button as LegacyButton,
   Card,
   Dialog,
   Flex,
@@ -29,6 +30,7 @@ import {
   View,
 } from "@arizeai/components";
 
+import { Button } from "@phoenix/components";
 import { Empty } from "@phoenix/components/Empty";
 import { useNotifySuccess } from "@phoenix/contexts";
 import { formatFloat } from "@phoenix/utils/numberFormatUtils";
@@ -129,8 +131,8 @@ function NewAnnotationButton(props: NewAnnotationButtonProps) {
         setIsPopoverOpen(isOpen);
       }}
     >
-      <Button
-        variant="default"
+      <LegacyButton
+        variant="primary"
         disabled={disabled}
         size="compact"
         icon={<Icon svg={<Icons.PlusCircleOutline />} />}
@@ -138,8 +140,8 @@ function NewAnnotationButton(props: NewAnnotationButtonProps) {
           setIsPopoverOpen(true);
         }}
       >
-        New
-      </Button>
+        New Annotation
+      </LegacyButton>
       <NewAnnotationPopover
         projectId={projectId}
         spanNodeId={spanNodeId}
@@ -267,12 +269,11 @@ function NewSpanAnnotationCard(props: {
         <Flex direction="row" alignItems="center" gap="size-100">
           <AnnotatorKindLabel kind="HUMAN" />
           <Button
-            variant="default"
-            size="compact"
+            size="S"
             isDisabled
             aria-label="delete annotation"
             icon={<Icon svg={<Icons.CloseOutline />} />}
-            onClick={onDelete}
+            onPress={onDelete}
           />
         </Flex>
       }
@@ -477,7 +478,7 @@ function NewAnnotationPopoverContent(props: {
           />
           <Button
             variant="primary"
-            onClick={() => {
+            onPress={() => {
               onAnnotationNameSelect(newName);
             }}
           >
diff --git a/app/src/components/trace/SpanAnnotationActionMenu.tsx b/app/src/components/trace/SpanAnnotationActionMenu.tsx
index 947a009997..b54cf08683 100644
--- a/app/src/components/trace/SpanAnnotationActionMenu.tsx
+++ b/app/src/components/trace/SpanAnnotationActionMenu.tsx
@@ -6,16 +6,11 @@ import React, {
 } from "react";
 import { graphql, useMutation } from "react-relay";
 
-import {
-  Button,
-  Dialog,
-  DialogContainer,
-  Flex,
-  Text,
-  View,
-} from "@arizeai/components";
+import { Dialog, DialogContainer, Flex, Text, View } from "@arizeai/components";
 import { NoticeConfig } from "@arizeai/components/dist/notification/types";
 
+import { Button } from "@phoenix/components";
+
 import { SpanAnnotationActionMenuDeleteMutation } from "./__generated__/SpanAnnotationActionMenuDeleteMutation.graphql";
 import { AnnotationActionMenu } from "./AnnotationActionMenu";
 
@@ -101,7 +96,7 @@ export function SpanAnnotationActionMenu(props: SpanAnnotationActionMenuProps) {
           <Flex direction="row" justifyContent="end">
             <Button
               variant="danger"
-              onClick={() => {
+              onPress={() => {
                 handleDelete();
                 setConfirmDialog(null);
               }}
diff --git a/app/src/components/trace/SpanAnnotationForm.tsx b/app/src/components/trace/SpanAnnotationForm.tsx
index 540e0d5d29..5e400ddc8e 100644
--- a/app/src/components/trace/SpanAnnotationForm.tsx
+++ b/app/src/components/trace/SpanAnnotationForm.tsx
@@ -2,15 +2,9 @@ import React, { useCallback } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { css } from "@emotion/react";
 
-import {
-  Button,
-  Flex,
-  Form,
-  TextArea,
-  TextField,
-  View,
-} from "@arizeai/components";
+import { Flex, Form, TextArea, TextField, View } from "@arizeai/components";
 
+import { Button } from "@phoenix/components";
 export type AnnotationFormData = {
   name: string;
   score?: number | null;
@@ -189,8 +183,8 @@ export function SpanAnnotationForm(props: SpanAnnotationFormProps) {
               <Button
                 variant={isDirty ? "primary" : "default"}
                 type="submit"
-                size="compact"
-                disabled={!isValid || !isDirty || isSubmitting}
+                size="S"
+                isDisabled={!isValid || !isDirty || isSubmitting}
               >
                 {isSubmitting ? "Saving..." : "Save"}
               </Button>
diff --git a/app/src/components/trace/TraceTree.tsx b/app/src/components/trace/TraceTree.tsx
index 7682876d65..a432b00d86 100644
--- a/app/src/components/trace/TraceTree.tsx
+++ b/app/src/components/trace/TraceTree.tsx
@@ -7,16 +7,17 @@ import React, {
 import { css } from "@emotion/react";
 
 import {
-  Button,
   classNames,
   Flex,
   Icon,
   Icons,
   Tooltip,
   TooltipTrigger,
+  TriggerWrap,
   View,
 } from "@arizeai/components";
 
+import { Button } from "@phoenix/components";
 import { TokenCount } from "@phoenix/components/trace/TokenCount";
 import { usePreferencesContext } from "@phoenix/contexts/PreferencesContext";
 
@@ -89,25 +90,27 @@ function TraceTreeToolbar() {
     <View borderBottomWidth="thin" borderColor="dark" padding="size-100">
       <Flex direction="row" justifyContent="end" flex="none" gap="size-100">
         <TooltipTrigger offset={5}>
-          <Button
-            variant="default"
-            size="compact"
-            aria-label={isCollapsed ? "Expand all" : "Collapse all"}
-            onClick={() => {
-              setIsCollapsed(!isCollapsed);
-            }}
-            icon={
-              <Icon
-                svg={
-                  isCollapsed ? (
-                    <Icons.RowCollapseOutline />
-                  ) : (
-                    <Icons.RowExpandOutline />
-                  )
-                }
-              />
-            }
-          />
+          <TriggerWrap>
+            <Button
+              variant="default"
+              size="S"
+              aria-label={isCollapsed ? "Expand all" : "Collapse all"}
+              onPress={() => {
+                setIsCollapsed(!isCollapsed);
+              }}
+              icon={
+                <Icon
+                  svg={
+                    isCollapsed ? (
+                      <Icons.RowCollapseOutline />
+                    ) : (
+                      <Icons.RowExpandOutline />
+                    )
+                  }
+                />
+              }
+            />
+          </TriggerWrap>
           <Tooltip>
             {isCollapsed
               ? "Expand all nested spans"
@@ -115,29 +118,30 @@ function TraceTreeToolbar() {
           </Tooltip>
         </TooltipTrigger>
         <TooltipTrigger offset={5}>
-          <Button
-            variant="default"
-            size="compact"
-            aria-label={
-              showMetricsInTraceTree
-                ? "Hide metrics in trace tree"
-                : "Show metrics in trace tree"
-            }
-            onClick={() => {
-              setShowMetricsInTraceTree(!showMetricsInTraceTree);
-            }}
-            icon={
-              <Icon
-                svg={
-                  showMetricsInTraceTree ? (
-                    <Icons.TimerOutline />
-                  ) : (
-                    <Icons.TimerOffOutline />
-                  )
-                }
-              />
-            }
-          />
+          <TriggerWrap>
+            <Button
+              size="S"
+              aria-label={
+                showMetricsInTraceTree
+                  ? "Hide metrics in trace tree"
+                  : "Show metrics in trace tree"
+              }
+              onPress={() => {
+                setShowMetricsInTraceTree(!showMetricsInTraceTree);
+              }}
+              icon={
+                <Icon
+                  svg={
+                    showMetricsInTraceTree ? (
+                      <Icons.TimerOutline />
+                    ) : (
+                      <Icons.TimerOffOutline />
+                    )
+                  }
+                />
+              }
+            />
+          </TriggerWrap>
           <Tooltip>
             {showMetricsInTraceTree
               ? "Hide metrics in trace tree"
diff --git a/app/src/pages/ErrorElement.tsx b/app/src/pages/ErrorElement.tsx
index 3f67876001..22cbceb811 100644
--- a/app/src/pages/ErrorElement.tsx
+++ b/app/src/pages/ErrorElement.tsx
@@ -2,9 +2,9 @@ import React, { useMemo } from "react";
 import { useRouteError } from "react-router";
 import { css } from "@emotion/react";
 
-import { Button, EmptyGraphic, Flex } from "@arizeai/components";
+import { EmptyGraphic, Flex } from "@arizeai/components";
 
-import { ExternalLink } from "@phoenix/components";
+import { Button, ExternalLink } from "@phoenix/components";
 
 export function ErrorElement() {
   const error = useRouteError();
@@ -107,8 +107,8 @@ function ErrorContent({ error }: { error: unknown }) {
 
         <Button
           variant="primary"
-          size="compact"
-          onClick={() => {
+          size="S"
+          onPress={() => {
             window.location.href = "/";
           }}
         >
diff --git a/app/src/pages/auth/ForgotPasswordForm.tsx b/app/src/pages/auth/ForgotPasswordForm.tsx
index b191eb41ad..da9e367d12 100644
--- a/app/src/pages/auth/ForgotPasswordForm.tsx
+++ b/app/src/pages/auth/ForgotPasswordForm.tsx
@@ -2,8 +2,9 @@ import React, { useCallback, useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { css } from "@emotion/react";
 
-import { Alert, Button, Form, TextField, View } from "@arizeai/components";
+import { Alert, Form, TextField, View } from "@arizeai/components";
 
+import { Button } from "@phoenix/components";
 import { prependBasename } from "@phoenix/utils/routingUtils";
 
 type ForgotPasswordFormParams = {
@@ -80,8 +81,8 @@ export function ForgotPasswordForm({
             }
           `}
         >
-          <Button variant="primary" type={"submit"} loading={isLoading}>
-            Send
+          <Button variant="primary" type={"submit"} isDisabled={isLoading}>
+            {isLoading ? "Sending..." : "Send"}
           </Button>
         </div>
       </Form>
diff --git a/app/src/pages/auth/LoginForm.tsx b/app/src/pages/auth/LoginForm.tsx
index a120fe74f3..a2fa61fd8a 100644
--- a/app/src/pages/auth/LoginForm.tsx
+++ b/app/src/pages/auth/LoginForm.tsx
@@ -3,8 +3,9 @@ import { Controller, useForm } from "react-hook-form";
 import { useNavigate } from "react-router";
 import { css } from "@emotion/react";
 
-import { Alert, Button, Form, TextField, View } from "@arizeai/components";
+import { Alert, Form, Icon, Icons, TextField, View } from "@arizeai/components";
 
+import { Button } from "@phoenix/components";
 import { Link } from "@phoenix/components";
 import { prependBasename } from "@phoenix/utils/routingUtils";
 import { getReturnUrl } from "@phoenix/utils/routingUtils";
@@ -129,10 +130,13 @@ export function LoginForm(props: LoginFormProps) {
         >
           <Button
             variant="primary"
-            loading={isLoading}
-            onClick={handleSubmit(onSubmit)}
+            isDisabled={isLoading}
+            icon={
+              isLoading ? <Icon svg={<Icons.LoadingOutline />} /> : undefined
+            }
+            onPress={() => handleSubmit(onSubmit)()}
           >
-            Login
+            {isLoading ? "Logging In" : "Log In"}
           </Button>
         </div>
       </Form>
diff --git a/app/src/pages/auth/OAuth2Login.tsx b/app/src/pages/auth/OAuth2Login.tsx
index ab711c252e..f59216b6e4 100644
--- a/app/src/pages/auth/OAuth2Login.tsx
+++ b/app/src/pages/auth/OAuth2Login.tsx
@@ -1,8 +1,7 @@
 import React, { ReactNode } from "react";
 import { css } from "@emotion/react";
 
-import { Button } from "@arizeai/components";
-
+import { Button } from "@phoenix/components";
 import { prependBasename } from "@phoenix/utils/routingUtils";
 
 type OAuth2LoginProps = {
diff --git a/app/src/pages/auth/ResetPasswordForm.tsx b/app/src/pages/auth/ResetPasswordForm.tsx
index be4bafe127..870d3c2da4 100644
--- a/app/src/pages/auth/ResetPasswordForm.tsx
+++ b/app/src/pages/auth/ResetPasswordForm.tsx
@@ -4,8 +4,9 @@ import { graphql, useMutation } from "react-relay";
 import { useNavigate } from "react-router";
 import { css } from "@emotion/react";
 
-import { Button, Form, TextField, View } from "@arizeai/components";
+import { Form, TextField, View } from "@arizeai/components";
 
+import { Button } from "@phoenix/components";
 import { useNotifyError } from "@phoenix/contexts";
 import { createRedirectUrlWithReturn } from "@phoenix/utils/routingUtils";
 
@@ -162,14 +163,13 @@ export function ResetPasswordForm() {
           `}
         >
           <Button
-            variant="default"
-            onClick={() => {
+            onPress={() => {
               navigate(-1);
             }}
           >
             Cancel
           </Button>
-          <Button variant={"primary"} type="submit" disabled={isCommitting}>
+          <Button variant="primary" type="submit" isDisabled={isCommitting}>
             {isCommitting ? "Resetting..." : "Reset Password"}
           </Button>
         </div>
diff --git a/app/src/pages/auth/ResetPasswordWithTokenForm.tsx b/app/src/pages/auth/ResetPasswordWithTokenForm.tsx
index 8ae00b82d2..1f825863c7 100644
--- a/app/src/pages/auth/ResetPasswordWithTokenForm.tsx
+++ b/app/src/pages/auth/ResetPasswordWithTokenForm.tsx
@@ -3,8 +3,9 @@ import { Controller, useForm } from "react-hook-form";
 import { useNavigate } from "react-router";
 import { css } from "@emotion/react";
 
-import { Alert, Button, Form, TextField, View } from "@arizeai/components";
+import { Alert, Form, TextField, View } from "@arizeai/components";
 
+import { Button } from "@phoenix/components";
 import { prependBasename } from "@phoenix/utils/routingUtils";
 
 const MIN_PASSWORD_LENGTH = 4;
@@ -145,7 +146,7 @@ export function ResetPasswordWithTokenForm({
           <Button
             variant={isDirty ? "primary" : "default"}
             type="submit"
-            disabled={isLoading}
+            isDisabled={isLoading}
           >
             {isLoading ? "Resetting..." : "Reset Password"}
           </Button>
diff --git a/app/src/pages/dataset/AddDatasetExampleButton.tsx b/app/src/pages/dataset/AddDatasetExampleButton.tsx
index d872657340..4bf3335786 100644
--- a/app/src/pages/dataset/AddDatasetExampleButton.tsx
+++ b/app/src/pages/dataset/AddDatasetExampleButton.tsx
@@ -1,6 +1,8 @@
 import React, { ReactNode, useCallback, useState } from "react";
 
-import { Button, DialogContainer, Icon, Icons } from "@arizeai/components";
+import { DialogContainer, Icon, Icons } from "@arizeai/components";
+
+import { Button } from "@phoenix/components";
 
 import { AddDatasetExampleDialog } from "./AddDatasetExampleDialog";
 
@@ -28,9 +30,8 @@ export function AddDatasetExampleButton(props: AddDatasetExampleButtonProps) {
     <>
       <Button
         icon={<Icon svg={<Icons.PlusCircleOutline />} />}
-        size="compact"
-        variant="default"
-        onClick={onAddExample}
+        size="S"
+        onPress={onAddExample}
       >
         Add Example
       </Button>
diff --git a/app/src/pages/dataset/AddDatasetExampleDialog.tsx b/app/src/pages/dataset/AddDatasetExampleDialog.tsx
index a2a0f89d71..025e37d260 100644
--- a/app/src/pages/dataset/AddDatasetExampleDialog.tsx
+++ b/app/src/pages/dataset/AddDatasetExampleDialog.tsx
@@ -5,15 +5,17 @@ import { css } from "@emotion/react";
 
 import {
   Alert,
-  Button,
   Card,
   CardProps,
   Dialog,
   Flex,
+  Icon,
+  Icons,
   TextArea,
   View,
 } from "@arizeai/components";
 
+import { Button } from "@phoenix/components";
 import { JSONEditor } from "@phoenix/components/code";
 import { isJSONObjectString } from "@phoenix/utils/jsonUtils";
 
@@ -226,12 +228,12 @@ export function AddDatasetExampleDialog(props: AddDatasetExampleDialogProps) {
         <Flex direction="row" justifyContent="end" gap="size-100">
           <Button
             variant="primary"
-            size="compact"
-            disabled={!isValid || isCommitting}
-            loading={isCommitting}
-            onClick={handleSubmit(onSubmit)}
+            size="S"
+            isDisabled={!isValid || isCommitting}
+            icon={isCommitting ? <Icon svg={<Icons.LoadingOutline />} /> : null}
+            onPress={() => handleSubmit(onSubmit)()}
           >
-            Add Example
+            {isCommitting ? "Adding Example..." : "Add Example"}
           </Button>
         </Flex>
       </View>
diff --git a/app/src/pages/dataset/DatasetCodeDropdown.tsx b/app/src/pages/dataset/DatasetCodeDropdown.tsx
index cd338421c6..740c980e53 100644
--- a/app/src/pages/dataset/DatasetCodeDropdown.tsx
+++ b/app/src/pages/dataset/DatasetCodeDropdown.tsx
@@ -72,7 +72,7 @@ export function DatasetCodeDropdown() {
                   width="100%"
                 >
                   <TextField label="Dataset ID" isReadOnly value={datasetId} />
-                  <CopyToClipboardButton text={datasetId} size="default" />
+                  <CopyToClipboardButton text={datasetId} size="M" />
                 </Flex>
                 <Flex direction="row" gap="size-100" alignItems="end">
                   <TextField
@@ -83,8 +83,8 @@ export function DatasetCodeDropdown() {
                   />
                   <CopyToClipboardButton
                     text={version?.id || "No Versions"}
-                    disabled={!version}
-                    size="default"
+                    isDisabled={!version}
+                    size="M"
                   />
                 </Flex>
               </Form>
@@ -105,7 +105,7 @@ export function DatasetCodeDropdown() {
                   <Form>
                     <Flex direction="row" gap="size-100" alignItems="end">
                       <TextField label="URL" isReadOnly value={datasetURL} />
-                      <CopyToClipboardButton text={datasetURL} size="default" />
+                      <CopyToClipboardButton text={datasetURL} size="M" />
                     </Flex>
                   </Form>
                 </View>
diff --git a/app/src/pages/dataset/DatasetHistoryButton.tsx b/app/src/pages/dataset/DatasetHistoryButton.tsx
index 116cd3cea9..ea9141e994 100644
--- a/app/src/pages/dataset/DatasetHistoryButton.tsx
+++ b/app/src/pages/dataset/DatasetHistoryButton.tsx
@@ -1,7 +1,6 @@
 import React, { ReactNode, Suspense, useState } from "react";
 
 import {
-  Button,
   DialogContainer,
   Icon,
   Icons,
@@ -9,6 +8,8 @@ import {
   TooltipTrigger,
 } from "@arizeai/components";
 
+import { Button } from "@phoenix/components";
+
 import { DatasetHistoryDialog } from "./DatasetHistoryDialog";
 
 export function DatasetHistoryButton(props: { datasetId: string }) {
@@ -18,10 +19,9 @@ export function DatasetHistoryButton(props: { datasetId: string }) {
     <>
       <TooltipTrigger>
         <Button
-          variant="default"
           icon={<Icon svg={<Icons.ClockOutline />} />}
           aria-label="Version History"
-          onClick={() => {
+          onPress={() => {
             setDialog(<DatasetHistoryDialog datasetId={datasetId} />);
           }}
         />
diff --git a/app/src/pages/dataset/DatasetPage.tsx b/app/src/pages/dataset/DatasetPage.tsx
index ccb5051919..122aea84bc 100644
--- a/app/src/pages/dataset/DatasetPage.tsx
+++ b/app/src/pages/dataset/DatasetPage.tsx
@@ -4,7 +4,6 @@ import { css } from "@emotion/react";
 
 import {
   ActionMenu,
-  Button,
   Counter,
   Flex,
   Icon,
@@ -16,7 +15,7 @@ import {
   View,
 } from "@arizeai/components";
 
-import { Loading } from "@phoenix/components";
+import { Button, Loading } from "@phoenix/components";
 import { useNotifySuccess } from "@phoenix/contexts";
 import {
   DatasetProvider,
@@ -164,9 +163,8 @@ function DatasetPageContent({
             <DatasetCodeDropdown />
             <RunExperimentButton />
             <Button
-              variant={"default"}
               icon={<Icon svg={<Icons.PlayCircleOutline />} />}
-              onClick={() => {
+              onPress={() => {
                 navigate(`/playground/datasets/${dataset.id}`);
               }}
             >
diff --git a/app/src/pages/dataset/RunExperimentButton.tsx b/app/src/pages/dataset/RunExperimentButton.tsx
index 3d49f4309d..2550f34a22 100644
--- a/app/src/pages/dataset/RunExperimentButton.tsx
+++ b/app/src/pages/dataset/RunExperimentButton.tsx
@@ -1,7 +1,6 @@
 import React, { ReactNode, useCallback, useMemo, useState } from "react";
 
 import {
-  Button,
   Dialog,
   DialogContainer,
   Icon,
@@ -10,6 +9,7 @@ import {
   View,
 } from "@arizeai/components";
 
+import { Button } from "@phoenix/components";
 import { ExternalLink } from "@phoenix/components";
 import { IsAdmin, IsAuthenticated } from "@phoenix/components/auth";
 import { CodeWrap } from "@phoenix/components/code/CodeWrap";
@@ -63,10 +63,9 @@ export function RunExperimentButton() {
   return (
     <>
       <Button
-        size="compact"
-        variant="default"
+        size="S"
         icon={<Icon svg={<Icons.ExperimentOutline />} />}
-        onClick={onRunExample}
+        onPress={onRunExample}
       >
         Run Experiment
       </Button>
diff --git a/app/src/pages/datasets/DatasetFromCSVForm.tsx b/app/src/pages/datasets/DatasetFromCSVForm.tsx
index 316e55d6bf..635d9026bf 100644
--- a/app/src/pages/datasets/DatasetFromCSVForm.tsx
+++ b/app/src/pages/datasets/DatasetFromCSVForm.tsx
@@ -3,7 +3,6 @@ import { Controller, useForm } from "react-hook-form";
 import { css } from "@emotion/react";
 
 import {
-  Button,
   Dropdown,
   DropdownProps,
   Field,
@@ -17,6 +16,8 @@ import {
   View,
 } from "@arizeai/components";
 
+import { Button } from "@phoenix/components";
+
 type CreateDatasetFromCSVParams = {
   file: FileList;
   input_keys: string[];
@@ -263,8 +264,7 @@ export function DatasetFromCSVForm(props: CreateDatasetFromCSVFormProps) {
             type="submit"
             isDisabled={!isValid}
             variant={isDirty ? "primary" : "default"}
-            size="compact"
-            loading={false}
+            size="S"
           >
             Create Dataset
           </Button>
diff --git a/app/src/pages/datasets/DeleteDatasetDialog.tsx b/app/src/pages/datasets/DeleteDatasetDialog.tsx
index b009e0eee1..36ffd7e7fb 100644
--- a/app/src/pages/datasets/DeleteDatasetDialog.tsx
+++ b/app/src/pages/datasets/DeleteDatasetDialog.tsx
@@ -2,7 +2,9 @@ import React, { startTransition, useCallback } from "react";
 import { useMutation } from "react-relay";
 import { graphql } from "relay-runtime";
 
-import { Button, Dialog, Flex, Text, View } from "@arizeai/components";
+import { Dialog, Flex, Icon, Icons, Text, View } from "@arizeai/components";
+
+import { Button } from "@phoenix/components";
 
 import { DeleteDatasetDialogMutation } from "./__generated__/DeleteDatasetDialogMutation.graphql";
 
@@ -58,11 +60,21 @@ export function DeleteDatasetDialog({
         <Flex direction="row" justifyContent="end">
           <Button
             variant="danger"
-            onClick={() => {
+            onPress={() => {
               handleDelete();
             }}
-            disabled={isCommittingDelete}
-            loading={isCommittingDelete}
+            isDisabled={isCommittingDelete}
+            icon={
+              <Icon
+                svg={
+                  isCommittingDelete ? (
+                    <Icons.LoadingOutline />
+                  ) : (
+                    <Icons.TrashOutline />
+                  )
+                }
+              />
+            }
           >
             Delete Dataset
           </Button>
diff --git a/app/src/pages/embedding/ExportSelectionButton.tsx b/app/src/pages/embedding/ExportSelectionButton.tsx
index 7de5243d4c..29827c6441 100644
--- a/app/src/pages/embedding/ExportSelectionButton.tsx
+++ b/app/src/pages/embedding/ExportSelectionButton.tsx
@@ -9,16 +9,17 @@ import {
   Accordion,
   AccordionItem,
   Alert,
-  Button,
   Dialog,
   DialogContainer,
   Download,
   Icon,
+  Icons,
   List,
   ListItem,
   View,
 } from "@arizeai/components";
 
+import { Button } from "@phoenix/components";
 import { Loading } from "@phoenix/components";
 import { useTheme } from "@phoenix/contexts";
 import { usePointCloudContext } from "@phoenix/contexts";
@@ -71,7 +72,7 @@ export function ExportSelectionButton() {
     `
   );
   const [exportInfo, setExportInfo] = useState<ExportInfo | null>(null);
-  const onClick = useCallback(() => {
+  const onPress = useCallback(() => {
     commit({
       variables: {
         eventIds: [...selectedEventIds],
@@ -85,12 +86,15 @@ export function ExportSelectionButton() {
   return (
     <>
       <Button
-        variant="default"
-        size="compact"
-        icon={<Icon svg={<Download />} />}
+        size="S"
+        icon={
+          <Icon
+            svg={isInFlight ? <Icons.LoadingOutline /> : <Icons.Download />}
+          />
+        }
         aria-label="Export selection / cluster"
-        loading={isInFlight}
-        onClick={onClick}
+        isDisabled={isInFlight}
+        onPress={onPress}
       >
         {isInFlight ? "Exporting" : "Export"}
       </Button>
@@ -108,8 +112,8 @@ export function ExportSelectionButton() {
               extra={
                 <Button
                   variant="success"
-                  size="compact"
-                  onClick={() => {
+                  size="S"
+                  onPress={() => {
                     window.open(
                       `/exports?filename=${exportInfo.fileName}`,
                       "_self"
@@ -190,11 +194,11 @@ function ExportsList() {
           >
             {fileInfo.fileName}
             <Button
-              size="compact"
+              size="S"
               aria-label="Download"
               variant="default"
               icon={<Icon svg={<Download />} />}
-              onClick={() => {
+              onPress={() => {
                 window.open(`/exports?filename=${fileInfo.fileName}`, "_self");
               }}
             />
diff --git a/app/src/pages/embedding/PointSelectionPanelContent.tsx b/app/src/pages/embedding/PointSelectionPanelContent.tsx
index 4cd5ca2bde..b51e983a90 100644
--- a/app/src/pages/embedding/PointSelectionPanelContent.tsx
+++ b/app/src/pages/embedding/PointSelectionPanelContent.tsx
@@ -3,7 +3,6 @@ import { graphql, useLazyLoadQuery } from "react-relay";
 import { css } from "@emotion/react";
 
 import {
-  Button,
   CloseOutline,
   CompactSearchField,
   Dialog,
@@ -14,6 +13,7 @@ import {
   Text,
 } from "@arizeai/components";
 
+import { Button } from "@phoenix/components";
 import { Toolbar } from "@phoenix/components/filter";
 import { SelectionDisplayRadioGroup } from "@phoenix/components/pointcloud";
 import { SelectionGridSizeRadioGroup } from "@phoenix/components/pointcloud/SelectionGridSizeRadioGroup";
@@ -313,11 +313,10 @@ export function PointSelectionPanelContent() {
         `}
       >
         <Button
-          variant="default"
-          size="compact"
+          size="S"
           icon={<Icon svg={<CloseOutline />} />}
           aria-label="Clear selection"
-          onClick={onClose}
+          onPress={onClose}
         />
         <ExportSelectionButton />
       </div>
diff --git a/app/src/pages/example/EditExampleButton.tsx b/app/src/pages/example/EditExampleButton.tsx
index 9c2764d885..bf21009772 100644
--- a/app/src/pages/example/EditExampleButton.tsx
+++ b/app/src/pages/example/EditExampleButton.tsx
@@ -1,6 +1,8 @@
 import React, { ReactNode, useState } from "react";
 
-import { Button, DialogContainer, Icon, Icons } from "@arizeai/components";
+import { DialogContainer, Icon, Icons } from "@arizeai/components";
+
+import { Button } from "@phoenix/components";
 
 import { EditExampleDialog, EditExampleDialogProps } from "./EditExampleDialog";
 
@@ -11,10 +13,9 @@ export function EditExampleButton(props: EditExampleButtonProps) {
   return (
     <>
       <Button
-        variant="default"
-        size="compact"
+        size="S"
         icon={<Icon svg={<Icons.EditOutline />} />}
-        onClick={() =>
+        onPress={() =>
           setDialog(
             <EditExampleDialog
               {...dialogProps}
diff --git a/app/src/pages/example/EditExampleDialog.tsx b/app/src/pages/example/EditExampleDialog.tsx
index 412f4ae217..b12f53f8b9 100644
--- a/app/src/pages/example/EditExampleDialog.tsx
+++ b/app/src/pages/example/EditExampleDialog.tsx
@@ -5,15 +5,17 @@ import { css } from "@emotion/react";
 
 import {
   Alert,
-  Button,
   Card,
   CardProps,
   Dialog,
   Flex,
+  Icon,
+  Icons,
   TextArea,
   View,
 } from "@arizeai/components";
 
+import { Button } from "@phoenix/components";
 import { JSONEditor } from "@phoenix/components/code";
 import { isJSONObjectString } from "@phoenix/utils/jsonUtils";
 
@@ -108,10 +110,16 @@ export function EditExampleDialog(props: EditExampleDialogProps) {
       extra={
         <Button
           variant="primary"
-          size="compact"
-          disabled={!isValid || isCommitting}
-          loading={isCommitting}
-          onClick={handleSubmit(onSubmit)}
+          size="S"
+          isDisabled={!isValid || isCommitting}
+          icon={
+            <Icon
+              svg={
+                isCommitting ? <Icons.LoadingOutline /> : <Icons.SaveOutline />
+              }
+            />
+          }
+          onPress={() => handleSubmit(onSubmit)()}
         >
           Save Changes
         </Button>
diff --git a/app/src/pages/example/ExampleDetailsDialog.tsx b/app/src/pages/example/ExampleDetailsDialog.tsx
index 0e14919875..cf257c6af8 100644
--- a/app/src/pages/example/ExampleDetailsDialog.tsx
+++ b/app/src/pages/example/ExampleDetailsDialog.tsx
@@ -5,7 +5,6 @@ import { useNavigate } from "react-router";
 import { css } from "@emotion/react";
 
 import {
-  Button,
   Card,
   CardProps,
   Dialog,
@@ -15,7 +14,7 @@ import {
   View,
 } from "@arizeai/components";
 
-import { CopyToClipboardButton } from "@phoenix/components";
+import { Button, CopyToClipboardButton } from "@phoenix/components";
 import { JSONBlock } from "@phoenix/components/code";
 import { resizeHandleCSS } from "@phoenix/components/resize";
 import { useNotifySuccess } from "@phoenix/contexts";
@@ -94,9 +93,8 @@ export function ExampleDetailsDialog({
           <Flex direction="row" gap="size-100">
             {sourceSpanInfo ? (
               <Button
-                variant="default"
-                size="compact"
-                onClick={() => {
+                size="S"
+                onPress={() => {
                   navigate(
                     `/projects/${sourceSpanInfo.projectId}/traces/${sourceSpanInfo.traceId}?selectedSpanNodeId=${sourceSpanInfo.id}`
                   );
diff --git a/app/src/pages/example/ExampleExperimentRunsTable.tsx b/app/src/pages/example/ExampleExperimentRunsTable.tsx
index 11da21c57b..33bb14a395 100644
--- a/app/src/pages/example/ExampleExperimentRunsTable.tsx
+++ b/app/src/pages/example/ExampleExperimentRunsTable.tsx
@@ -9,8 +9,9 @@ import {
 } from "@tanstack/react-table";
 import { css } from "@emotion/react";
 
-import { Button, Flex, Icon, Icons, Text, View } from "@arizeai/components";
+import { Flex, Icon, Icons, Text, View } from "@arizeai/components";
 
+import { Button } from "@phoenix/components";
 import {
   AnnotationLabel,
   AnnotationTooltip,
@@ -201,10 +202,9 @@ export function ExampleExperimentRunsTable({
         if (trace) {
           return (
             <Button
-              variant="default"
-              size="compact"
+              size="S"
               icon={<Icon svg={<Icons.Trace />} />}
-              onClick={() => {
+              onPress={() => {
                 navigate(
                   `/projects/${trace.projectId}/traces/${trace.traceId}`
                 );
@@ -271,12 +271,7 @@ export function ExampleExperimentRunsTable({
         ) : (
           <tbody>
             {rows.map((row) => (
-              <tr
-                key={row.id}
-                // onClick={() => {
-                //   navigate(`experiments/${row.original.id}`);
-                // }}
-              >
+              <tr key={row.id}>
                 {row.getVisibleCells().map((cell) => {
                   return (
                     <td key={cell.id}>
diff --git a/app/src/pages/examples/ExampleSelectionToolbar.tsx b/app/src/pages/examples/ExampleSelectionToolbar.tsx
index c3554b6342..54d1c3d775 100644
--- a/app/src/pages/examples/ExampleSelectionToolbar.tsx
+++ b/app/src/pages/examples/ExampleSelectionToolbar.tsx
@@ -3,7 +3,6 @@ import { graphql, useMutation } from "react-relay";
 import { css } from "@emotion/react";
 
 import {
-  Button,
   DialogContainer,
   Flex,
   Icon,
@@ -12,6 +11,7 @@ import {
   View,
 } from "@arizeai/components";
 
+import { Button } from "@phoenix/components";
 import { useNotifyError, useNotifySuccess } from "@phoenix/contexts";
 import { useDatasetContext } from "@phoenix/contexts/DatasetContext";
 
@@ -104,16 +104,25 @@ export function ExampleSelectionToolbar(props: ExampleSelectionToolbarProps) {
         >
           <Text>{`${selectedExamples.length} example${isPlural ? "s" : ""} selected`}</Text>
           <Flex direction="row" gap="size-100">
-            <Button variant="default" size="compact" onClick={onClearSelection}>
+            <Button variant="default" size="S" onPress={onClearSelection}>
               Cancel
             </Button>
             <Button
               variant="danger"
-              size="compact"
-              icon={<Icon svg={<Icons.TrashOutline />} />}
-              loading={isDeletingExamples}
-              disabled={isDeletingExamples}
-              onClick={onDeleteExamples}
+              size="S"
+              icon={
+                <Icon
+                  svg={
+                    isDeletingExamples ? (
+                      <Icons.LoadingOutline />
+                    ) : (
+                      <Icons.TrashOutline />
+                    )
+                  }
+                />
+              }
+              isDisabled={isDeletingExamples}
+              onPress={onDeleteExamples}
             >
               {isDeletingExamples
                 ? "Deleting..."
diff --git a/app/src/pages/experiment/ExperimentCompareTable.tsx b/app/src/pages/experiment/ExperimentCompareTable.tsx
index b1108fca4c..4f2015e067 100644
--- a/app/src/pages/experiment/ExperimentCompareTable.tsx
+++ b/app/src/pages/experiment/ExperimentCompareTable.tsx
@@ -20,7 +20,6 @@ import { css } from "@emotion/react";
 
 import {
   ActionMenu,
-  Button,
   Card,
   CardProps,
   Dialog,
@@ -36,6 +35,7 @@ import {
   View,
 } from "@arizeai/components";
 
+import { Button } from "@phoenix/components";
 import { CopyToClipboardButton, ViewSummaryAside } from "@phoenix/components";
 import {
   AnnotationLabel,
@@ -245,11 +245,10 @@ export function ExperimentCompareTable(props: ExampleCompareTableProps) {
               controls={
                 <TooltipTrigger>
                   <Button
-                    variant="default"
-                    size="compact"
+                    size="S"
                     aria-label="View example details"
                     icon={<Icon svg={<Icons.ExpandOutline />} />}
-                    onClick={() => {
+                    onPress={() => {
                       startTransition(() => {
                         setDialog(
                           <Suspense>
@@ -340,12 +339,10 @@ export function ExperimentCompareTable(props: ExampleCompareTableProps) {
               <Button
                 variant="default"
                 className="trace-button"
-                size="compact"
+                size="S"
                 aria-label="View run trace"
                 icon={<Icon svg={<Icons.Trace />} />}
-                onClick={(e) => {
-                  e.preventDefault();
-                  e.stopPropagation();
+                onPress={() => {
                   startTransition(() => {
                     setDialog(
                       <TraceDetailsDialog
@@ -367,12 +364,10 @@ export function ExperimentCompareTable(props: ExampleCompareTableProps) {
               <Button
                 variant="default"
                 className="expand-button"
-                size="compact"
+                size="S"
                 aria-label="View example run details"
                 icon={<Icon svg={<Icons.ExpandOutline />} />}
-                onClick={(e) => {
-                  e.preventDefault();
-                  e.stopPropagation();
+                onPress={() => {
                   startTransition(() => {
                     setDialog(
                       <SelectedExampleDialog
@@ -928,8 +923,7 @@ function TraceDetailsDialog({
       size="fullscreen"
       extra={
         <Button
-          variant="default"
-          onClick={() => navigate(`/projects/${projectId}/traces/${traceId}`)}
+          onPress={() => navigate(`/projects/${projectId}/traces/${traceId}`)}
         >
           View Trace in Project
         </Button>
diff --git a/app/src/pages/experiments/ExperimentSelectionToolbar.tsx b/app/src/pages/experiments/ExperimentSelectionToolbar.tsx
index ec42a40ce8..6d9883d952 100644
--- a/app/src/pages/experiments/ExperimentSelectionToolbar.tsx
+++ b/app/src/pages/experiments/ExperimentSelectionToolbar.tsx
@@ -4,7 +4,6 @@ import { useNavigate } from "react-router";
 import { css } from "@emotion/react";
 
 import {
-  Button,
   Dialog,
   DialogContainer,
   Flex,
@@ -14,6 +13,7 @@ import {
   View,
 } from "@arizeai/components";
 
+import { Button } from "@phoenix/components";
 import { useNotifyError, useNotifySuccess } from "@phoenix/contexts";
 
 interface SelectedExperiment {
@@ -84,7 +84,7 @@ export function ExperimentSelectionToolbar(
     selectedExperiments,
   ]);
 
-  const onClickDelete = useCallback(() => {
+  const onPressDelete = useCallback(() => {
     setDialog(
       <Dialog size="S" title="Delete Experiments">
         <View padding="size-200">
@@ -102,7 +102,7 @@ export function ExperimentSelectionToolbar(
           <Flex direction="row" justifyContent="end">
             <Button
               variant="danger"
-              onClick={() => {
+              onPress={() => {
                 handleDelete();
                 setDialog(null);
               }}
@@ -140,23 +140,32 @@ export function ExperimentSelectionToolbar(
         >
           <Text>{`${selectedExperiments.length} experiment${isPlural ? "s" : ""} selected`}</Text>
           <Flex direction="row" gap="size-100">
-            <Button variant="default" size="compact" onClick={onClearSelection}>
+            <Button variant="default" size="S" onPress={onClearSelection}>
               Cancel
             </Button>
             <Button
               variant="danger"
-              size="compact"
-              icon={<Icon svg={<Icons.TrashOutline />} />}
-              loading={isDeletingExperiments}
-              disabled={isDeletingExperiments}
-              onClick={onClickDelete}
+              size="S"
+              icon={
+                <Icon
+                  svg={
+                    isDeletingExperiments ? (
+                      <Icons.LoadingOutline />
+                    ) : (
+                      <Icons.TrashOutline />
+                    )
+                  }
+                />
+              }
+              isDisabled={isDeletingExperiments}
+              onPress={onPressDelete}
             >
               {isDeletingExperiments ? "Deleting..." : "Delete"}
             </Button>
             <Button
               variant="primary"
-              size="compact"
-              onClick={() => {
+              size="S"
+              onPress={() => {
                 navigate(
                   `/datasets/${datasetId}/compare?${selectedExperiments.map((experiment) => `experimentId=${experiment.id}`).join("&")}`
                 );
diff --git a/app/src/pages/playground/ModelConfigButton.tsx b/app/src/pages/playground/ModelConfigButton.tsx
index 8458b858df..efb88a9c86 100644
--- a/app/src/pages/playground/ModelConfigButton.tsx
+++ b/app/src/pages/playground/ModelConfigButton.tsx
@@ -12,7 +12,6 @@ import debounce from "lodash/debounce";
 import { css } from "@emotion/react";
 
 import {
-  Button,
   Dialog,
   DialogContainer,
   Flex,
@@ -27,6 +26,7 @@ import {
   TriggerWrap,
 } from "@arizeai/components";
 
+import { Button } from "@phoenix/components";
 import {
   AZURE_OPENAI_API_VERSIONS,
   ModelProviders,
@@ -171,16 +171,12 @@ export function ModelConfigButton(props: ModelConfigButtonProps) {
   return (
     <Fragment>
       <Button
-        variant="default"
-        size="compact"
-        onClick={() => {
+        size="S"
+        onPress={() => {
           startTransition(() => {
             setDialog(<ModelConfigDialog {...props} />);
           });
         }}
-        title={`${ModelProviders[instance.model.provider]} ${
-          instance.model.modelName || "--"
-        }`}
       >
         <Flex direction="row" gap="size-100" alignItems="center">
           <Text weight="heavy">{ModelProviders[instance.model.provider]}</Text>
@@ -263,9 +259,9 @@ function ModelConfigDialog(props: ModelConfigDialogProps) {
       extra={
         <TooltipTrigger delay={0} offset={5}>
           <Button
-            size={"compact"}
+            size="S"
             variant="default"
-            onClick={onSaveConfig}
+            onPress={onSaveConfig}
             icon={<Icon svg={<Icons.SaveOutline />} />}
           >
             Save as Default
diff --git a/app/src/pages/playground/Playground.tsx b/app/src/pages/playground/Playground.tsx
index eab38b5671..f251ee3084 100644
--- a/app/src/pages/playground/Playground.tsx
+++ b/app/src/pages/playground/Playground.tsx
@@ -13,7 +13,6 @@ import { css } from "@emotion/react";
 import {
   Accordion,
   AccordionItem,
-  Button,
   Flex,
   Heading,
   Icon,
@@ -21,7 +20,7 @@ import {
   View,
 } from "@arizeai/components";
 
-import { Loading } from "@phoenix/components";
+import { Button, Loading } from "@phoenix/components";
 import { ConfirmNavigationDialog } from "@phoenix/components/ConfirmNavigation";
 import { resizeHandleCSS } from "@phoenix/components/resize";
 import { TemplateLanguages } from "@phoenix/components/templateEditor/constants";
@@ -141,25 +140,17 @@ function AddPromptButton() {
   const numInstances = instances.length;
   const isRunning = instances.some((instance) => instance.activeRunId != null);
   return (
-    <div
-      onClick={(e) => {
-        // Stop propagation to prevent the accordion from closing
-        e.stopPropagation();
+    <Button
+      size="S"
+      aria-label="add prompt"
+      icon={<Icon svg={<Icons.PlusCircleOutline />} />}
+      isDisabled={numInstances >= NUM_MAX_PLAYGROUND_INSTANCES || isRunning}
+      onPress={() => {
+        addInstance();
       }}
     >
-      <Button
-        variant="default"
-        size="compact"
-        aria-label="add prompt"
-        icon={<Icon svg={<Icons.PlusCircleOutline />} />}
-        disabled={numInstances >= NUM_MAX_PLAYGROUND_INSTANCES || isRunning}
-        onClick={() => {
-          addInstance();
-        }}
-      >
-        Compare
-      </Button>
-    </div>
+      Compare
+    </Button>
   );
 }
 
diff --git a/app/src/pages/playground/PlaygroundChatTemplate.tsx b/app/src/pages/playground/PlaygroundChatTemplate.tsx
index 49cee0d59f..0c12bcd573 100644
--- a/app/src/pages/playground/PlaygroundChatTemplate.tsx
+++ b/app/src/pages/playground/PlaygroundChatTemplate.tsx
@@ -16,7 +16,6 @@ import { CSS } from "@dnd-kit/utilities";
 import { css } from "@emotion/react";
 
 import {
-  Button,
   Card,
   Field,
   Flex,
@@ -27,7 +26,7 @@ import {
   View,
 } from "@arizeai/components";
 
-import { CopyToClipboardButton } from "@phoenix/components";
+import { Button, CopyToClipboardButton } from "@phoenix/components";
 import { CodeWrap, JSONEditor } from "@phoenix/components/code";
 import { DragHandle } from "@phoenix/components/dnd/DragHandle";
 import { TemplateEditor } from "@phoenix/components/templateEditor";
@@ -453,9 +452,8 @@ function SortableMessageItem({
             <Button
               aria-label="Delete message"
               icon={<Icon svg={<Icons.TrashOutline />} />}
-              variant="default"
-              size="compact"
-              onClick={() => {
+              size="S"
+              onPress={() => {
                 updateInstance({
                   instanceId: playgroundInstanceId,
                   patch: {
diff --git a/app/src/pages/playground/PlaygroundChatTemplateFooter.tsx b/app/src/pages/playground/PlaygroundChatTemplateFooter.tsx
index 258067b2de..d37dc1364f 100644
--- a/app/src/pages/playground/PlaygroundChatTemplateFooter.tsx
+++ b/app/src/pages/playground/PlaygroundChatTemplateFooter.tsx
@@ -1,7 +1,8 @@
 import React from "react";
 
-import { Button, Flex, Icon, Icons } from "@arizeai/components";
+import { Flex, Icon, Icons } from "@arizeai/components";
 
+import { Button } from "@phoenix/components";
 import { usePlaygroundContext } from "@phoenix/contexts/PlaygroundContext";
 import {
   createOpenAIResponseFormat,
@@ -71,12 +72,11 @@ export function PlaygroundChatTemplateFooter({
     >
       {supportsResponseFormat ? (
         <Button
-          variant="default"
-          size="compact"
+          size="S"
           aria-label="output schema"
           icon={<Icon svg={<Icons.PlusOutline />} />}
-          disabled={hasResponseFormat}
-          onClick={() => {
+          isDisabled={hasResponseFormat}
+          onPress={() => {
             upsertInvocationParameterInput({
               instanceId,
               invocationParameterInput: {
@@ -92,11 +92,10 @@ export function PlaygroundChatTemplateFooter({
       ) : null}
       {supportsToolChoice ? (
         <Button
-          variant="default"
           aria-label="add tool"
-          size="compact"
+          size="S"
           icon={<Icon svg={<Icons.PlusOutline />} />}
-          onClick={() => {
+          onPress={() => {
             const patch: Partial<PlaygroundInstance> = {
               tools: [
                 ...playgroundInstance.tools,
@@ -127,11 +126,10 @@ export function PlaygroundChatTemplateFooter({
         </Button>
       ) : null}
       <Button
-        variant="default"
         aria-label="add message"
-        size="compact"
+        size="S"
         icon={<Icon svg={<Icons.PlusOutline />} />}
-        onClick={() => {
+        onPress={() => {
           updateInstance({
             instanceId,
             patch: {
diff --git a/app/src/pages/playground/PlaygroundDatasetExamplesTable.tsx b/app/src/pages/playground/PlaygroundDatasetExamplesTable.tsx
index c4203b8859..378e7c8ee1 100644
--- a/app/src/pages/playground/PlaygroundDatasetExamplesTable.tsx
+++ b/app/src/pages/playground/PlaygroundDatasetExamplesTable.tsx
@@ -34,7 +34,6 @@ import {
 import { css } from "@emotion/react";
 
 import {
-  Button,
   DialogContainer,
   Flex,
   Icon,
@@ -44,7 +43,7 @@ import {
   TooltipTrigger,
 } from "@arizeai/components";
 
-import { Loading } from "@phoenix/components";
+import { Button, Loading } from "@phoenix/components";
 import { AlphabeticIndexIcon } from "@phoenix/components/AlphabeticIndexIcon";
 import { JSONText } from "@phoenix/components/code/JSONText";
 import { borderedTableCSS, tableCSS } from "@phoenix/components/table/styles";
@@ -164,7 +163,7 @@ const cellWithControlsWrapCSS = css`
     opacity: 1;
     display: flex;
     // make them stand out
-    .ac-button {
+    button {
       border-color: var(--ac-global-color-primary);
     }
   }
@@ -274,13 +273,10 @@ function ExampleOutputContent({
           {hasExperimentRun && (
             <TooltipTrigger>
               <Button
-                variant="default"
-                size="compact"
+                size="S"
                 aria-label="View experiment run details"
                 icon={<Icon svg={<Icons.ExpandOutline />} />}
-                onClick={(e) => {
-                  e.preventDefault();
-                  e.stopPropagation();
+                onPress={() => {
                   startTransition(() => {
                     setDialog(
                       <PlaygroundExperimentRunDetailsDialog
@@ -297,13 +293,10 @@ function ExampleOutputContent({
             <>
               <TooltipTrigger>
                 <Button
-                  variant="default"
-                  size="compact"
+                  size="S"
                   aria-label="View run trace"
                   icon={<Icon svg={<Icons.Trace />} />}
-                  onClick={(e) => {
-                    e.preventDefault();
-                    e.stopPropagation();
+                  onPress={() => {
                     startTransition(() => {
                       setDialog(
                         <PlaygroundRunTraceDetailsDialog
@@ -807,11 +800,10 @@ export function PlaygroundDatasetExamplesTable({
             controls={
               <TooltipTrigger>
                 <Button
-                  variant="default"
-                  size="compact"
+                  size="S"
                   aria-label="View example details"
                   icon={<Icon svg={<Icons.ExpandOutline />} />}
-                  onClick={() => {
+                  onPress={() => {
                     navigate(
                       `/playground/datasets/${datasetId}/examples/${row.original.id}`
                     );
diff --git a/app/src/pages/playground/PlaygroundDatasetPicker.tsx b/app/src/pages/playground/PlaygroundDatasetPicker.tsx
index 123b444cfe..37687a3f6c 100644
--- a/app/src/pages/playground/PlaygroundDatasetPicker.tsx
+++ b/app/src/pages/playground/PlaygroundDatasetPicker.tsx
@@ -2,8 +2,9 @@ import React from "react";
 import { useNavigate, useParams } from "react-router";
 import { css } from "@emotion/react";
 
-import { Button, Icon, Icons } from "@arizeai/components";
+import { Icon, Icons } from "@arizeai/components";
 
+import { Button } from "@phoenix/components";
 import { DatasetPicker } from "@phoenix/components/dataset";
 
 /**
@@ -23,7 +24,7 @@ const playgroundDatasetPickerCSS = css`
     border-bottom-right-radius: 0;
     height: ${DATASET_PICKER_BUTTON_HEIGHT}px;
   }
-  .ac-button {
+  & > button {
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
     border-left: none;
@@ -51,10 +52,9 @@ export function PlaygroundDatasetPicker() {
         }}
       />
       <Button
-        size="compact"
-        variant={"default"}
+        size="S"
         icon={<Icon svg={<Icons.CloseOutline />} />}
-        onClick={() => {
+        onPress={() => {
           navigate("/playground");
         }}
       />
diff --git a/app/src/pages/playground/PlaygroundDatasetSection.tsx b/app/src/pages/playground/PlaygroundDatasetSection.tsx
index cd4046d600..19cb8135ce 100644
--- a/app/src/pages/playground/PlaygroundDatasetSection.tsx
+++ b/app/src/pages/playground/PlaygroundDatasetSection.tsx
@@ -1,56 +1,16 @@
 import React, { useMemo } from "react";
 import { graphql, useLazyLoadQuery } from "react-relay";
 import { useNavigate } from "react-router";
-import { css } from "@emotion/react";
 
-import { Button, Flex, Icon, Icons, Text, View } from "@arizeai/components";
+import { Flex, Icon, Icons, Text, View } from "@arizeai/components";
 
+import { Button } from "@phoenix/components";
 import { usePlaygroundContext } from "@phoenix/contexts/PlaygroundContext";
 
 import { PlaygroundDatasetSectionQuery } from "./__generated__/PlaygroundDatasetSectionQuery.graphql";
 import { PlaygroundDatasetExamplesTable } from "./PlaygroundDatasetExamplesTable";
 import { PlaygroundDatasetExamplesTableProvider } from "./PlaygroundDatasetExamplesTableContext";
 
-function RunInProgressText() {
-  return (
-    <span
-      css={css`
-        color: var(--ac-global-text-color-700);
-        display: inline-flex;
-        .dots {
-          display: inline-block;
-          width: 3ch;
-          overflow: hidden;
-        }
-
-        .dots::after {
-          content: "...";
-          display: inline-block;
-          animation: dots 1.5s steps(4) infinite;
-        }
-
-        @keyframes dots {
-          0% {
-            content: "";
-          }
-          25% {
-            content: ".";
-          }
-          50% {
-            content: "..";
-          }
-          75% {
-            content: "...";
-          }
-        }
-      `}
-    >
-      Run in progress
-      <span className="dots" />
-    </span>
-  );
-}
-
 export function PlaygroundDatasetSection({ datasetId }: { datasetId: string }) {
   const instances = usePlaygroundContext((state) => state.instances);
   const isRunning = instances.some((instance) => instance.activeRunId != null);
@@ -79,14 +39,16 @@ export function PlaygroundDatasetSection({ datasetId }: { datasetId: string }) {
   return (
     <Flex direction={"column"} height={"100%"}>
       <View
+        flex="none"
         backgroundColor={"dark"}
         paddingX={"size-200"}
         paddingY={"size-100"}
         borderBottomColor={"light"}
         borderBottomWidth={"thin"}
+        height={50}
       >
-        <Flex justifyContent={"space-between"} alignItems="center">
-          <Flex gap={"size-100"}>
+        <Flex justifyContent="space-between" alignItems="center" height="100%">
+          <Flex gap="size-100">
             <Text>{data.dataset.name ?? "Dataset"} results</Text>
             {data.dataset.exampleCount != null ? (
               <Text fontStyle="italic" color={"text-700"}>
@@ -94,27 +56,30 @@ export function PlaygroundDatasetSection({ datasetId }: { datasetId: string }) {
               </Text>
             ) : null}
           </Flex>
-          <Flex gap={"size-100"} alignItems={"center"}>
-            {isRunning && <RunInProgressText />}
-            {experimentIds.length > 0 && (
-              <Button
-                size={"compact"}
-                variant="default"
-                disabled={isRunning}
-                loading={isRunning}
-                icon={<Icon svg={<Icons.ExperimentOutline />} />}
-                onClick={() => {
-                  navigate(
-                    `/datasets/${datasetId}/compare?experimentId=${experimentIds.join("&experimentId=")}`
-                  );
-                }}
-              >
-                <Flex gap={"size-100"} alignItems={"center"}>
-                  View Experiment{instances.length > 1 ? "s" : ""}
-                </Flex>
-              </Button>
-            )}
-          </Flex>
+          {experimentIds.length > 0 && (
+            <Button
+              size="S"
+              isDisabled={isRunning}
+              icon={
+                <Icon
+                  svg={
+                    isRunning ? (
+                      <Icons.LoadingOutline />
+                    ) : (
+                      <Icons.ExperimentOutline />
+                    )
+                  }
+                />
+              }
+              onPress={() => {
+                navigate(
+                  `/datasets/${datasetId}/compare?experimentId=${experimentIds.join("&experimentId=")}`
+                );
+              }}
+            >
+              View Experiment{instances.length > 1 ? "s" : ""}
+            </Button>
+          )}
         </Flex>
       </View>
       <PlaygroundDatasetExamplesTableProvider>
diff --git a/app/src/pages/playground/PlaygroundOutputMoveButton.tsx b/app/src/pages/playground/PlaygroundOutputMoveButton.tsx
index 4aa41f0cf0..3a70ffe28f 100644
--- a/app/src/pages/playground/PlaygroundOutputMoveButton.tsx
+++ b/app/src/pages/playground/PlaygroundOutputMoveButton.tsx
@@ -1,13 +1,8 @@
 import React from "react";
 
-import {
-  Button,
-  Icon,
-  Icons,
-  Tooltip,
-  TooltipTrigger,
-} from "@arizeai/components";
+import { Icon, Icons, Tooltip, TooltipTrigger } from "@arizeai/components";
 
+import { Button } from "@phoenix/components";
 import { usePlaygroundContext } from "@phoenix/contexts/PlaygroundContext";
 import {
   ChatMessage,
@@ -36,12 +31,10 @@ export const PlaygroundOutputMoveButton = ({
   return (
     <TooltipTrigger delay={500} offset={10}>
       <Button
-        variant="default"
-        size="compact"
+        size="S"
         icon={<Icon svg={<Icons.PlusCircleOutline />} />}
         aria-label="Move the output message to the end of the prompt"
-        onClick={(e) => {
-          e.stopPropagation();
+        onPress={() => {
           if (instance.template.__type !== "chat") {
             return;
           }
diff --git a/app/src/pages/playground/PlaygroundResponseFormat.tsx b/app/src/pages/playground/PlaygroundResponseFormat.tsx
index 10ec6137d7..aa9c59afe4 100644
--- a/app/src/pages/playground/PlaygroundResponseFormat.tsx
+++ b/app/src/pages/playground/PlaygroundResponseFormat.tsx
@@ -4,7 +4,6 @@ import { JSONSchema7 } from "json-schema";
 import {
   Accordion,
   AccordionItem,
-  Button,
   Card,
   Flex,
   Icon,
@@ -12,6 +11,7 @@ import {
   View,
 } from "@arizeai/components";
 
+import { Button } from "@phoenix/components";
 import { CopyToClipboardButton } from "@phoenix/components";
 import { JSONEditor } from "@phoenix/components/code";
 import { LazyEditorWrapper } from "@phoenix/components/code/LazyEditorWrapper";
@@ -99,9 +99,8 @@ export function PlaygroundResponseFormat({
                 <Button
                   aria-label="Delete Output Schema"
                   icon={<Icon svg={<Icons.TrashOutline />} />}
-                  variant="default"
-                  size="compact"
-                  onClick={() => {
+                  size="S"
+                  onPress={() => {
                     deleteInvocationParameterInput({
                       instanceId: playgroundInstanceId,
                       invocationParameterInputInvocationName:
diff --git a/app/src/pages/playground/PlaygroundRunButton.tsx b/app/src/pages/playground/PlaygroundRunButton.tsx
index 2dc2c22a1a..1a24ff9aa2 100644
--- a/app/src/pages/playground/PlaygroundRunButton.tsx
+++ b/app/src/pages/playground/PlaygroundRunButton.tsx
@@ -1,9 +1,8 @@
 import React from "react";
-import { css } from "@emotion/react";
 
-import { Button, Icon, Icons } from "@arizeai/components";
+import { Icon, Icons } from "@arizeai/components";
 
-import { Loading } from "@phoenix/components";
+import { Button } from "@phoenix/components";
 import { usePlaygroundContext } from "@phoenix/contexts/PlaygroundContext";
 
 export function PlaygroundRunButton() {
@@ -20,25 +19,14 @@ export function PlaygroundRunButton() {
     <Button
       variant="primary"
       icon={
-        !isRunning ? (
-          <Icon svg={<Icons.PlayCircleOutline />} />
-        ) : (
-          <div
-            css={css`
-              margin-right: var(--ac-global-dimension-static-size-50);
-              & > * {
-                height: 1em;
-                width: 1em;
-                font-size: 1.3rem;
-              }
-            `}
-          >
-            <Loading size="S" />
-          </div>
-        )
+        <Icon
+          svg={
+            isRunning ? <Icons.LoadingOutline /> : <Icons.PlayCircleOutline />
+          }
+        />
       }
-      size="compact"
-      onClick={() => {
+      size="S"
+      onPress={() => {
         if (isRunning) {
           cancelPlaygroundInstances();
         } else {
diff --git a/app/src/pages/playground/PlaygroundRunTraceDialog.tsx b/app/src/pages/playground/PlaygroundRunTraceDialog.tsx
index 2360aee761..d4fb6daaf8 100644
--- a/app/src/pages/playground/PlaygroundRunTraceDialog.tsx
+++ b/app/src/pages/playground/PlaygroundRunTraceDialog.tsx
@@ -1,8 +1,9 @@
 import React from "react";
 import { useNavigate } from "react-router";
 
-import { Button, Dialog } from "@arizeai/components";
+import { Dialog } from "@arizeai/components";
 
+import { Button } from "@phoenix/components";
 import { TraceDetails } from "@phoenix/pages/trace";
 
 export function PlaygroundRunTraceDetailsDialog({
@@ -21,8 +22,7 @@ export function PlaygroundRunTraceDetailsDialog({
       size="fullscreen"
       extra={
         <Button
-          variant="default"
-          onClick={() => navigate(`/projects/${projectId}/traces/${traceId}`)}
+          onPress={() => navigate(`/projects/${projectId}/traces/${traceId}`)}
         >
           View Trace in Project
         </Button>
diff --git a/app/src/pages/playground/PlaygroundTemplate.tsx b/app/src/pages/playground/PlaygroundTemplate.tsx
index d07043664a..8b3bbb0595 100644
--- a/app/src/pages/playground/PlaygroundTemplate.tsx
+++ b/app/src/pages/playground/PlaygroundTemplate.tsx
@@ -1,7 +1,6 @@
 import React, { Suspense } from "react";
 
 import {
-  Button,
   Card,
   Content,
   Flex,
@@ -12,7 +11,7 @@ import {
   TriggerWrap,
 } from "@arizeai/components";
 
-import { Loading } from "@phoenix/components";
+import { Button, Loading } from "@phoenix/components";
 import { AlphabeticIndexIcon } from "@phoenix/components/AlphabeticIndexIcon";
 import { usePlaygroundContext } from "@phoenix/contexts/PlaygroundContext";
 
@@ -80,10 +79,9 @@ function DeleteButton(props: PlaygroundInstanceProps) {
     <TooltipTrigger>
       <TriggerWrap>
         <Button
-          variant="default"
-          size="compact"
+          size="S"
           icon={<Icon svg={<Icons.TrashOutline />} />}
-          onClick={() => {
+          onPress={() => {
             deleteInstance(props.playgroundInstanceId);
           }}
         />
diff --git a/app/src/pages/playground/PlaygroundTool.tsx b/app/src/pages/playground/PlaygroundTool.tsx
index ce124a03f7..3a9b1e4839 100644
--- a/app/src/pages/playground/PlaygroundTool.tsx
+++ b/app/src/pages/playground/PlaygroundTool.tsx
@@ -1,8 +1,9 @@
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { JSONSchema7 } from "json-schema";
 
-import { Button, Card, Flex, Icon, Icons, Text } from "@arizeai/components";
+import { Card, Flex, Icon, Icons, Text } from "@arizeai/components";
 
+import { Button } from "@phoenix/components";
 import { CopyToClipboardButton } from "@phoenix/components";
 import { JSONEditor } from "@phoenix/components/code";
 import { LazyEditorWrapper } from "@phoenix/components/code/LazyEditorWrapper";
@@ -137,9 +138,8 @@ export function PlaygroundTool({
           <Button
             aria-label="Delete tool"
             icon={<Icon svg={<Icons.TrashOutline />} />}
-            variant="default"
-            size="compact"
-            onClick={() => {
+            size="S"
+            onPress={() => {
               const newTools = instanceTools.filter((t) => t.id !== tool.id);
               const toolName = getToolName(tool);
               const deletingToolChoice =
diff --git a/app/src/pages/playground/RunMetadataFooter.tsx b/app/src/pages/playground/RunMetadataFooter.tsx
index 2f6a6bc39b..91ff5317d3 100644
--- a/app/src/pages/playground/RunMetadataFooter.tsx
+++ b/app/src/pages/playground/RunMetadataFooter.tsx
@@ -2,15 +2,9 @@ import React, { ReactNode, startTransition, Suspense, useState } from "react";
 import { useLazyLoadQuery } from "react-relay";
 import { graphql } from "relay-runtime";
 
-import {
-  Button,
-  DialogContainer,
-  Flex,
-  Icon,
-  Icons,
-  View,
-} from "@arizeai/components";
+import { DialogContainer, Flex, Icon, Icons, View } from "@arizeai/components";
 
+import { Button } from "@phoenix/components";
 import { EditSpanAnnotationsDialog } from "@phoenix/components/trace/EditSpanAnnotationsDialog";
 import { LatencyText } from "@phoenix/components/trace/LatencyText";
 import { TokenCount } from "@phoenix/components/trace/TokenCount";
@@ -72,10 +66,9 @@ export function RunMetadataFooter({ spanId }: { spanId: string }) {
         </Flex>
         <Flex direction="row" gap="size-100" alignItems="center">
           <Button
-            size="compact"
-            variant="default"
+            size="S"
             icon={<Icon svg={<Icons.EditOutline />} />}
-            onClick={() =>
+            onPress={() =>
               setDialog(
                 <EditSpanAnnotationsDialog
                   spanNodeId={spanId}
@@ -87,10 +80,9 @@ export function RunMetadataFooter({ spanId }: { spanId: string }) {
             Annotate
           </Button>
           <Button
-            size="compact"
-            variant="default"
+            size="S"
             icon={<Icon svg={<Icons.Trace />} />}
-            onClick={() => {
+            onPress={() => {
               startTransition(() => {
                 setDialog(
                   <Suspense>
diff --git a/app/src/pages/playground/SpanPlaygroundPage.tsx b/app/src/pages/playground/SpanPlaygroundPage.tsx
index ce63e77a2b..4db5427fe8 100644
--- a/app/src/pages/playground/SpanPlaygroundPage.tsx
+++ b/app/src/pages/playground/SpanPlaygroundPage.tsx
@@ -1,7 +1,9 @@
 import React, { useMemo, useState } from "react";
 import { useLoaderData, useNavigate } from "react-router";
 
-import { Alert, Button, Flex, Icon, Icons } from "@arizeai/components";
+import { Alert, Flex, Icon, Icons } from "@arizeai/components";
+
+import { Button } from "@phoenix/components";
 
 import { spanPlaygroundPageLoaderQuery$data } from "./__generated__/spanPlaygroundPageLoaderQuery.graphql";
 import { Playground } from "./Playground";
@@ -70,9 +72,8 @@ function SpanPlaygroundBanners({
           }}
           extra={
             <Button
-              variant="default"
               icon={<Icon svg={<Icons.ArrowBack />} />}
-              onClick={() => {
+              onPress={() => {
                 navigate(
                   `/projects/${span.project.id}/traces/${span.context.traceId}?selectedSpanNodeId=${span.id}`
                 );
diff --git a/app/src/pages/profile/ViewerAPIKeys.tsx b/app/src/pages/profile/ViewerAPIKeys.tsx
index a17137167a..1eb5cc2baa 100644
--- a/app/src/pages/profile/ViewerAPIKeys.tsx
+++ b/app/src/pages/profile/ViewerAPIKeys.tsx
@@ -1,14 +1,9 @@
 import React, { ReactNode, useCallback, useState } from "react";
 import { graphql, useMutation } from "react-relay";
 
-import {
-  Button,
-  Card,
-  DialogContainer,
-  Icon,
-  Icons,
-} from "@arizeai/components";
+import { Card, DialogContainer, Icon, Icons } from "@arizeai/components";
 
+import { Button } from "@phoenix/components";
 import {
   APIKeyFormParams,
   CreateAPIKeyDialog,
@@ -76,10 +71,9 @@ export function ViewerAPIKeys({
       bodyStyle={{ padding: 0 }}
       extra={
         <Button
-          variant="default"
-          size="compact"
+          size="S"
           icon={<Icon svg={<Icons.PlusCircleOutline />} />}
-          onClick={() =>
+          onPress={() =>
             setDialog(
               <CreateAPIKeyDialog
                 onSubmit={onSubmit}
diff --git a/app/src/pages/profile/ViewerProfileCard.tsx b/app/src/pages/profile/ViewerProfileCard.tsx
index 1c4a41d78b..c3d25e13fc 100644
--- a/app/src/pages/profile/ViewerProfileCard.tsx
+++ b/app/src/pages/profile/ViewerProfileCard.tsx
@@ -4,7 +4,6 @@ import { graphql, useMutation } from "react-relay";
 import { useNavigate } from "react-router";
 
 import {
-  Button,
   Card,
   Flex,
   Form,
@@ -14,6 +13,7 @@ import {
   View,
 } from "@arizeai/components";
 
+import { Button } from "@phoenix/components";
 import { UserPicture } from "@phoenix/components/user/UserPicture";
 import { useNotifyError, useNotifySuccess } from "@phoenix/contexts";
 import { useViewer } from "@phoenix/contexts/ViewerContext";
@@ -83,9 +83,8 @@ export function ViewerProfileCard() {
       extra={
         viewer.authMethod === "LOCAL" && (
           <Button
-            variant="default"
-            size="compact"
-            onClick={() => {
+            size="S"
+            onPress={() => {
               navigate("/reset-password");
             }}
           >
@@ -147,9 +146,9 @@ export function ViewerProfileCard() {
             <Flex direction="row" gap="size-100" justifyContent="end">
               <Button
                 variant={isDirty ? "primary" : "default"}
-                size="compact"
-                disabled={!isDirty}
-                onClick={() => {
+                size="S"
+                isDisabled={!isDirty}
+                onPress={() => {
                   handleSubmit(onSubmit)();
                 }}
               >
diff --git a/app/src/pages/project/DatasetSelectorPopoverContent.tsx b/app/src/pages/project/DatasetSelectorPopoverContent.tsx
index acca40693e..3f5711b893 100644
--- a/app/src/pages/project/DatasetSelectorPopoverContent.tsx
+++ b/app/src/pages/project/DatasetSelectorPopoverContent.tsx
@@ -3,7 +3,6 @@ import { graphql, useLazyLoadQuery, useRefetchableFragment } from "react-relay";
 import { css } from "@emotion/react";
 
 import {
-  Button,
   Card,
   Flex,
   Icon,
@@ -15,6 +14,8 @@ import {
   View,
 } from "@arizeai/components";
 
+import { Button } from "@phoenix/components";
+
 import { DatasetSelectorPopoverContent_datasets$key } from "./__generated__/DatasetSelectorPopoverContent_datasets.graphql";
 import { DatasetSelectorPopoverContentDatasetsQuery } from "./__generated__/DatasetSelectorPopoverContentDatasetsQuery.graphql";
 import { DatasetSelectorPopoverContentQuery } from "./__generated__/DatasetSelectorPopoverContentQuery.graphql";
@@ -45,7 +46,7 @@ export function DatasetSelectorPopoverContent(
       borderColor="light"
       bodyStyle={{ padding: 0 }}
       extra={
-        <Button variant="default" size="compact" onClick={onCreateNewDataset}>
+        <Button variant="default" size="S" onPress={onCreateNewDataset}>
           New Dataset
         </Button>
       }
diff --git a/app/src/pages/project/ProjectTableEmpty.tsx b/app/src/pages/project/ProjectTableEmpty.tsx
index f02ea2a8d3..2cc57e9701 100644
--- a/app/src/pages/project/ProjectTableEmpty.tsx
+++ b/app/src/pages/project/ProjectTableEmpty.tsx
@@ -2,7 +2,6 @@ import React, { ReactNode, useState } from "react";
 import { css } from "@emotion/react";
 
 import {
-  Button,
   Dialog,
   DialogContainer,
   Flex,
@@ -11,6 +10,7 @@ import {
   View,
 } from "@arizeai/components";
 
+import { Button } from "@phoenix/components";
 import { CodeLanguage, CodeLanguageRadioGroup } from "@phoenix/components/code";
 import { PythonProjectGuide } from "@phoenix/components/project/PythonProjectGuide";
 import { TypeScriptProjectGuide } from "@phoenix/components/project/TypeScriptProjectGuide";
@@ -35,7 +35,7 @@ function SetupProjectDialog({ projectName }: { projectName: string }) {
 
 export function ProjectTableEmpty({ projectName }: { projectName: string }) {
   const [dialog, setDialog] = useState<ReactNode>(null);
-  const onGettingStartedClick = () => {
+  const onGettingStartedPress = () => {
     setDialog(<SetupProjectDialog projectName={projectName} />);
   };
   return (
@@ -53,7 +53,7 @@ export function ProjectTableEmpty({ projectName }: { projectName: string }) {
             <Button
               variant="default"
               icon={<Icon svg={<Icons.PlayCircleOutline />} />}
-              onClick={onGettingStartedClick}
+              onPress={onGettingStartedPress}
             >
               Get Started
             </Button>
diff --git a/app/src/pages/project/SessionsTableEmpty.tsx b/app/src/pages/project/SessionsTableEmpty.tsx
index a6162ff1d2..263f1ff188 100644
--- a/app/src/pages/project/SessionsTableEmpty.tsx
+++ b/app/src/pages/project/SessionsTableEmpty.tsx
@@ -2,7 +2,6 @@ import React, { ReactNode, useState } from "react";
 import { css } from "@emotion/react";
 
 import {
-  Button,
   Dialog,
   DialogContainer,
   Flex,
@@ -11,6 +10,7 @@ import {
   View,
 } from "@arizeai/components";
 
+import { Button } from "@phoenix/components";
 import { CodeLanguage, CodeLanguageRadioGroup } from "@phoenix/components/code";
 
 import { PythonSessionsGuide } from "./PythonSessionsGuide";
@@ -36,7 +36,7 @@ function SetupSessionsDialog() {
 export function SessionsTableEmpty() {
   const [dialog, setDialog] = useState<ReactNode | null>(null);
 
-  const onGettingStartedClick = () => {
+  const onGettingStartedPress = () => {
     setDialog(<SetupSessionsDialog />);
   };
 
@@ -53,9 +53,8 @@ export function SessionsTableEmpty() {
           <Flex direction="column" gap="size-200" alignItems="center">
             No sessions found for this project
             <Button
-              variant="default"
               icon={<Icon svg={<Icons.PlayCircleOutline />} />}
-              onClick={onGettingStartedClick}
+              onPress={onGettingStartedPress}
             >
               Setup Sessions
             </Button>
diff --git a/app/src/pages/project/SpanFilterConditionField.tsx b/app/src/pages/project/SpanFilterConditionField.tsx
index ebf39711ab..da866e9916 100644
--- a/app/src/pages/project/SpanFilterConditionField.tsx
+++ b/app/src/pages/project/SpanFilterConditionField.tsx
@@ -18,7 +18,6 @@ import { css } from "@emotion/react";
 
 import {
   AddonBefore,
-  Button,
   Field,
   Flex,
   Form,
@@ -32,6 +31,7 @@ import {
   View,
 } from "@arizeai/components";
 
+import { Button } from "@phoenix/components";
 import { useTheme } from "@phoenix/contexts";
 import environment from "@phoenix/RelayEnvironment";
 
@@ -477,9 +477,9 @@ function FilterConditionSnippet(props: {
           />
         </div>
         <Button
-          title="Add to filter condition"
+          aria-label="Add to filter condition"
           variant="default"
-          onClick={() => onAddFilterConditionSnippet(snippet)}
+          onPress={() => onAddFilterConditionSnippet(snippet)}
           icon={<Icon svg={<Icons.PlusCircleOutline />} />}
         />
       </Flex>
diff --git a/app/src/pages/project/SpanSelectionToolbar.tsx b/app/src/pages/project/SpanSelectionToolbar.tsx
index a4f9dba197..fe0a1a2443 100644
--- a/app/src/pages/project/SpanSelectionToolbar.tsx
+++ b/app/src/pages/project/SpanSelectionToolbar.tsx
@@ -3,8 +3,9 @@ import { graphql, useMutation } from "react-relay";
 import { useNavigate } from "react-router";
 import { css } from "@emotion/react";
 
+// eslint-disable-next-line deprecate/import
 import {
-  Button,
+  Button as LegacyButton, // TODO(components): Move to dialog
   Dialog,
   DialogContainer,
   Flex,
@@ -15,6 +16,7 @@ import {
   View,
 } from "@arizeai/components";
 
+import { Button } from "@phoenix/components";
 import { CreateDatasetForm } from "@phoenix/components/dataset/CreateDatasetForm";
 import { useNotifyError, useNotifySuccess } from "@phoenix/contexts";
 
@@ -114,7 +116,7 @@ export function SpanSelectionToolbar(props: SpanSelectionToolbarProps) {
         >
           <Text>{`${selectedSpans.length} span${isPlural ? "s" : ""} selected`}</Text>
           <Flex direction="row" gap="size-100">
-            <Button variant="default" size="compact" onClick={onClearSelection}>
+            <Button variant="default" size="S" onPress={onClearSelection}>
               Cancel
             </Button>
             <PopoverTrigger
@@ -125,17 +127,26 @@ export function SpanSelectionToolbar(props: SpanSelectionToolbarProps) {
                 setIsDatasetPopoverOpen(isOpen);
               }}
             >
-              <Button
+              <LegacyButton
                 variant="primary"
                 size="compact"
-                icon={<Icon svg={<Icons.DatabaseOutline />} />}
-                loading={isAddingSpansToDataset}
-                disabled={isAddingSpansToDataset}
+                icon={
+                  <Icon
+                    svg={
+                      isAddingSpansToDataset ? (
+                        <Icons.LoadingOutline />
+                      ) : (
+                        <Icons.DatabaseOutline />
+                      )
+                    }
+                  />
+                }
+                isDisabled={isAddingSpansToDataset}
               >
                 {isAddingSpansToDataset
                   ? "Adding to dataset"
                   : "Add to dataset"}
-              </Button>
+              </LegacyButton>
               <Suspense>
                 <DatasetSelectorPopoverContent
                   onDatasetSelected={(datasetId) => {
diff --git a/app/src/pages/projects/NewProjectButton.tsx b/app/src/pages/projects/NewProjectButton.tsx
index 0253eac06b..0b688a4556 100644
--- a/app/src/pages/projects/NewProjectButton.tsx
+++ b/app/src/pages/projects/NewProjectButton.tsx
@@ -1,7 +1,6 @@
 import React, { ReactNode, useState } from "react";
 
 import {
-  Button,
   Dialog,
   DialogContainer,
   Icon,
@@ -10,6 +9,7 @@ import {
   View,
 } from "@arizeai/components";
 
+import { Button } from "@phoenix/components";
 import { ExternalLink } from "@phoenix/components";
 import { CodeLanguage, CodeLanguageRadioGroup } from "@phoenix/components/code";
 import { TypeScriptProjectGuide } from "@phoenix/components/project/TypeScriptProjectGuide";
@@ -24,9 +24,8 @@ export function NewProjectButton() {
   return (
     <div>
       <Button
-        variant="default"
         icon={<Icon svg={<Icons.GridOutline />} />}
-        onClick={() => {
+        onPress={() => {
           setDialog(<NewProjectDialog />);
         }}
       >
diff --git a/app/src/pages/projects/ProjectActionMenu.tsx b/app/src/pages/projects/ProjectActionMenu.tsx
index e55dff5390..e07854f159 100644
--- a/app/src/pages/projects/ProjectActionMenu.tsx
+++ b/app/src/pages/projects/ProjectActionMenu.tsx
@@ -7,7 +7,6 @@ import React, {
 import { graphql, useMutation } from "react-relay";
 
 import {
-  Button,
   Dialog,
   DialogContainer,
   Icon,
@@ -16,6 +15,8 @@ import {
 } from "@arizeai/components";
 import { ActionMenu, Flex, Item, Text } from "@arizeai/components";
 
+import { Button } from "@phoenix/components";
+
 import { ProjectActionMenuClearMutation } from "./__generated__/ProjectActionMenuClearMutation.graphql";
 import { ProjectActionMenuDeleteMutation } from "./__generated__/ProjectActionMenuDeleteMutation.graphql";
 import { RemoveProjectDataForm } from "./RemoveProjectDataForm";
@@ -102,7 +103,7 @@ export function ProjectActionMenu({
           <Flex direction="row" justifyContent="end">
             <Button
               variant="danger"
-              onClick={() => {
+              onPress={() => {
                 handleDelete();
                 setDialog(null);
               }}
@@ -133,7 +134,7 @@ export function ProjectActionMenu({
           <Flex direction="row" justifyContent="end">
             <Button
               variant="danger"
-              onClick={() => {
+              onPress={() => {
                 handleClear();
                 setDialog(null);
               }}
diff --git a/app/src/pages/projects/RemoveProjectDataForm.tsx b/app/src/pages/projects/RemoveProjectDataForm.tsx
index 10e97532cc..3e3fccb0c1 100644
--- a/app/src/pages/projects/RemoveProjectDataForm.tsx
+++ b/app/src/pages/projects/RemoveProjectDataForm.tsx
@@ -3,8 +3,9 @@ import { Controller, useForm } from "react-hook-form";
 import { graphql, useMutation } from "react-relay";
 import { isValid as dateIsValid, parseISO } from "date-fns";
 
-import { Button, Flex, Text, TextField, View } from "@arizeai/components";
+import { Flex, Icon, Icons, Text, TextField, View } from "@arizeai/components";
 
+import { Button } from "@phoenix/components";
 import { ONE_MONTH_MS } from "@phoenix/constants/timeConstants";
 
 import { RemoveProjectDataFormMutation } from "./__generated__/RemoveProjectDataFormMutation.graphql";
@@ -111,10 +112,12 @@ export function RemoveProjectDataForm(props: RemoveProjectDataFormProps) {
           <Button
             type="submit"
             variant="danger"
-            isDisabled={!isValid}
-            size="compact"
-            loading={isCommitting}
-            onClick={() => {
+            isDisabled={!isValid || isCommitting}
+            size="S"
+            icon={
+              isCommitting ? <Icon svg={<Icons.LoadingOutline />} /> : undefined
+            }
+            onPress={() => {
               // TODO: This is a bit of a hack as the form is not working in a dialog for some reason
               // It probably has to do with the nested DOM structure under which it is being mounted
               formRef.current?.requestSubmit();
diff --git a/app/src/pages/settings/APIKeysCard.tsx b/app/src/pages/settings/APIKeysCard.tsx
index 6c87eee6ab..b58658143c 100644
--- a/app/src/pages/settings/APIKeysCard.tsx
+++ b/app/src/pages/settings/APIKeysCard.tsx
@@ -2,7 +2,6 @@ import React, { ReactNode, Suspense, useCallback, useState } from "react";
 import { graphql, useLazyLoadQuery, useMutation } from "react-relay";
 
 import {
-  Button,
   DialogContainer,
   Icon,
   Icons,
@@ -12,7 +11,7 @@ import {
   View,
 } from "@arizeai/components";
 
-import { Loading } from "@phoenix/components";
+import { Button, Loading } from "@phoenix/components";
 import {
   APIKeyFormParams,
   CreateAPIKeyDialog,
@@ -118,10 +117,9 @@ export function APIKeysCard() {
         variant="compact"
         extra={
           <Button
-            variant="default"
-            size="compact"
+            size="S"
             icon={<Icon svg={<Icons.PlusCircleOutline />} />}
-            onClick={showCreateSystemAPIKeyDialog}
+            onPress={showCreateSystemAPIKeyDialog}
           >
             System Key
           </Button>
diff --git a/app/src/pages/settings/DeleteUserDialog.tsx b/app/src/pages/settings/DeleteUserDialog.tsx
index 5329cda4d6..dfcaf1cb83 100644
--- a/app/src/pages/settings/DeleteUserDialog.tsx
+++ b/app/src/pages/settings/DeleteUserDialog.tsx
@@ -1,8 +1,9 @@
 import React, { useCallback } from "react";
 import { graphql, useMutation } from "react-relay";
 
-import { Button, Dialog, Flex, Text, View } from "@arizeai/components";
+import { Dialog, Flex, Text, View } from "@arizeai/components";
 
+import { Button } from "@phoenix/components";
 import { useNotifyError, useNotifySuccess } from "@phoenix/contexts";
 
 export function DeleteUserDialog({
@@ -61,15 +62,15 @@ export function DeleteUserDialog({
         borderTopWidth="thin"
       >
         <Flex direction="row" justifyContent="end" gap={"size-100"}>
-          <Button variant="default" onClick={onClose}>
+          <Button variant="default" onPress={onClose}>
             Cancel
           </Button>
           <Button
             variant="danger"
-            onClick={() => {
+            onPress={() => {
               handleDelete();
             }}
-            disabled={isCommitting}
+            isDisabled={isCommitting}
           >
             Delete user
           </Button>
diff --git a/app/src/pages/settings/ResetPasswordDialog.tsx b/app/src/pages/settings/ResetPasswordDialog.tsx
index 6f2d893da6..7948a6b7a3 100644
--- a/app/src/pages/settings/ResetPasswordDialog.tsx
+++ b/app/src/pages/settings/ResetPasswordDialog.tsx
@@ -2,15 +2,9 @@ import React, { useCallback } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { graphql, useMutation } from "react-relay";
 
-import {
-  Button,
-  Dialog,
-  Flex,
-  Form,
-  TextField,
-  View,
-} from "@arizeai/components";
+import { Dialog, Flex, Form, TextField, View } from "@arizeai/components";
 
+import { Button } from "@phoenix/components";
 import { useNotifyError, useNotifySuccess } from "@phoenix/contexts";
 
 import { ResetPasswordDialogMutation } from "./__generated__/ResetPasswordDialogMutation.graphql";
@@ -144,8 +138,8 @@ export function ResetPasswordDialog({
               <Button
                 variant={isDirty ? "primary" : "default"}
                 type="submit"
-                disabled={isCommitting}
-                onClick={handleSubmit(onSubmit)}
+                isDisabled={isCommitting}
+                onPress={() => handleSubmit(onSubmit)()}
               >
                 {isCommitting ? "Resetting..." : "Reset Password"}
               </Button>
diff --git a/app/src/pages/settings/SettingsPage.tsx b/app/src/pages/settings/SettingsPage.tsx
index 0d36194c3b..7903436cc8 100644
--- a/app/src/pages/settings/SettingsPage.tsx
+++ b/app/src/pages/settings/SettingsPage.tsx
@@ -87,7 +87,7 @@ export function SettingsPage() {
 function CopyToClipboardButtonWithPadding(props: { text: string }) {
   return (
     <View paddingBottom="19px">
-      <CopyToClipboardButton text={props.text} size="default" />
+      <CopyToClipboardButton text={props.text} size="M" />
     </View>
   );
 }
diff --git a/app/src/pages/settings/UserRoleChangeDialog.tsx b/app/src/pages/settings/UserRoleChangeDialog.tsx
index b91fec219d..ba475fb4ba 100644
--- a/app/src/pages/settings/UserRoleChangeDialog.tsx
+++ b/app/src/pages/settings/UserRoleChangeDialog.tsx
@@ -1,8 +1,9 @@
 import React, { useCallback } from "react";
 import { graphql, useMutation } from "react-relay";
 
-import { Button, Dialog, Flex, Text, View } from "@arizeai/components";
+import { Dialog, Flex, Text, View } from "@arizeai/components";
 
+import { Button } from "@phoenix/components";
 import { normalizeUserRole } from "@phoenix/constants";
 import { useNotifyError, useNotifySuccess } from "@phoenix/contexts";
 
@@ -88,15 +89,16 @@ export function UserRoleChangeDialog({
         borderTopWidth="thin"
       >
         <Flex direction="row" justifyContent="end" gap={"size-100"}>
-          <Button variant="default" onClick={onClose}>
+          <Button onPress={onClose} size="S">
             Cancel
           </Button>
           <Button
             variant="primary"
-            onClick={() => {
+            size="S"
+            onPress={() => {
               handleChange();
             }}
-            disabled={isCommitting}
+            isDisabled={isCommitting}
           >
             Change role
           </Button>
diff --git a/app/src/pages/settings/UsersCard.tsx b/app/src/pages/settings/UsersCard.tsx
index 8c80baa0bd..362ad23381 100644
--- a/app/src/pages/settings/UsersCard.tsx
+++ b/app/src/pages/settings/UsersCard.tsx
@@ -1,15 +1,9 @@
 import React, { ReactNode, Suspense, useState } from "react";
 import { graphql, useLazyLoadQuery } from "react-relay";
 
-import {
-  Button,
-  Card,
-  DialogContainer,
-  Icon,
-  Icons,
-  View,
-} from "@arizeai/components";
+import { Card, DialogContainer, Icon, Icons, View } from "@arizeai/components";
 
+import { Button } from "@phoenix/components";
 import { Loading } from "@phoenix/components";
 import { useNotifyError, useNotifySuccess } from "@phoenix/contexts";
 
@@ -44,7 +38,7 @@ export function UsersCard() {
       bodyStyle={{ padding: 0, overflowX: "auto" }}
       extra={
         <Button
-          onClick={() => {
+          onPress={() => {
             setDialog(
               <NewUserDialog
                 onDismiss={() => {
@@ -67,8 +61,7 @@ export function UsersCard() {
               />
             );
           }}
-          variant="default"
-          size="compact"
+          size="S"
           icon={<Icon svg={<Icons.PlusCircleOutline />} />}
         >
           Add User
diff --git a/app/src/pages/trace/EditSpanAnnotationsButton.tsx b/app/src/pages/trace/EditSpanAnnotationsButton.tsx
index 873ecb9219..76b73085c4 100644
--- a/app/src/pages/trace/EditSpanAnnotationsButton.tsx
+++ b/app/src/pages/trace/EditSpanAnnotationsButton.tsx
@@ -1,25 +1,20 @@
 import React, { ReactNode, useState } from "react";
 
-import {
-  Button,
-  ButtonProps,
-  DialogContainer,
-  Icon,
-  Icons,
-} from "@arizeai/components";
+import { DialogContainer, Icon, Icons } from "@arizeai/components";
 
+import { Button, ButtonProps } from "@phoenix/components";
 import { EditSpanAnnotationsDialog } from "@phoenix/components/trace/EditSpanAnnotationsDialog";
 
 export function EditSpanAnnotationsButton({
   spanNodeId,
   projectId,
-  size = "default",
+  size = "M",
 }: {
   spanNodeId: string;
   projectId: string;
   /**
    * The size of the button
-   * @default default
+   * @default M
    */
   size?: ButtonProps["size"];
 }) {
@@ -27,10 +22,9 @@ export function EditSpanAnnotationsButton({
   return (
     <>
       <Button
-        variant="default"
         size={size}
         icon={<Icon svg={<Icons.EditOutline />} />}
-        onClick={() =>
+        onPress={() =>
           setDialog(
             <EditSpanAnnotationsDialog
               spanNodeId={spanNodeId}
diff --git a/app/src/pages/trace/SessionDetailsTraceList.tsx b/app/src/pages/trace/SessionDetailsTraceList.tsx
index a90c76a84b..3b379833c6 100644
--- a/app/src/pages/trace/SessionDetailsTraceList.tsx
+++ b/app/src/pages/trace/SessionDetailsTraceList.tsx
@@ -170,7 +170,7 @@ function RootSpanDetails({
           </Flex>
           <span>
             <EditSpanAnnotationsButton
-              size={"compact"}
+              size="S"
               spanNodeId={rootSpan.id}
               projectId={rootSpan.project.id}
             />
diff --git a/app/src/pages/trace/SpanAnnotationsEmpty.tsx b/app/src/pages/trace/SpanAnnotationsEmpty.tsx
index e5ea9b66bf..9056ce43b7 100644
--- a/app/src/pages/trace/SpanAnnotationsEmpty.tsx
+++ b/app/src/pages/trace/SpanAnnotationsEmpty.tsx
@@ -2,7 +2,6 @@ import React, { ReactNode, useState } from "react";
 import { css } from "@emotion/react";
 
 import {
-  Button,
   Dialog,
   DialogContainer,
   EmptyGraphic,
@@ -13,11 +12,12 @@ import {
   View,
 } from "@arizeai/components";
 
+import { Button } from "@phoenix/components";
 import { ExternalLink } from "@phoenix/components";
 
 export function SpanAnnotationsEmpty() {
   const [dialog, setDialog] = useState<ReactNode>(null);
-  const onGettingStartedClick = () => {
+  const onGettingStartedPress = () => {
     setDialog(
       <Dialog title="Span Annotations" isDismissable>
         <View padding="size-200">
@@ -44,8 +44,8 @@ export function SpanAnnotationsEmpty() {
         <Text>No annotations for this span</Text>
         <Button
           variant="default"
-          size={"compact"}
-          onClick={onGettingStartedClick}
+          size={"S"}
+          onPress={onGettingStartedPress}
           icon={<Icon svg={<Icons.Edit2Outline />} />}
         >
           How to Annotate
diff --git a/app/src/pages/trace/SpanCodeDropdown.tsx b/app/src/pages/trace/SpanCodeDropdown.tsx
index e18129acb0..51dbf5111e 100644
--- a/app/src/pages/trace/SpanCodeDropdown.tsx
+++ b/app/src/pages/trace/SpanCodeDropdown.tsx
@@ -45,11 +45,11 @@ export function SpanCodeDropdown(props: SpanCodeDropdownProps) {
             <Form>
               <Flex direction="row" gap="size-100" alignItems="end">
                 <TextField label="Span ID" isReadOnly value={spanId} />
-                <CopyToClipboardButton text={spanId} size="default" />
+                <CopyToClipboardButton text={spanId} size="M" />
               </Flex>
               <Flex direction="row" gap="size-100" alignItems="end">
                 <TextField label="Trace ID" isReadOnly value={traceId} />
-                <CopyToClipboardButton text={traceId} size="default" />
+                <CopyToClipboardButton text={traceId} size="M" />
               </Flex>
             </Form>
           </View>
diff --git a/app/src/pages/trace/SpanDetails.tsx b/app/src/pages/trace/SpanDetails.tsx
index 6c4cc1afde..f213931880 100644
--- a/app/src/pages/trace/SpanDetails.tsx
+++ b/app/src/pages/trace/SpanDetails.tsx
@@ -16,7 +16,6 @@ import { css } from "@emotion/react";
 
 import {
   Alert,
-  Button,
   Card,
   CardProps,
   Content,
@@ -52,6 +51,7 @@ import {
   ToolAttributePostfixes,
 } from "@arizeai/openinference-semantic-conventions";
 
+import { Button } from "@phoenix/components";
 import { CopyToClipboardButton, ExternalLink } from "@phoenix/components";
 import { ErrorBoundary } from "@phoenix/components/ErrorBoundary";
 import {
@@ -246,8 +246,8 @@ export function SpanDetails({
             <Button
               variant="default"
               icon={<Icon svg={<Icons.PlayCircleOutline />} />}
-              disabled={span.spanKind !== "llm"}
-              onClick={() => {
+              isDisabled={span.spanKind !== "llm"}
+              onPress={() => {
                 navigate(`/playground/spans/${span.id}`);
               }}
             >
@@ -266,7 +266,7 @@ export function SpanDetails({
               <Button
                 variant="default"
                 aria-label="Toggle showing span details"
-                onClick={() => {
+                onPress={() => {
                   setShowSpanAside(!showSpanAside);
                 }}
                 icon={
@@ -381,7 +381,7 @@ function AddSpanToDatasetButton({ span }: { span: Span }) {
       <Button
         variant="default"
         icon={<Icon svg={<Icons.DatabaseOutline />} />}
-        onClick={onAddSpanToDataset}
+        onPress={onAddSpanToDataset}
       >
         Add to Dataset
       </Button>
diff --git a/app/src/pages/trace/SpanImage.tsx b/app/src/pages/trace/SpanImage.tsx
index 7b51837765..94ac518185 100644
--- a/app/src/pages/trace/SpanImage.tsx
+++ b/app/src/pages/trace/SpanImage.tsx
@@ -1,7 +1,9 @@
 import React, { ReactNode, useState } from "react";
 import { css } from "@emotion/react";
 
-import { Button, classNames, Icon, Icons } from "@arizeai/components";
+import { classNames, Icon, Icons } from "@arizeai/components";
+
+import { Button } from "@phoenix/components";
 
 type SpanImageProps = {
   /**
@@ -77,8 +79,8 @@ export function SpanImage(props: SpanImageProps) {
       {!isRedacted && (
         <Button
           variant="default"
-          size="compact"
-          onClick={() => setIsExpanded(!isExpanded)}
+          size="S"
+          onPress={() => setIsExpanded(!isExpanded)}
           icon={
             <Icon
               svg={
diff --git a/app/src/pages/trace/SpanToDatasetExampleDialog.tsx b/app/src/pages/trace/SpanToDatasetExampleDialog.tsx
index e442d0da10..ae280d0720 100644
--- a/app/src/pages/trace/SpanToDatasetExampleDialog.tsx
+++ b/app/src/pages/trace/SpanToDatasetExampleDialog.tsx
@@ -5,7 +5,6 @@ import { css } from "@emotion/react";
 
 import {
   Alert,
-  Button,
   Card,
   CardProps,
   Dialog,
@@ -15,6 +14,7 @@ import {
   View,
 } from "@arizeai/components";
 
+import { Button } from "@phoenix/components";
 import { JSONEditor } from "@phoenix/components/code";
 import { DatasetPicker, NewDatasetButton } from "@phoenix/components/dataset";
 import { isJSONObjectString } from "@phoenix/utils/jsonUtils";
@@ -141,11 +141,18 @@ export function SpanToDatasetExampleDialog({
       extra={
         <Button
           variant="primary"
-          size="compact"
-          disabled={!isValid || isCommitting}
-          loading={isCommitting}
-          onClick={handleSubmit(onSubmit)}
-          icon={<Icon svg={<Icons.PlusCircleOutline />} />}
+          size="S"
+          isDisabled={!isValid || isCommitting}
+          onPress={() => {
+            return handleSubmit(onSubmit)();
+          }}
+          icon={
+            <Icon
+              svg={
+                isCommitting ? <Icons.LoadingOutline /> : <Icons.PlusOutline />
+              }
+            />
+          }
         >
           Add Example
         </Button>
diff --git a/app/tests/admin-access.ts b/app/tests/admin-access.ts
index 8319d731b4..4c2cec600b 100644
--- a/app/tests/admin-access.ts
+++ b/app/tests/admin-access.ts
@@ -6,7 +6,7 @@ test.beforeEach(async ({ page }) => {
 
   await page.getByLabel("Email").fill("admin@localhost");
   await page.getByLabel("Password").fill("admin123");
-  await page.getByRole("button", { name: "Login", exact: true }).click();
+  await page.getByRole("button", { name: "Log In", exact: true }).click();
   await page.waitForURL("**/projects");
 });
 
diff --git a/app/tests/login.rate-limit.spec.ts b/app/tests/login.rate-limit.spec.ts
index ab7f82e0a2..ba1c4ed61d 100644
--- a/app/tests/login.rate-limit.spec.ts
+++ b/app/tests/login.rate-limit.spec.ts
@@ -13,7 +13,7 @@ test("that login gets rate limited after too many attempts", async ({
 
   const numberOfAttempts = 10;
   for (let i = 0; i < numberOfAttempts; i++) {
-    await page.getByRole("button", { name: "Login", exact: true }).click();
+    await page.getByRole("button", { name: "Log In", exact: true }).click();
   }
   await expect(
     page.getByText("Too many requests. Please try again later.")
diff --git a/app/tests/member-access.spec.ts b/app/tests/member-access.spec.ts
index e3ab8e6392..25bdf92c24 100644
--- a/app/tests/member-access.spec.ts
+++ b/app/tests/member-access.spec.ts
@@ -5,7 +5,7 @@ test.beforeEach(async ({ page }) => {
   page.goto(`/login`);
   await page.getByLabel("Email").fill("member@localhost.com");
   await page.getByLabel("Password").fill("member123");
-  await page.getByRole("button", { name: "Login", exact: true }).click();
+  await page.getByRole("button", { name: "Log In", exact: true }).click();
   await page.waitForURL("**/projects");
 });
 
diff --git a/app/tests/user-management.spec.ts b/app/tests/user-management.spec.ts
index 041a5cc776..df1f6423bb 100644
--- a/app/tests/user-management.spec.ts
+++ b/app/tests/user-management.spec.ts
@@ -6,7 +6,7 @@ test.beforeEach(async ({ page }) => {
 
   await page.getByLabel("Email").fill("admin@localhost");
   await page.getByLabel("Password").fill("admin123");
-  await page.getByRole("button", { name: "Login", exact: true }).click();
+  await page.getByRole("button", { name: "Log In", exact: true }).click();
   await page.waitForURL("**/projects");
 });
 
diff --git a/cspell.json b/cspell.json
index f880d8fb7d..965cfa180f 100644
--- a/cspell.json
+++ b/cspell.json
@@ -33,6 +33,7 @@
         "LLAMATRACE",
         "LOOKBACK",
         "mistralai",
+        "multimodal",
         "ndcg",
         "NDJSON",
         "numpy",