From 0b1fe169449dc1b385f063ff7693f7e51c2537a4 Mon Sep 17 00:00:00 2001
From: Mikyo King <mikyo@arize.com>
Date: Mon, 23 Dec 2024 16:19:39 -0700
Subject: [PATCH] finish migration

---
 app/src/components/ConfirmNavigation.tsx      | 23 +++++----------
 .../components/dataset/NewDatasetButton.tsx   |  2 +-
 .../CanvasDisplaySettingsDropdown.tsx         |  7 +++--
 .../pointcloud/ClusteringSettings.tsx         |  9 ++----
 .../PointCloudParameterSettings.tsx           |  2 +-
 app/src/components/settings/UserForm.tsx      |  7 +++--
 .../trace/EditSpanAnnotationsDialog.tsx       | 19 ++++++------
 .../trace/SpanAnnotationActionMenu.tsx        | 13 +++------
 .../components/trace/SpanAnnotationForm.tsx   | 14 +++------
 app/src/pages/auth/ForgotPasswordForm.tsx     |  7 +++--
 app/src/pages/auth/LoginForm.tsx              | 12 +++++---
 .../pages/dataset/AddDatasetExampleButton.tsx |  9 +++---
 .../pages/dataset/AddDatasetExampleDialog.tsx | 14 +++++----
 app/src/pages/dataset/DatasetPage.tsx         |  6 ++--
 app/src/pages/dataset/RunExperimentButton.tsx |  7 ++---
 app/src/pages/datasets/DatasetFromCSVForm.tsx |  6 ++--
 .../pages/example/ExampleDetailsDialog.tsx    |  8 ++---
 .../example/ExampleExperimentRunsTable.tsx    | 15 ++++------
 .../examples/ExampleSelectionToolbar.tsx      | 23 ++++++++++-----
 app/src/pages/playground/Playground.tsx       | 29 +++++++------------
 .../playground/PlaygroundChatTemplate.tsx     |  8 ++---
 .../PlaygroundChatTemplateFooter.tsx          | 20 ++++++-------
 22 files changed, 117 insertions(+), 143 deletions(-)

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/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/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/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/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/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..6c827dc2df 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/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/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/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/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: {