diff --git a/src/components/ActionButton/ActionButton.tsx b/src/components/ActionButton/ActionButton.tsx
index fedce23ce..d2924a8f3 100644
--- a/src/components/ActionButton/ActionButton.tsx
+++ b/src/components/ActionButton/ActionButton.tsx
@@ -1,11 +1,12 @@
 import classNames from "classnames";
 import React, { MouseEventHandler, useEffect, useRef, useState } from "react";
-import type { ButtonHTMLAttributes, ReactNode } from "react";
+import type { ReactNode } from "react";
 
 import type { ButtonProps } from "../Button";
 import Icon from "../Icon";
 
 import type { ClassName, PropsWithSpread } from "types";
+import Button from "../Button";
 
 export const LOADER_MIN_DURATION = 400; // minimium duration (ms) loader displays
 export const SUCCESS_DURATION = 2000; // duration (ms) success tick is displayed
@@ -51,7 +52,7 @@ export type Props = PropsWithSpread<
 
     success?: boolean;
   },
-  ButtonHTMLAttributes<HTMLButtonElement>
+  ButtonProps
 >;
 
 /**
@@ -172,7 +173,7 @@ const ActionButton = ({
   // forwardRef which is not currently supported by components that use
   // typescript generics.
   return (
-    <button
+    <Button
       className={buttonClasses}
       ref={ref}
       onClick={isDisabled ? onClickDisabled : onClick}
@@ -180,9 +181,9 @@ const ActionButton = ({
       style={
         height && width
           ? {
-              height: `${height}px`,
-              width: `${width}px`,
-            }
+            height: `${height}px`,
+            width: `${width}px`,
+          }
           : undefined
       }
       {...buttonProps}
@@ -197,7 +198,7 @@ const ActionButton = ({
       ) : (
         children
       )}
-    </button>
+    </Button>
   );
 };
 
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index c23a234be..9d67dfd1e 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -6,6 +6,7 @@ import type {
   ElementType,
   MouseEventHandler,
   ReactNode,
+  Ref,
 } from "react";
 
 import type { ClassName, ValueOf } from "types";
@@ -64,6 +65,10 @@ export type Props<P = null> = {
    * Whether the button should be small.
    */
   small?: boolean;
+  /**
+   * A ref to the button.
+   */
+  ref?: Ref<HTMLButtonElement>;
 } & (Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onClick"> | P);
 
 /**
diff --git a/src/components/ConfirmationModal/ConfirmationModal.stories.tsx b/src/components/ConfirmationModal/ConfirmationModal.stories.tsx
index 6e2b14103..cc19a95d3 100644
--- a/src/components/ConfirmationModal/ConfirmationModal.stories.tsx
+++ b/src/components/ConfirmationModal/ConfirmationModal.stories.tsx
@@ -4,8 +4,9 @@ import { Meta, StoryObj } from "@storybook/react";
 
 import ConfirmationModal from "./ConfirmationModal";
 import Input from "../Input";
+import Icon from "components/Icon";
 
-const doNothing = () => {};
+const doNothing = () => { };
 
 const meta: Meta<typeof ConfirmationModal> = {
   component: ConfirmationModal,
@@ -30,9 +31,12 @@ export const Default: Story = {
         {modalOpen ? (
           <ConfirmationModal
             title="Confirm delete"
-            confirmButtonLabel="Delete"
+            confirmButtonLabel={<><Icon name="delete" light /><span>Delete</span></>}
             onConfirm={doNothing}
             close={closeHandler}
+            confirmButtonProps={{
+              hasIcon: true
+            }}
           >
             <p>
               This will permanently delete the user "Simon".