diff --git a/src/components/buttons/OakButton/OakButton.stories.tsx b/src/components/buttons/OakButton/OakButton.stories.tsx
new file mode 100644
index 000000000..19e9622ee
--- /dev/null
+++ b/src/components/buttons/OakButton/OakButton.stories.tsx
@@ -0,0 +1,389 @@
+import React from "react";
+import { Meta, StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+
+import {
+  OakButton,
+  oakButtonColorSchemes,
+  oakButtonSizes,
+  oakButtonVariants,
+} from "./OakButton";
+
+import { oakIconNames } from "@/components/images-and-icons/OakIcon";
+import { OakFlex } from "@/components/layout-and-structure/OakFlex";
+
+const controlIconNames = [
+  [...oakIconNames].sort((a, b) => a.localeCompare(b)),
+].flat();
+
+const meta: Meta<typeof OakButton> = {
+  component: OakButton,
+  tags: ["autodocs"],
+  title: "components/Buttons/OakButton",
+  argTypes: {
+    iconName: {
+      options: controlIconNames,
+    },
+    isTrailingIcon: {
+      control: "boolean",
+    },
+    isLoading: {
+      control: "boolean",
+    },
+    disabled: {
+      control: "boolean",
+    },
+    variant: {
+      control: "select",
+      options: oakButtonVariants,
+    },
+    size: {
+      control: "select",
+      options: oakButtonSizes,
+    },
+    colorScheme: {
+      control: "select",
+      options: oakButtonColorSchemes,
+    },
+    children: {
+      control: "text",
+    },
+  },
+  parameters: {
+    actions: { onClick: fn() },
+    controls: {
+      include: [
+        "iconName",
+        "isTrailingIcon",
+        "isLoading",
+        "type",
+        "variant",
+        "size",
+        "disabled",
+        "colorScheme",
+        "onClick",
+        "onHovered",
+        "children",
+      ],
+    },
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof OakButton>;
+
+export const PrimaryButton: Story = {
+  render: (args) => (
+    <OakFlex $gap={"spacing-24"} $mb={"spacing-24"}>
+      <OakButton {...args} />
+      <OakButton {...args} disabled>
+        Disabled Button
+      </OakButton>
+      <OakButton {...args} isLoading>
+        Loading Button
+      </OakButton>
+    </OakFlex>
+  ),
+  args: {
+    variant: "primary",
+    iconName: "arrow-right",
+    onClick: fn(),
+    children: "Button",
+  },
+};
+
+export const SmallPrimaryButton: Story = {
+  render: (args) => (
+    <OakFlex $gap={"spacing-24"}>
+      <OakButton {...args} />
+      <OakButton {...args} disabled>
+        Disabled Button
+      </OakButton>
+      <OakButton {...args} size="sm" isLoading>
+        Loading Button
+      </OakButton>
+    </OakFlex>
+  ),
+  args: {
+    variant: "primary",
+    size: "sm",
+    iconName: "arrow-right",
+    children: "Button",
+  },
+};
+
+export const InvertedPrimaryButton: Story = {
+  render: (args) => (
+    <OakFlex $gap={"spacing-24"}>
+      <OakButton {...args} />
+      <OakButton {...args} disabled>
+        Disabled Button
+      </OakButton>
+      <OakButton {...args} isLoading>
+        Loading Button
+      </OakButton>
+    </OakFlex>
+  ),
+  args: {
+    variant: "primary",
+    colorScheme: "inverted",
+    iconName: "arrow-right",
+    children: "Button",
+  },
+  parameters: {
+    backgrounds: {
+      default: "light",
+    },
+  },
+};
+
+export const InvertedSmallPrimaryButton: Story = {
+  render: (args) => (
+    <OakFlex $gap={"spacing-24"}>
+      <OakButton {...args} />
+      <OakButton {...args} disabled>
+        Disabled Button
+      </OakButton>
+      <OakButton {...args} size="sm" isLoading>
+        Loading Button
+      </OakButton>
+    </OakFlex>
+  ),
+  args: {
+    variant: "primary",
+    colorScheme: "inverted",
+    size: "sm",
+    iconName: "arrow-right",
+    children: "Button",
+  },
+  parameters: {
+    backgrounds: {
+      default: "light",
+    },
+  },
+};
+
+export const SecondaryButton: Story = {
+  render: (args) => (
+    <OakFlex $gap={"spacing-24"} $mb={"spacing-24"}>
+      <OakButton {...args} />
+      <OakButton {...args} disabled>
+        Disabled Button
+      </OakButton>
+      <OakButton {...args} isLoading>
+        Loading Button
+      </OakButton>
+    </OakFlex>
+  ),
+  args: {
+    variant: "secondary",
+    iconName: "arrow-right",
+    children: "Button",
+  },
+};
+
+export const SmallSecondaryButton: Story = {
+  render: (args) => (
+    <OakFlex $gap={"spacing-24"}>
+      <OakButton {...args} />
+      <OakButton {...args} disabled>
+        Disabled Button
+      </OakButton>
+      <OakButton {...args} size="sm" isLoading>
+        Loading Button
+      </OakButton>
+    </OakFlex>
+  ),
+  args: {
+    variant: "secondary",
+    size: "sm",
+    iconName: "arrow-right",
+    children: "Button",
+  },
+};
+
+export const TertiaryButton: Story = {
+  render: (args) => (
+    <OakFlex $gap={"spacing-24"} $mb={"spacing-24"}>
+      <OakButton {...args} />
+      <OakButton {...args} disabled>
+        Disabled Button
+      </OakButton>
+      <OakButton {...args} isLoading>
+        Loading Button
+      </OakButton>
+    </OakFlex>
+  ),
+  args: {
+    variant: "tertiary",
+    iconName: "chevron-right",
+    children: "Button",
+  },
+};
+
+export const SmallTertiaryButton: Story = {
+  render: (args) => (
+    <OakFlex $gap={"spacing-24"}>
+      <OakButton {...args} />
+      <OakButton {...args} disabled>
+        Disabled Button
+      </OakButton>
+      <OakButton {...args} size="sm" isLoading>
+        Loading Button
+      </OakButton>
+    </OakFlex>
+  ),
+  args: {
+    variant: "tertiary",
+    size: "sm",
+    iconName: "chevron-right",
+    children: "Button",
+  },
+};
+
+export const InvertedTertiaryButton: Story = {
+  render: (args) => (
+    <OakFlex $gap={"spacing-24"}>
+      <OakButton {...args} />
+      <OakButton {...args} disabled>
+        Disabled Button
+      </OakButton>
+      <OakButton {...args} isLoading>
+        Loading Button
+      </OakButton>
+    </OakFlex>
+  ),
+  args: {
+    variant: "tertiary",
+    colorScheme: "inverted",
+    iconName: "chevron-right",
+    children: "Button",
+  },
+};
+
+export const InvertedSmallTertiaryButton: Story = {
+  render: (args) => (
+    <OakFlex $gap={"spacing-24"}>
+      <OakButton {...args} />
+      <OakButton {...args} disabled>
+        Disabled Button
+      </OakButton>
+      <OakButton {...args} size="sm" isLoading>
+        Loading Button
+      </OakButton>
+    </OakFlex>
+  ),
+  args: {
+    variant: "tertiary",
+    colorScheme: "inverted",
+    size: "sm",
+    iconName: "chevron-right",
+    children: "Button",
+  },
+};
+
+export const TransparentTertiaryButton: Story = {
+  render: (args) => (
+    <OakFlex $gap={"spacing-24"}>
+      <OakButton {...args} />
+      <OakButton {...args} disabled>
+        Disabled Button
+      </OakButton>
+      <OakButton {...args} size="sm" isLoading>
+        Loading Button
+      </OakButton>
+    </OakFlex>
+  ),
+  parameters: {
+    backgrounds: {
+      default: "light",
+    },
+  },
+  args: {
+    variant: "tertiary",
+    colorScheme: "transparent",
+    iconName: "chevron-right",
+    children: "Button",
+  },
+};
+
+export const TransparentSmallTertiaryButton: Story = {
+  render: (args) => (
+    <OakFlex $gap={"spacing-24"}>
+      <OakButton {...args} />
+      <OakButton {...args} disabled>
+        Disabled Button
+      </OakButton>
+      <OakButton {...args} size="sm" isLoading>
+        Loading Button
+      </OakButton>
+    </OakFlex>
+  ),
+  parameters: {
+    backgrounds: {
+      default: "light",
+    },
+  },
+  args: {
+    variant: "tertiary",
+    colorScheme: "transparent",
+    size: "sm",
+    iconName: "chevron-right",
+    children: "Button",
+  },
+};
+
+export const LinkStyledAsButton: Story = {
+  render: (args) => (
+    <OakFlex $gap="spacing-24">
+      <OakButton {...args} />
+    </OakFlex>
+  ),
+  argTypes: {
+    href: {
+      control: "text",
+    },
+    target: {
+      control: "select",
+      options: ["_self", "_blank", "_parent", "_top"],
+    },
+  },
+  parameters: {
+    controls: {
+      include: [
+        "iconName",
+        "isTrailingIcon",
+        "variant",
+        "href",
+        "target",
+        "colorScheme",
+      ],
+    },
+  },
+  args: {
+    element: "a",
+    href: "/",
+    variant: "primary",
+    children: "Link element styled as button",
+  },
+};
+
+export const ButtonWithTrailingIcon: Story = {
+  render: (args) => (
+    <OakFlex $gap={"spacing-24"} $mb={"spacing-24"}>
+      <OakButton {...args} />
+      <OakButton {...args} disabled>
+        Disabled Button
+      </OakButton>
+      <OakButton {...args} size="sm" isLoading>
+        Loading Button
+      </OakButton>
+    </OakFlex>
+  ),
+  args: {
+    variant: "primary",
+    iconName: "arrow-right",
+    isTrailingIcon: true,
+    children: "Button",
+  },
+};
diff --git a/src/components/buttons/OakButton/OakButton.test.tsx b/src/components/buttons/OakButton/OakButton.test.tsx
new file mode 100644
index 000000000..29d52d20c
--- /dev/null
+++ b/src/components/buttons/OakButton/OakButton.test.tsx
@@ -0,0 +1,56 @@
+import React from "react";
+import "@testing-library/jest-dom";
+
+import { OakButton, OakButtonProps } from "./OakButton";
+
+import renderWithTheme from "@/test-helpers/renderWithTheme";
+
+const defaultArgs: OakButtonProps = {
+  iconName: "arrow-right",
+  variant: "primary",
+};
+
+describe("OakButton", () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+  });
+
+  afterEach(() => {
+    jest.runOnlyPendingTimers();
+    jest.useRealTimers();
+  });
+
+  it("renders", () => {
+    const { getByTestId } = renderWithTheme(
+      <OakButton {...defaultArgs} data-testid="test">
+        Click
+      </OakButton>,
+    );
+    expect(getByTestId("test")).toBeInTheDocument();
+  });
+
+  it("matches snapshot", () => {
+    const { container } = renderWithTheme(
+      <OakButton {...defaultArgs}>Click Me</OakButton>,
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  it("renders the chidren", () => {
+    const { getByText } = renderWithTheme(
+      <OakButton {...defaultArgs}>Click</OakButton>,
+    );
+    expect(getByText("Click")).toBeInTheDocument();
+  });
+
+  it("calls onClick method", () => {
+    const onClick = jest.fn();
+    const { getByTestId } = renderWithTheme(
+      <OakButton {...defaultArgs} data-testid="test" onClick={onClick}>
+        Click
+      </OakButton>,
+    );
+    getByTestId("test").click();
+    expect(onClick).toHaveBeenCalled();
+  });
+});
diff --git a/src/components/buttons/OakButton/OakButton.tsx b/src/components/buttons/OakButton/OakButton.tsx
new file mode 100644
index 000000000..e01ffaeaa
--- /dev/null
+++ b/src/components/buttons/OakButton/OakButton.tsx
@@ -0,0 +1,161 @@
+import React, { ElementType } from "react";
+
+import { oakButtonVariantConfig, oakButtonSizeConfig } from "./oakButtonConfig";
+
+import {
+  InternalShadowRectButton,
+  InternalShadowRectButtonProps,
+} from "@/components/internal-components/InternalShadowRectButton";
+import {
+  InternalShadowRoundButton,
+  InternalShadowRoundButtonProps,
+} from "@/components/internal-components/InternalShadowRoundButton";
+import { PolymorphicPropsWithoutRef } from "@/components/polymorphic";
+import { OakSizeToken } from "@/styles/theme/spacing";
+import { OakColorSchemeToken } from "@/styles/theme/color";
+
+export const oakButtonVariants = ["primary", "secondary", "tertiary"] as const;
+export type OakButtonVariant = (typeof oakButtonVariants)[number];
+
+export const oakButtonColorSchemes: OakColorSchemeToken[] = [
+  "primary",
+  "inverted",
+  "transparent",
+] as const;
+export type OakButtonColorScheme = (typeof oakButtonColorSchemes)[number];
+
+export const oakButtonSizes: OakSizeToken[] = ["sm", "md"] as const;
+export type OakButtonSize = (typeof oakButtonSizes)[number];
+
+type OmittedPropsForAllUnderlyingComponents =
+  | "defaultTextColor"
+  | "defaultBackground"
+  | "defaultBorderColor"
+  | "defaultIconColor"
+  | "defaultIconBackground"
+  | "defaultIconBorderColor"
+  | "hoverTextColor"
+  | "hoverBackground"
+  | "hoverBorderColor"
+  | "hoverIconColor"
+  | "hoverIconBackground"
+  | "disabledTextColor"
+  | "disabledBackground"
+  | "disabledBorderColor"
+  | "disabledIconColor"
+  | "disabledIconBackground"
+  | "disabledIconBorderColor"
+  | "hoverShadow"
+  | "iconBackgroundSize"
+  | "iconSize";
+
+export type OakButtonProps = (
+  | Omit<InternalShadowRectButtonProps, OmittedPropsForAllUnderlyingComponents>
+  | Omit<InternalShadowRoundButtonProps, OmittedPropsForAllUnderlyingComponents>
+) & {
+  /**
+   * Predefined variants which map to specific styles defined in the `oakButtonVariantConfig` object. The variant determines the overall style of the button, while the color scheme determines the specific colors used within that style.
+   */
+  variant: OakButtonVariant;
+  /**
+   * Determines the color scheme of the button, which maps to specific colors in the theme. The available color schemes depend on the variant chosen.
+   */
+  colorScheme?: OakButtonColorScheme;
+  /**
+   * Determines the size of the button, which maps to specific values defined in the `oakButtonSizeConfig` object.
+   */
+  size?: OakButtonSize;
+};
+
+/**
+ *
+ * `OakButton` is a button component that supports multiple variants, color schemes, and sizes. The `OakButton` component takes care of mapping
+ * the variant and color scheme props to the appropriate styles defined in the `oakButtonVariants` configuration object.
+ * It also allows for polymorphic behavior through the `element` prop, enabling it to render as different HTML elements as needed.
+ *
+ * We currently support the following variants, each with a subset of color schemes:
+ * - `primary`, color schemes: `primary` and `inverted`
+ * - `secondary`, color schemes: `primary`
+ * - `tertiary`, color schemes: `primary`, `inverted` and `transparent`
+ *
+ * There are currently two sizes available across all variants: `sm` and `md`
+ */
+export const OakButton = <C extends ElementType = "button">({
+  element,
+  variant,
+  colorScheme = "primary",
+  size = "md",
+  children,
+  ...rest
+}: OakButtonProps & PolymorphicPropsWithoutRef<C>) => {
+  const variantConfig = oakButtonVariantConfig[variant];
+  const colorSchemeConfig = variantConfig.colorSchemes[colorScheme];
+  const sizeConfig = oakButtonSizeConfig[size];
+
+  if (!colorSchemeConfig) {
+    throw new Error(
+      `Color scheme "${colorScheme}" is not available fo the "${variant}" variant`,
+    );
+  }
+
+  if (!sizeConfig) {
+    throw new Error(`Invalid size: ${size}`);
+  }
+
+  const sharedSizeProps = {
+    font: sizeConfig.font,
+    pv: sizeConfig.pv,
+    ph: sizeConfig.ph,
+    loadingSpinnerSize: sizeConfig.loadingSpinnerSize,
+    iconGap: children ? sizeConfig.iconGap : "spacing-0",
+    iconSize: sizeConfig.iconSize,
+  };
+
+  switch (variant) {
+    case "primary":
+    case "secondary":
+      return (
+        <InternalShadowRectButton
+          element={element ?? "button"}
+          defaultTextColor={colorSchemeConfig.defaultTextColor}
+          defaultBackground={colorSchemeConfig.defaultBackground}
+          defaultBorderColor={colorSchemeConfig.defaultBorderColor}
+          hoverTextColor={colorSchemeConfig.hoverTextColor}
+          hoverBackground={colorSchemeConfig.hoverBackground}
+          hoverBorderColor={colorSchemeConfig.hoverBorderColor}
+          disabledTextColor={colorSchemeConfig.disabledTextColor}
+          disabledBackground={colorSchemeConfig.disabledBackground}
+          disabledBorderColor={colorSchemeConfig.disabledBorderColor}
+          hoverShadow={colorSchemeConfig.hoverShadow}
+          hoverUnderline
+          {...sharedSizeProps}
+          {...rest}
+        >
+          {children}
+        </InternalShadowRectButton>
+      );
+    case "tertiary":
+      return (
+        <InternalShadowRoundButton
+          element={element ?? "button"}
+          defaultTextColor={colorSchemeConfig.defaultTextColor}
+          defaultIconColor={colorSchemeConfig.defaultIconColor}
+          defaultIconBackground={colorSchemeConfig.defaultIconBackground}
+          defaultIconBorderColor={colorSchemeConfig.defaultIconBorderColor}
+          hoverTextColor={colorSchemeConfig.hoverTextColor}
+          hoverIconBackground={colorSchemeConfig.hoverIconBackground}
+          hoverIconBorderColor={colorSchemeConfig.hoverIconBorderColor}
+          disabledTextColor={colorSchemeConfig.disabledTextColor}
+          disabledIconColor={colorSchemeConfig.disabledIconColor}
+          disabledIconBackground={colorSchemeConfig.disabledIconBackground}
+          disabledIconBorderColor={colorSchemeConfig.disabledIconBorderColor}
+          iconBackgroundSize={sizeConfig.iconBackgroundSize}
+          hoverDropShadow={colorSchemeConfig.hoverShadow}
+          {...sharedSizeProps}
+          {...rest}
+        >
+          {children}
+        </InternalShadowRoundButton>
+      );
+  }
+};
diff --git a/src/components/buttons/OakButton/__snapshots__/OakButton.test.tsx.snap b/src/components/buttons/OakButton/__snapshots__/OakButton.test.tsx.snap
new file mode 100644
index 000000000..045e08167
--- /dev/null
+++ b/src/components/buttons/OakButton/__snapshots__/OakButton.test.tsx.snap
@@ -0,0 +1,201 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`OakButton matches snapshot 1`] = `
+.c0 {
+  position: relative;
+  width: -webkit-max-content;
+  width: -moz-max-content;
+  width: max-content;
+  height: auto;
+  font-family: --var(google-font),Lexend,sans-serif;
+}
+
+.c2 {
+  position: absolute;
+  top: 0rem;
+  width: 100%;
+  height: 100%;
+  border-radius: 0.25rem;
+  font-family: --var(google-font),Lexend,sans-serif;
+}
+
+.c5 {
+  font-family: --var(google-font),Lexend,sans-serif;
+}
+
+.c7 {
+  position: relative;
+  width: 1.5rem;
+  min-width: 1.5rem;
+  height: 1.5rem;
+  min-height: 1.5rem;
+  font-family: --var(google-font),Lexend,sans-serif;
+}
+
+.c6 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-direction: row;
+  -ms-flex-direction: row;
+  flex-direction: row;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  gap: 0.5rem;
+}
+
+.c9 {
+  font-family: --var(google-font),Lexend,sans-serif;
+  font-weight: 600;
+  font-size: 1rem;
+  line-height: 1.25rem;
+  -webkit-letter-spacing: 0.0115rem;
+  -moz-letter-spacing: 0.0115rem;
+  -ms-letter-spacing: 0.0115rem;
+  letter-spacing: 0.0115rem;
+  text-align: left;
+}
+
+.c3 {
+  background: none;
+  color: inherit;
+  border: none;
+  padding: 0;
+  font: inherit;
+  cursor: pointer;
+  text-align: left;
+  font-family: unset;
+  outline: none;
+  font-family: --var(google-font),Lexend,sans-serif;
+  color: #ffffff;
+  background: #222222;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+  border: 0.125rem solid;
+  border-color: #222222;
+  border-radius: 0.25rem;
+}
+
+.c3:disabled {
+  pointer-events: none;
+  cursor: default;
+}
+
+.c8 {
+  -webkit-filter: invert(98%) sepia(98%) saturate(0%) hue-rotate(328deg) brightness(102%) contrast(102%);
+  filter: invert(98%) sepia(98%) saturate(0%) hue-rotate(328deg) brightness(102%) contrast(102%);
+  object-fit: contain;
+}
+
+.c4 {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: inline-block;
+}
+
+.c4:hover {
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
+  color: #ffffff;
+  background: #575757;
+  border-color: #575757;
+}
+
+.c4:hover [data-state="selected"] {
+  display: none;
+}
+
+.c4:active {
+  background: #222222;
+  border-color: #222222;
+  color: #ffffff;
+}
+
+.c4:active [data-state="selected"] {
+  display: none;
+}
+
+.c4:disabled {
+  background: #808080;
+  border-color: #808080;
+  color: #ffffff;
+}
+
+.c4:disabled [data-state="selected"] {
+  display: none;
+}
+
+.c1 .grey-shadow:has(+ * + .internal-button:focus-visible) {
+  box-shadow: 0 0 0 0.3rem rgba(87,87,87,100%);
+}
+
+.c1 .yellow-shadow:has(+ .internal-button:focus-visible) {
+  box-shadow: 0 0 0 0.125rem rgba(255,229,85,100%);
+}
+
+.c1 .yellow-shadow:has(+ .internal-button:hover),
+.c1 .yellow-shadow:has(+ .internal-button:hover:not(:focus-visible,:active)) {
+  box-shadow: 0.125rem 0.125rem 0 rgba(255,229,85,100%);
+}
+
+.c1 .grey-shadow:has(+ * + .internal-button:hover) {
+  box-shadow: none;
+}
+
+.c1 .grey-shadow:has(+ * + .internal-button:active) {
+  box-shadow: 0.25rem 0.25rem 0 rgba(87,87,87,100%);
+}
+
+.c1 .yellow-shadow:has(+ .internal-button:active) {
+  box-shadow: 0.125rem 0.125rem 0 rgba(255,229,85,100%);
+}
+
+<div>
+  <div
+    class="c0 c1"
+  >
+    <div
+      class="c2 grey-shadow"
+    />
+    <div
+      class="c2 yellow-shadow"
+    />
+    <button
+      class="c3 c4 internal-button"
+    >
+      <div
+        class="c5 c6"
+      >
+        <div
+          class="c7"
+        >
+          <img
+            alt=""
+            class="c8"
+            data-nimg="fill"
+            decoding="async"
+            loading="lazy"
+            src="https://res.cloudinary.com/mock-cloudinary-cloud/image/upload/v1707149070/icons/fv0z57zerrioft52dd9n.svg"
+            style="position: absolute; height: 100%; width: 100%; left: 0px; top: 0px; right: 0px; bottom: 0px; color: transparent;"
+          />
+        </div>
+        <span
+          class="c9"
+        >
+          Click Me
+        </span>
+      </div>
+    </button>
+  </div>
+</div>
+`;
diff --git a/src/components/buttons/OakButton/index.ts b/src/components/buttons/OakButton/index.ts
new file mode 100644
index 000000000..c210b5cee
--- /dev/null
+++ b/src/components/buttons/OakButton/index.ts
@@ -0,0 +1 @@
+export * from "./OakButton";
diff --git a/src/components/buttons/OakButton/oakButtonConfig.ts b/src/components/buttons/OakButton/oakButtonConfig.ts
new file mode 100644
index 000000000..e10d36da5
--- /dev/null
+++ b/src/components/buttons/OakButton/oakButtonConfig.ts
@@ -0,0 +1,301 @@
+import {
+  OakButtonVariant,
+  OakButtonColorScheme,
+  OakButtonSize,
+} from "./OakButton";
+
+import { OakUiRoleToken, OakDropShadowToken } from "@/styles";
+import { SizeStyleProps } from "@/styles/utils/sizeStyle";
+import { SpacingStyleProps } from "@/styles/utils/spacingStyle";
+import { FlexStyleProps } from "@/styles/utils/flexStyle";
+import { TypographyStyleProps } from "@/styles/utils/typographyStyle";
+import { OakLoadingSpinnerTokenSubset } from "@/styles/theme/spacing";
+
+type OakButtonVariantConfig = {
+  [key in OakButtonVariant]: {
+    colorSchemes: {
+      [key in OakButtonColorScheme]: {
+        /**
+         * default styles
+         */
+        defaultTextColor: OakUiRoleToken;
+        defaultBackground: OakUiRoleToken;
+        defaultBorderColor: OakUiRoleToken;
+        defaultIconColor: OakUiRoleToken;
+        defaultIconBackground: OakUiRoleToken;
+        defaultIconBorderColor: OakUiRoleToken;
+        /**
+         * hover styles
+         */
+        hoverTextColor: OakUiRoleToken;
+        hoverBackground: OakUiRoleToken;
+        hoverBorderColor: OakUiRoleToken;
+        hoverIconColor: OakUiRoleToken;
+        hoverIconBackground: OakUiRoleToken;
+        hoverIconBorderColor: OakUiRoleToken;
+        /**
+         * disabled styles
+         */
+        disabledTextColor: OakUiRoleToken;
+        disabledBackground: OakUiRoleToken;
+        disabledBorderColor: OakUiRoleToken;
+        disabledIconColor: OakUiRoleToken;
+        disabledIconBackground: OakUiRoleToken;
+        disabledIconBorderColor: OakUiRoleToken;
+        /**
+         * hover shadow
+         */
+        hoverShadow: OakDropShadowToken | null;
+      };
+    };
+  };
+};
+
+export const oakButtonVariantConfig: OakButtonVariantConfig = {
+  primary: {
+    colorSchemes: {
+      primary: {
+        /**
+         * default styles
+         */
+        defaultTextColor: "text-inverted",
+        defaultBackground: "bg-btn-primary",
+        defaultBorderColor: "border-primary",
+        defaultIconColor: "icon-inverted",
+        defaultIconBackground: "bg-btn-primary",
+        defaultIconBorderColor: "border-primary",
+        /**
+         * hover styles
+         */
+        hoverTextColor: "text-inverted",
+        hoverBackground: "bg-btn-primary-hover",
+        hoverBorderColor: "border-neutral-stronger",
+        hoverIconColor: "icon-inverted",
+        hoverIconBackground: "transparent",
+        hoverIconBorderColor: "transparent",
+        /**
+         * disabled styles
+         */
+        disabledTextColor: "text-inverted",
+        disabledBackground: "bg-btn-primary-disabled",
+        disabledBorderColor: "text-disabled",
+        disabledIconColor: "icon-inverted",
+        disabledIconBackground: "transparent",
+        disabledIconBorderColor: "transparent",
+        /**
+         * hover shadow
+         */
+        hoverShadow: "drop-shadow-lemon",
+      },
+      inverted: {
+        /**
+         * default styles
+         */
+        defaultTextColor: "text-primary",
+        defaultBackground: "bg-btn-secondary",
+        defaultBorderColor: "border-inverted",
+        defaultIconColor: "icon-primary",
+        defaultIconBackground: "transparent",
+        defaultIconBorderColor: "transparent",
+        /**
+         * hover styles
+         */
+        hoverTextColor: "text-primary",
+        hoverBackground: "bg-btn-secondary-hover",
+        hoverBorderColor: "bg-btn-secondary-hover",
+        hoverIconColor: "icon-primary",
+        hoverIconBackground: "transparent",
+        hoverIconBorderColor: "transparent",
+        /**
+         * disabled styles
+         */
+        disabledTextColor: "text-disabled",
+        disabledBackground: "bg-btn-secondary",
+        disabledBorderColor: "border-inverted",
+        disabledIconColor: "icon-disabled",
+        disabledIconBackground: "transparent",
+        disabledIconBorderColor: "transparent",
+        /**
+         * hover shadow
+         */
+        hoverShadow: null,
+      },
+    },
+  },
+  secondary: {
+    /**
+     * Secondary button has only one color scheme
+     */
+    colorSchemes: {
+      primary: {
+        /**
+         * default styles
+         */
+        defaultTextColor: "text-primary",
+        defaultBackground: "bg-btn-secondary",
+        defaultBorderColor: "border-primary",
+        defaultIconColor: "icon-primary",
+        defaultIconBackground: "transparent",
+        defaultIconBorderColor: "transparent",
+        /**
+         * hover styles
+         */
+        hoverTextColor: "text-primary",
+        hoverBackground: "bg-btn-secondary-hover",
+        hoverBorderColor: "border-primary",
+        hoverIconColor: "icon-primary",
+        hoverIconBackground: "transparent",
+        hoverIconBorderColor: "transparent",
+        /**
+         * disabled styles
+         */
+        disabledTextColor: "text-disabled",
+        disabledBackground: "bg-btn-secondary-disabled",
+        disabledBorderColor: "border-neutral",
+        disabledIconColor: "icon-disabled",
+        disabledIconBackground: "transparent",
+        disabledIconBorderColor: "transparent",
+        /**
+         * hover shadow
+         */
+        hoverShadow: "drop-shadow-lemon",
+      },
+    },
+  },
+  tertiary: {
+    colorSchemes: {
+      primary: {
+        /**
+         * default styles
+         */
+        defaultTextColor: "text-primary",
+        defaultBackground: "transparent",
+        defaultBorderColor: "transparent",
+        defaultIconColor: "icon-inverted",
+        defaultIconBackground: "bg-inverted",
+        defaultIconBorderColor: "border-primary",
+        /**
+         * hover styles
+         */
+        hoverTextColor: "text-subdued",
+        hoverBackground: "transparent",
+        hoverBorderColor: "transparent",
+        hoverIconColor: "icon-inverted",
+        hoverIconBackground: "bg-btn-primary-hover",
+        hoverIconBorderColor: "border-neutral-stronger",
+        /**
+         * disabled styles
+         */
+        disabledTextColor: "text-disabled",
+        disabledBackground: "transparent",
+        disabledBorderColor: "transparent",
+        disabledIconColor: "icon-inverted",
+        disabledIconBackground: "bg-btn-primary-disabled",
+        disabledIconBorderColor: "bg-btn-primary-disabled",
+        /**
+         * hover shadow
+         */
+        hoverShadow: "drop-shadow-lemon",
+      },
+      inverted: {
+        /**
+         * default styles
+         */
+        defaultTextColor: "text-primary",
+        defaultBackground: "bg-primary",
+        defaultBorderColor: "border-primary",
+        defaultIconColor: "icon-primary",
+        defaultIconBackground: "bg-btn-secondary",
+        defaultIconBorderColor: "border-primary",
+        /**
+         * hover styles
+         */
+        hoverTextColor: "text-subdued",
+        hoverBackground: "bg-primary",
+        hoverBorderColor: "border-primary",
+        hoverIconColor: "icon-primary",
+        hoverIconBackground: "bg-btn-secondary",
+        hoverIconBorderColor: "border-primary",
+        /**
+         * disabled styles
+         */
+        disabledTextColor: "text-disabled",
+        disabledBackground: "transparent",
+        disabledBorderColor: "transparent",
+        disabledIconColor: "icon-disabled",
+        disabledIconBackground: "bg-btn-secondary-disabled",
+        disabledIconBorderColor: "border-neutral",
+        /**
+         * hover shadow
+         */
+        hoverShadow: "drop-shadow-lemon",
+      },
+      transparent: {
+        /**
+         * default styles
+         */
+        defaultTextColor: "text-primary",
+        defaultBackground: "transparent",
+        defaultBorderColor: "transparent",
+        defaultIconColor: "icon-primary",
+        defaultIconBackground: "transparent",
+        defaultIconBorderColor: "transparent",
+        /**
+         * hover styles
+         */
+        hoverTextColor: "text-primary",
+        hoverBackground: "transparent",
+        hoverBorderColor: "transparent",
+        hoverIconColor: "icon-primary",
+        hoverIconBackground: "transparent",
+        hoverIconBorderColor: "transparent",
+        /**
+         * disabled styles
+         */
+        disabledTextColor: "text-disabled",
+        disabledBackground: "transparent",
+        disabledBorderColor: "transparent",
+        disabledIconColor: "icon-disabled",
+        disabledIconBackground: "transparent",
+        disabledIconBorderColor: "transparent",
+        /**
+         * hover shadow
+         */
+        hoverShadow: null,
+      },
+    },
+  },
+};
+
+type OakButtonSizeConfig = {
+  [key in OakButtonSize]: {
+    font: TypographyStyleProps["$font"];
+    pv: SpacingStyleProps["$pv"];
+    ph: SpacingStyleProps["$ph"];
+    loadingSpinnerSize: OakLoadingSpinnerTokenSubset;
+    iconGap: FlexStyleProps["$gap"];
+    iconBackgroundSize: SizeStyleProps["$width"];
+    iconSize: SizeStyleProps["$width"];
+  };
+};
+
+export const oakButtonSizeConfig: OakButtonSizeConfig = {
+  sm: {
+    font: "body-3-bold",
+    pv: "spacing-4",
+    ph: "spacing-8",
+    loadingSpinnerSize: "spacing-20",
+    iconGap: "spacing-4",
+    iconBackgroundSize: "spacing-24",
+    iconSize: "spacing-20",
+  },
+  md: {
+    font: "heading-7",
+    pv: "spacing-12",
+    ph: "spacing-16",
+    loadingSpinnerSize: "spacing-24",
+    iconGap: "spacing-8",
+    iconBackgroundSize: "spacing-32",
+    iconSize: "spacing-24",
+  },
+};
diff --git a/src/components/buttons/OakButtonWithDropdown/OakButtonWithDropdown.stories.tsx b/src/components/buttons/OakButtonWithDropdown/OakButtonWithDropdown.stories.tsx
index 76a6990f6..95b1bbccc 100644
--- a/src/components/buttons/OakButtonWithDropdown/OakButtonWithDropdown.stories.tsx
+++ b/src/components/buttons/OakButtonWithDropdown/OakButtonWithDropdown.stories.tsx
@@ -6,8 +6,7 @@ import { OakButtonWithDropdown } from "./OakButtonWithDropdown";
 import { OakFlex } from "@/components/layout-and-structure/OakFlex";
 import { OakIcon } from "@/components/images-and-icons/OakIcon";
 import { OakSpan } from "@/components/typography/OakSpan";
-import { OakSmallPrimaryInvertedButton } from "@/components/buttons/OakSmallPrimaryInvertedButton";
-import { OakSecondaryButton } from "@/components/buttons/OakSecondaryButton";
+import { OakButton } from "@/components/buttons/OakButton";
 
 // Generic Dropdown Navigation Button Stories
 const dropdownNavMeta: Meta<typeof OakButtonWithDropdown> = {
@@ -34,7 +33,7 @@ const dropdownNavMeta: Meta<typeof OakButtonWithDropdown> = {
     disabled: false,
     ariaLabel: "Additional teaching materials",
     ariaDescription: "Access additional teaching resources and materials",
-    buttonComponent: OakSecondaryButton,
+    buttonComponent: OakButton,
   },
   argTypes: {
     onPrimaryAction: {
@@ -52,21 +51,25 @@ export const ButtonWithDropdown: OakButtonWithDropdownStory = {
     <OakFlex $height={"spacing-240"}>
       <OakFlex $gap="spacing-24">
         <OakButtonWithDropdown {...args}>
-          <OakButtonWithDropdown.Item aria-label="Button 1">
+          <OakButtonWithDropdown.Item aria-label="Button 1" variant="secondary">
             Button 1
           </OakButtonWithDropdown.Item>
 
-          <OakButtonWithDropdown.Item aria-label="Longer button 2">
+          <OakButtonWithDropdown.Item
+            aria-label="Longer button 2"
+            variant="secondary"
+          >
             Longer button 2
           </OakButtonWithDropdown.Item>
 
-          <OakButtonWithDropdown.Item aria-label="Button 3">
+          <OakButtonWithDropdown.Item aria-label="Button 3" variant="secondary">
             Button 3
           </OakButtonWithDropdown.Item>
 
           <OakButtonWithDropdown.Divider />
 
           <OakButtonWithDropdown.Item
+            variant="secondary"
             element="a"
             href="#"
             aria-label="Button 4"
@@ -77,13 +80,13 @@ export const ButtonWithDropdown: OakButtonWithDropdownStory = {
         </OakButtonWithDropdown>
 
         <OakButtonWithDropdown {...args} primaryActionText="Disabled" disabled>
-          <OakButtonWithDropdown.Item aria-label="Button 1">
+          <OakButtonWithDropdown.Item aria-label="Button 1" variant="secondary">
             Button 1
           </OakButtonWithDropdown.Item>
         </OakButtonWithDropdown>
 
         <OakButtonWithDropdown {...args} primaryActionText="Loading" isLoading>
-          <OakButtonWithDropdown.Item aria-label="Button 1">
+          <OakButtonWithDropdown.Item aria-label="Button 1" variant="secondary">
             Button 1
           </OakButtonWithDropdown.Item>
         </OakButtonWithDropdown>
@@ -96,31 +99,40 @@ export const leadingButtonIcon: OakButtonWithDropdownStory = {
   render: (args) => (
     <OakFlex $height={"spacing-240"}>
       <OakButtonWithDropdown {...args}>
-        <OakButtonWithDropdown.Item iconName="external" aria-label="Glossary">
+        <OakButtonWithDropdown.Item
+          iconName="external"
+          aria-label="Glossary"
+          variant="secondary"
+        >
           Glossary
         </OakButtonWithDropdown.Item>
         <OakButtonWithDropdown.Item
           iconName="external"
           aria-label="Comprehension task"
+          variant="secondary"
         >
           Comprehension task
         </OakButtonWithDropdown.Item>
         <OakButtonWithDropdown.Item
           iconName="external"
           aria-label="More starter quiz questions"
+          variant="secondary"
         >
           More starter quiz questions
         </OakButtonWithDropdown.Item>
         <OakButtonWithDropdown.Item
           iconName="external"
           aria-label="More exit quiz questions"
+          variant="secondary"
         >
           More exit quiz questions
         </OakButtonWithDropdown.Item>
 
         <OakButtonWithDropdown.Divider />
 
-        <OakSmallPrimaryInvertedButton
+        <OakButton
+          variant="primary"
+          colorScheme="inverted"
           element="a"
           href="https://www.oaknationalacademy.com/ai"
           target="_blank"
@@ -133,7 +145,7 @@ export const leadingButtonIcon: OakButtonWithDropdownStory = {
               <OakIcon iconHeight="spacing-24" iconName="external" />
             </OakFlex>
           </OakFlex>
-        </OakSmallPrimaryInvertedButton>
+        </OakButton>
       </OakButtonWithDropdown>
     </OakFlex>
   ),
diff --git a/src/components/buttons/OakButtonWithDropdown/OakButtonWithDropdown.test.tsx b/src/components/buttons/OakButtonWithDropdown/OakButtonWithDropdown.test.tsx
index f295ac3a5..4026f7fc5 100644
--- a/src/components/buttons/OakButtonWithDropdown/OakButtonWithDropdown.test.tsx
+++ b/src/components/buttons/OakButtonWithDropdown/OakButtonWithDropdown.test.tsx
@@ -5,12 +5,12 @@ import "@testing-library/jest-dom";
 
 import { OakButtonWithDropdown } from "./OakButtonWithDropdown";
 
-import { OakSecondaryButton } from "@/components/buttons/OakSecondaryButton";
+import { OakButton } from "@/components/buttons/OakButton";
 import renderWithTheme from "@/test-helpers/renderWithTheme";
 
 const defaultProps = {
   primaryActionText: "Actions",
-  buttonComponent: OakSecondaryButton,
+  buttonComponent: OakButton,
 };
 
 const simpleChildren = (
diff --git a/src/components/buttons/OakButtonWithDropdown/OakButtonWithDropdown.tsx b/src/components/buttons/OakButtonWithDropdown/OakButtonWithDropdown.tsx
index 36888a26c..445a4a526 100644
--- a/src/components/buttons/OakButtonWithDropdown/OakButtonWithDropdown.tsx
+++ b/src/components/buttons/OakButtonWithDropdown/OakButtonWithDropdown.tsx
@@ -1,9 +1,6 @@
 import React, { useState, useRef, useEffect, ElementType } from "react";
 
-import {
-  OakSecondaryButton,
-  OakSecondaryButtonProps,
-} from "@/components/buttons/OakSecondaryButton";
+import { OakButton, OakButtonProps } from "@/components/buttons/OakButton";
 import { OakFlex } from "@/components/layout-and-structure/OakFlex";
 import { OakBox } from "@/components/layout-and-structure/OakBox";
 import { OakIconName } from "@/components/images-and-icons/OakIcon";
@@ -18,8 +15,7 @@ import { PolymorphicPropsWithoutRef } from "@/components/polymorphic";
 type ButtonComponent = <C extends React.ElementType = "button">({
   element,
   ...rest
-}: OakSecondaryButtonProps &
-  PolymorphicPropsWithoutRef<C>) => React.JSX.Element;
+}: OakButtonProps & PolymorphicPropsWithoutRef<C>) => React.JSX.Element;
 
 export type OakButtonWithDropdownProps = {
   primaryActionText: string;
@@ -146,6 +142,7 @@ export const OakButtonWithDropdown = ({
       <OakFlex $flexDirection="column" $gap="spacing-12">
         <OakFlex $width={flexWidth} $gap="spacing-12">
           <ButtonComponent
+            variant="secondary"
             iconName={primaryActionIcon}
             isTrailingIcon
             onClick={handlePrimaryAction}
@@ -206,9 +203,9 @@ OakButtonWithDropdown.Item = <C extends ElementType = "button">({
   ...rest
 }: {
   children: React.ReactNode;
-} & OakSecondaryButtonProps &
+} & OakButtonProps &
   PolymorphicPropsWithoutRef<C>): React.ReactElement => (
-  <OakSecondaryButton element="a" role="menuitem" isTrailingIcon {...rest}>
+  <OakButton element="a" role="menuitem" isTrailingIcon {...rest}>
     {children}
-  </OakSecondaryButton>
+  </OakButton>
 );
diff --git a/src/components/buttons/OakCloseButton/__snapshots__/OakCloseButton.test.tsx.snap b/src/components/buttons/OakCloseButton/__snapshots__/OakCloseButton.test.tsx.snap
index bb1c1047b..afd1fd13d 100644
--- a/src/components/buttons/OakCloseButton/__snapshots__/OakCloseButton.test.tsx.snap
+++ b/src/components/buttons/OakCloseButton/__snapshots__/OakCloseButton.test.tsx.snap
@@ -163,10 +163,18 @@ exports[`OakCloseButton matches snapshot 1`] = `
   background: #f2f2f2;
 }
 
+.c2 > :first-child:hover .icon-container div {
+  border-color: #f2f2f2;
+}
+
 .c2 > :first-child:active .icon-container {
   background: transparent;
 }
 
+.c2 > :first-child:active .icon-container div {
+  border-color: transparent;
+}
+
 <div>
   <div
     class="c0 c1 c2"
diff --git a/src/components/buttons/OakPrimaryButton/OakPrimaryButton.stories.tsx b/src/components/buttons/OakPrimaryButton/OakPrimaryButton.stories.tsx
index b61ed4635..a9a92186e 100644
--- a/src/components/buttons/OakPrimaryButton/OakPrimaryButton.stories.tsx
+++ b/src/components/buttons/OakPrimaryButton/OakPrimaryButton.stories.tsx
@@ -14,7 +14,7 @@ const controlIconNames = [
 const meta: Meta<typeof OakPrimaryButton> = {
   component: OakPrimaryButton,
   tags: ["autodocs"],
-  title: "components/Buttons/OakPrimaryButton",
+  title: "components/Buttons/OakPrimaryButton (deprecated)",
   argTypes: {
     iconName: {
       options: controlIconNames,
@@ -53,6 +53,9 @@ export const Default: Story = {
   },
 };
 
+/**
+ * hey
+ */
 export const LinkStyledAsButton: Story = {
   render: (args) => (
     <OakFlex $gap="spacing-24">
@@ -63,5 +66,6 @@ export const LinkStyledAsButton: Story = {
     element: "a",
     href: "/",
     iconName: "arrow-right",
+    disabled: true,
   },
 };
diff --git a/src/components/buttons/OakPrimaryButton/OakPrimaryButton.tsx b/src/components/buttons/OakPrimaryButton/OakPrimaryButton.tsx
index d8b0ea1f1..450a779c9 100644
--- a/src/components/buttons/OakPrimaryButton/OakPrimaryButton.tsx
+++ b/src/components/buttons/OakPrimaryButton/OakPrimaryButton.tsx
@@ -21,16 +21,10 @@ export type OakPrimaryButtonProps = Omit<
 
 /**
  *
- * A specific implementation of InternalRectButtoną
+ * A specific implementation of InternalRectButton
  *
- * The following callbacks are available for tracking focus events:
- *
- * ### onClick
- * `onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;`
- *
- * ### onHovered
- *  `onHovered?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>, duration: number) => void;`<br>
- *  called after a mouseEnter and mouseLeave event has happened
+ * ⚠️ Deprecated - use `<OakButton />` instead
+ * @deprecated Use `<OakButton />` instead
  */
 export const OakPrimaryButton = <C extends ElementType = "button">({
   element,
diff --git a/src/components/buttons/OakPrimaryInvertedButton/OakPrimaryInvertedButton.stories.tsx b/src/components/buttons/OakPrimaryInvertedButton/OakPrimaryInvertedButton.stories.tsx
index 35c612f82..f939be458 100644
--- a/src/components/buttons/OakPrimaryInvertedButton/OakPrimaryInvertedButton.stories.tsx
+++ b/src/components/buttons/OakPrimaryInvertedButton/OakPrimaryInvertedButton.stories.tsx
@@ -14,7 +14,7 @@ const controlIconNames = [
 const meta: Meta<typeof OakPrimaryInvertedButton> = {
   component: OakPrimaryInvertedButton,
   tags: ["autodocs"],
-  title: "components/Buttons/OakPrimaryInvertedButton",
+  title: "components/Buttons/OakPrimaryInvertedButton (deprecated)",
   argTypes: {
     iconName: {
       options: controlIconNames,
diff --git a/src/components/buttons/OakPrimaryInvertedButton/OakPrimaryInvertedButton.tsx b/src/components/buttons/OakPrimaryInvertedButton/OakPrimaryInvertedButton.tsx
index 59f97ef49..83f5eee55 100644
--- a/src/components/buttons/OakPrimaryInvertedButton/OakPrimaryInvertedButton.tsx
+++ b/src/components/buttons/OakPrimaryInvertedButton/OakPrimaryInvertedButton.tsx
@@ -23,14 +23,8 @@ export type OakPrimaryInvertedButtonProps = Omit<
  *
  * A specific implementation of InternalRectButton
  *
- * The following callbacks are available for tracking focus events:ą
- *
- * ### onClick
- * `onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;`
- *
- * ### onHovered
- *  `onHovered?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>, duration: number) => void;`<br>
- *  called after a mouseEnter and mouseLeave event has happened
+ *⚠️ Deprecated - use `<OakButton />` instead
+ * @deprecated Use `<OakButton />` instead
  */
 export const OakPrimaryInvertedButton = <C extends ElementType = "button">({
   element,
diff --git a/src/components/buttons/OakSecondaryButton/OakSecondaryButton.stories.tsx b/src/components/buttons/OakSecondaryButton/OakSecondaryButton.stories.tsx
index b9a1f9d1b..61e938d16 100644
--- a/src/components/buttons/OakSecondaryButton/OakSecondaryButton.stories.tsx
+++ b/src/components/buttons/OakSecondaryButton/OakSecondaryButton.stories.tsx
@@ -14,7 +14,7 @@ const controlIconNames = [
 const meta: Meta<typeof OakSecondaryButton> = {
   component: OakSecondaryButton,
   tags: ["autodocs"],
-  title: "components/Buttons/OakSecondaryButton",
+  title: "components/Buttons/OakSecondaryButton (deprecated)",
   argTypes: {
     iconName: {
       options: controlIconNames,
diff --git a/src/components/buttons/OakSecondaryButton/OakSecondaryButton.tsx b/src/components/buttons/OakSecondaryButton/OakSecondaryButton.tsx
index 5e3eea21a..cdaebb34f 100644
--- a/src/components/buttons/OakSecondaryButton/OakSecondaryButton.tsx
+++ b/src/components/buttons/OakSecondaryButton/OakSecondaryButton.tsx
@@ -23,14 +23,8 @@ export type OakSecondaryButtonProps = Omit<
  *
  * A specific implementation of InternalRectButton
  *
- * The following callbacks are available for tracking focus events:
- *
- * ### onClick
- * `onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;`
- *
- * ### onHovered
- *  `onHovered?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>, duration: number) => void;`<br>
- *  called after a mouseEnter and mouseLeave event has happened
+ * ⚠️ Deprecated - use `<OakButton />` instead
+ * @deprecated Use `<OakButton />` instead
  */
 export const OakSecondaryButton = <C extends ElementType = "button">({
   element,
diff --git a/src/components/buttons/OakSecondaryButtonWithDropdown/OakSecondaryButtonWithDropdown.stories.tsx b/src/components/buttons/OakSecondaryButtonWithDropdown/OakSecondaryButtonWithDropdown.stories.tsx
index c8de98083..5971f5978 100644
--- a/src/components/buttons/OakSecondaryButtonWithDropdown/OakSecondaryButtonWithDropdown.stories.tsx
+++ b/src/components/buttons/OakSecondaryButtonWithDropdown/OakSecondaryButtonWithDropdown.stories.tsx
@@ -7,7 +7,7 @@ import { OakBox } from "@/components/layout-and-structure/OakBox";
 import { OakFlex } from "@/components/layout-and-structure/OakFlex";
 import { OakIcon } from "@/components/images-and-icons/OakIcon";
 import { OakSpan } from "@/components/typography/OakSpan";
-import { OakPrimaryInvertedButton } from "@/components/buttons/OakPrimaryInvertedButton";
+import { OakButton } from "@/components/buttons/OakButton";
 
 // Generic Dropdown Navigation Button Stories
 const dropdownNavMeta: Meta<typeof OakSecondaryButtonWithDropdown> = {
@@ -50,17 +50,32 @@ export const ButtonWithDropDown: DropdownNavStory = {
     <OakBox $height={"spacing-240"}>
       <OakFlex $gap="spacing-24">
         <OakSecondaryButtonWithDropdown {...args}>
-          <OakSecondaryButtonWithDropdown.Item>
+          <OakSecondaryButtonWithDropdown.Item
+            variant="primary"
+            colorScheme="inverted"
+          >
             Button 1
           </OakSecondaryButtonWithDropdown.Item>
-          <OakSecondaryButtonWithDropdown.Item aria-label="Longer button 2">
+          <OakSecondaryButtonWithDropdown.Item
+            aria-label="Longer button 2"
+            variant="primary"
+            colorScheme="inverted"
+          >
             Longer button 2
           </OakSecondaryButtonWithDropdown.Item>
-          <OakSecondaryButtonWithDropdown.Item aria-label="Button 3">
+          <OakSecondaryButtonWithDropdown.Item
+            aria-label="Button 3"
+            variant="primary"
+            colorScheme="inverted"
+          >
             Button 3
           </OakSecondaryButtonWithDropdown.Item>
           <OakSecondaryButtonWithDropdown.Divider />
-          <OakSecondaryButtonWithDropdown.Item aria-label="Button 4">
+          <OakSecondaryButtonWithDropdown.Item
+            aria-label="Button 4"
+            variant="primary"
+            colorScheme="inverted"
+          >
             Button 4
           </OakSecondaryButtonWithDropdown.Item>
         </OakSecondaryButtonWithDropdown>
@@ -70,17 +85,32 @@ export const ButtonWithDropDown: DropdownNavStory = {
           primaryActionText="Disabled"
           disabled
         >
-          <OakSecondaryButtonWithDropdown.Item>
+          <OakSecondaryButtonWithDropdown.Item
+            variant="primary"
+            colorScheme="inverted"
+          >
             Button 1
           </OakSecondaryButtonWithDropdown.Item>
-          <OakSecondaryButtonWithDropdown.Item aria-label="Longer button 2">
+          <OakSecondaryButtonWithDropdown.Item
+            aria-label="Longer button 2"
+            variant="primary"
+            colorScheme="inverted"
+          >
             Longer button 2
           </OakSecondaryButtonWithDropdown.Item>
-          <OakSecondaryButtonWithDropdown.Item aria-label="Button 3">
+          <OakSecondaryButtonWithDropdown.Item
+            aria-label="Button 3"
+            variant="primary"
+            colorScheme="inverted"
+          >
             Button 3
           </OakSecondaryButtonWithDropdown.Item>
           <OakSecondaryButtonWithDropdown.Divider />
-          <OakSecondaryButtonWithDropdown.Item aria-label="Button 4">
+          <OakSecondaryButtonWithDropdown.Item
+            aria-label="Button 4"
+            variant="primary"
+            colorScheme="inverted"
+          >
             Button 4
           </OakSecondaryButtonWithDropdown.Item>
         </OakSecondaryButtonWithDropdown>
@@ -90,17 +120,32 @@ export const ButtonWithDropDown: DropdownNavStory = {
           primaryActionText="Loading"
           isLoading
         >
-          <OakSecondaryButtonWithDropdown.Item>
+          <OakSecondaryButtonWithDropdown.Item
+            variant="primary"
+            colorScheme="inverted"
+          >
             Button 1
           </OakSecondaryButtonWithDropdown.Item>
-          <OakSecondaryButtonWithDropdown.Item aria-label="Longer button 2">
+          <OakSecondaryButtonWithDropdown.Item
+            aria-label="Longer button 2"
+            variant="primary"
+            colorScheme="inverted"
+          >
             Longer button 2
           </OakSecondaryButtonWithDropdown.Item>
-          <OakSecondaryButtonWithDropdown.Item aria-label="Button 3">
+          <OakSecondaryButtonWithDropdown.Item
+            aria-label="Button 3"
+            variant="primary"
+            colorScheme="inverted"
+          >
             Button 3
           </OakSecondaryButtonWithDropdown.Item>
           <OakSecondaryButtonWithDropdown.Divider />
-          <OakSecondaryButtonWithDropdown.Item aria-label="Button 4">
+          <OakSecondaryButtonWithDropdown.Item
+            aria-label="Button 4"
+            variant="primary"
+            colorScheme="inverted"
+          >
             Button 4
           </OakSecondaryButtonWithDropdown.Item>
         </OakSecondaryButtonWithDropdown>
@@ -114,24 +159,32 @@ export const withIcons: DropdownNavStory = {
     <OakBox $height={"spacing-240"}>
       <OakSecondaryButtonWithDropdown {...args}>
         <OakSecondaryButtonWithDropdown.Item
+          variant="primary"
+          colorScheme="inverted"
           iconName="external"
           aria-label="Glossary"
         >
           Glossary
         </OakSecondaryButtonWithDropdown.Item>
         <OakSecondaryButtonWithDropdown.Item
+          variant="primary"
+          colorScheme="inverted"
           iconName="external"
           aria-label="Comprehension task"
         >
           Comprehension task
         </OakSecondaryButtonWithDropdown.Item>
         <OakSecondaryButtonWithDropdown.Item
+          variant="primary"
+          colorScheme="inverted"
           iconName="external"
           aria-label="More starter quiz questions"
         >
           More starter quiz questions
         </OakSecondaryButtonWithDropdown.Item>
         <OakSecondaryButtonWithDropdown.Item
+          variant="primary"
+          colorScheme="inverted"
           iconName="external"
           aria-label="More exit quiz questions"
         >
@@ -139,7 +192,9 @@ export const withIcons: DropdownNavStory = {
         </OakSecondaryButtonWithDropdown.Item>
 
         <OakSecondaryButtonWithDropdown.Divider />
-        <OakPrimaryInvertedButton
+        <OakButton
+          variant="primary"
+          colorScheme="inverted"
           element="a"
           href="https://www.oaknationalacademy.com/ai"
           target="_blank"
@@ -152,7 +207,7 @@ export const withIcons: DropdownNavStory = {
               <OakIcon iconHeight="spacing-24" iconName="external" />
             </OakFlex>
           </OakFlex>
-        </OakPrimaryInvertedButton>
+        </OakButton>
       </OakSecondaryButtonWithDropdown>
     </OakBox>
   ),
diff --git a/src/components/buttons/OakSecondaryButtonWithDropdown/OakSecondaryButtonWithDropdown.tsx b/src/components/buttons/OakSecondaryButtonWithDropdown/OakSecondaryButtonWithDropdown.tsx
index f9316dcef..ef9899a96 100644
--- a/src/components/buttons/OakSecondaryButtonWithDropdown/OakSecondaryButtonWithDropdown.tsx
+++ b/src/components/buttons/OakSecondaryButtonWithDropdown/OakSecondaryButtonWithDropdown.tsx
@@ -1,11 +1,7 @@
 import React, { ElementType } from "react";
 
-import {
-  OakPrimaryInvertedButton,
-  OakPrimaryInvertedButtonProps,
-} from "@/components/buttons/OakPrimaryInvertedButton";
+import { OakButton, OakButtonProps } from "@/components/buttons/OakButton";
 import { OakIconName } from "@/components/images-and-icons/OakIcon";
-import { OakSecondaryButton } from "@/components/buttons/OakSecondaryButton";
 import { OakButtonWithDropdown } from "@/components/buttons/OakButtonWithDropdown";
 import { PolymorphicPropsWithoutRef } from "@/components/polymorphic";
 
@@ -32,7 +28,7 @@ export const OakSecondaryButtonWithDropdown = (
   return (
     <OakButtonWithDropdown
       {...props}
-      buttonComponent={OakSecondaryButton}
+      buttonComponent={OakButton}
       dropdownTopSpacing="spacing-56"
     />
   );
@@ -48,14 +44,9 @@ OakSecondaryButtonWithDropdown.Item = <C extends ElementType = "button">({
   ...rest
 }: {
   children: React.ReactNode;
-} & OakPrimaryInvertedButtonProps &
+} & OakButtonProps &
   PolymorphicPropsWithoutRef<C>): React.ReactElement => (
-  <OakPrimaryInvertedButton
-    element="a"
-    role="menuitem"
-    isTrailingIcon
-    {...rest}
-  >
+  <OakButton element="a" role="menuitem" isTrailingIcon {...rest}>
     {children}
-  </OakPrimaryInvertedButton>
+  </OakButton>
 );
diff --git a/src/components/buttons/OakSmallPrimaryButton/OakSmallPrimaryButton.stories.tsx b/src/components/buttons/OakSmallPrimaryButton/OakSmallPrimaryButton.stories.tsx
index 7db30f30c..cbd49d48a 100644
--- a/src/components/buttons/OakSmallPrimaryButton/OakSmallPrimaryButton.stories.tsx
+++ b/src/components/buttons/OakSmallPrimaryButton/OakSmallPrimaryButton.stories.tsx
@@ -14,7 +14,7 @@ const controlIconNames = [
 const meta: Meta<typeof OakSmallPrimaryButton> = {
   component: OakSmallPrimaryButton,
   tags: ["autodocs"],
-  title: "components/Buttons/OakSmallPrimaryButton",
+  title: "components/Buttons/OakSmallPrimaryButton (deprecated)",
   argTypes: {
     iconName: {
       options: controlIconNames,
diff --git a/src/components/buttons/OakSmallPrimaryButton/OakSmallPrimaryButton.tsx b/src/components/buttons/OakSmallPrimaryButton/OakSmallPrimaryButton.tsx
index d1651cdac..5b99e8b99 100644
--- a/src/components/buttons/OakSmallPrimaryButton/OakSmallPrimaryButton.tsx
+++ b/src/components/buttons/OakSmallPrimaryButton/OakSmallPrimaryButton.tsx
@@ -26,14 +26,8 @@ export type OakSmallPrimaryButtonProps = Omit<
  *
  * A specific implementation of InternalRectButton
  *
- * The following callbacks are available for tracking focus events:
- *
- * ### onClick
- * `onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;`
- *
- * ### onHovered
- *  `onHovered?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>, duration: number) => void;`<br>
- *  called after a mouseEnter and mouseLeave event has happened
+ * ⚠️ Deprecated - use `<OakButton />` instead
+ * @deprecated Use `<OakButton />` instead
  */
 export const OakSmallPrimaryButton = <C extends ElementType = "button">({
   element,
diff --git a/src/components/buttons/OakSmallPrimaryInvertedButton/OakSmallPrimaryInvertedButton.stories.tsx b/src/components/buttons/OakSmallPrimaryInvertedButton/OakSmallPrimaryInvertedButton.stories.tsx
index 4377900a2..8015a57d9 100644
--- a/src/components/buttons/OakSmallPrimaryInvertedButton/OakSmallPrimaryInvertedButton.stories.tsx
+++ b/src/components/buttons/OakSmallPrimaryInvertedButton/OakSmallPrimaryInvertedButton.stories.tsx
@@ -14,7 +14,7 @@ const controlIconNames = [
 const meta: Meta<typeof OakSmallPrimaryInvertedButton> = {
   component: OakSmallPrimaryInvertedButton,
   tags: ["autodocs"],
-  title: "components/Buttons/OakSmallPrimaryInvertedButton",
+  title: "components/Buttons/OakSmallPrimaryInvertedButton (deprecated)",
   argTypes: {
     iconName: {
       options: controlIconNames,
diff --git a/src/components/buttons/OakSmallPrimaryInvertedButton/OakSmallPrimaryInvertedButton.tsx b/src/components/buttons/OakSmallPrimaryInvertedButton/OakSmallPrimaryInvertedButton.tsx
index fd9437b10..cc7d6b6a0 100644
--- a/src/components/buttons/OakSmallPrimaryInvertedButton/OakSmallPrimaryInvertedButton.tsx
+++ b/src/components/buttons/OakSmallPrimaryInvertedButton/OakSmallPrimaryInvertedButton.tsx
@@ -23,14 +23,8 @@ export type OakSmallPrimaryInvertedButtonProps = Omit<
  *
  * A specific implementation of InternalRectButton
  *
- * The following callbacks are available for tracking focus events:
- *
- * ### onClick
- * `onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;`
- *
- * ### onHovered
- *  `onHovered?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>, duration: number) => void;`<br>
- *  called after a mouseEnter and mouseLeave event has happened
+ * ⚠️ Deprecated - use `<OakButton />` instead
+ * @deprecated Use `<OakButton />` instead
  */
 export const OakSmallPrimaryInvertedButton = <
   C extends ElementType = "button",
diff --git a/src/components/buttons/OakSmallSecondaryButton/OakSmallSecondaryButton.stories.tsx b/src/components/buttons/OakSmallSecondaryButton/OakSmallSecondaryButton.stories.tsx
index 5474d28f4..c9be40945 100644
--- a/src/components/buttons/OakSmallSecondaryButton/OakSmallSecondaryButton.stories.tsx
+++ b/src/components/buttons/OakSmallSecondaryButton/OakSmallSecondaryButton.stories.tsx
@@ -14,7 +14,7 @@ const controlIconNames = [
 const meta: Meta<typeof OakSmallSecondaryButton> = {
   component: OakSmallSecondaryButton,
   tags: ["autodocs"],
-  title: "components/Buttons/OakSmallSecondaryButton",
+  title: "components/Buttons/OakSmallSecondaryButton (deprecated)",
   argTypes: {
     iconName: {
       options: controlIconNames,
diff --git a/src/components/buttons/OakSmallSecondaryButton/OakSmallSecondaryButton.tsx b/src/components/buttons/OakSmallSecondaryButton/OakSmallSecondaryButton.tsx
index bcd78cbd8..a5a0c9ddc 100644
--- a/src/components/buttons/OakSmallSecondaryButton/OakSmallSecondaryButton.tsx
+++ b/src/components/buttons/OakSmallSecondaryButton/OakSmallSecondaryButton.tsx
@@ -26,14 +26,8 @@ export type OakSmallSecondaryButtonProps = Omit<
  *
  * A specific implementation of InternalRectButton
  *
- * The following callbacks are available for tracking focus events:
- *
- * ### onClick
- * `onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;`
- *
- * ### onHovered
- *  `onHovered?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>, duration: number) => void;`<br>
- *  called after a mouseEnter and mouseLeave event has happened
+ * ⚠️ Deprecated - use `<OakButton />` instead
+ * @deprecated Use `<OakButton />` instead
  */
 export const OakSmallSecondaryButton = <C extends ElementType = "button">({
   element,
diff --git a/src/components/buttons/OakSmallSecondaryButtonWithDropdown/OakSmallSecondaryButtonWithDropdown.stories.tsx b/src/components/buttons/OakSmallSecondaryButtonWithDropdown/OakSmallSecondaryButtonWithDropdown.stories.tsx
index 85b4f5d87..e1104dfa1 100644
--- a/src/components/buttons/OakSmallSecondaryButtonWithDropdown/OakSmallSecondaryButtonWithDropdown.stories.tsx
+++ b/src/components/buttons/OakSmallSecondaryButtonWithDropdown/OakSmallSecondaryButtonWithDropdown.stories.tsx
@@ -6,7 +6,7 @@ import { OakSmallSecondaryButtonWithDropdown } from "./OakSmallSecondaryButtonWi
 import { OakFlex } from "@/components/layout-and-structure/OakFlex";
 import { OakSpan } from "@/components/typography/OakSpan";
 import { OakIcon } from "@/components/images-and-icons/OakIcon";
-import { OakSmallPrimaryInvertedButton } from "@/components/buttons/OakSmallPrimaryInvertedButton";
+import { OakButton } from "@/components/buttons/OakButton";
 
 // Generic Dropdown Navigation Button Stories
 const dropdownNavMeta: Meta<typeof OakSmallSecondaryButtonWithDropdown> = {
@@ -50,21 +50,39 @@ export const ButtonWithDropDown: DropdownNavStory = {
     <OakFlex $height={"spacing-240"}>
       <OakFlex $gap="spacing-24">
         <OakSmallSecondaryButtonWithDropdown {...args}>
-          <OakSmallSecondaryButtonWithDropdown.Item aria-label="Button 1">
+          <OakSmallSecondaryButtonWithDropdown.Item
+            aria-label="Button 1"
+            variant="primary"
+            colorScheme="inverted"
+            size="sm"
+          >
             Button 1
           </OakSmallSecondaryButtonWithDropdown.Item>
 
-          <OakSmallSecondaryButtonWithDropdown.Item aria-label="Longer button 2">
+          <OakSmallSecondaryButtonWithDropdown.Item
+            aria-label="Longer button 2"
+            variant="primary"
+            colorScheme="inverted"
+            size="sm"
+          >
             Longer button 2
           </OakSmallSecondaryButtonWithDropdown.Item>
 
-          <OakSmallSecondaryButtonWithDropdown.Item aria-label="Button 3">
+          <OakSmallSecondaryButtonWithDropdown.Item
+            aria-label="Button 3"
+            variant="primary"
+            colorScheme="inverted"
+            size="sm"
+          >
             Button 3
           </OakSmallSecondaryButtonWithDropdown.Item>
 
           <OakSmallSecondaryButtonWithDropdown.Divider />
 
           <OakSmallSecondaryButtonWithDropdown.Item
+            variant="primary"
+            colorScheme="inverted"
+            size="sm"
             element="a"
             href="#"
             aria-label="Button 4"
@@ -79,7 +97,12 @@ export const ButtonWithDropDown: DropdownNavStory = {
           primaryActionText="Disabled"
           disabled
         >
-          <OakSmallSecondaryButtonWithDropdown.Item aria-label="Button 1">
+          <OakSmallSecondaryButtonWithDropdown.Item
+            aria-label="Button 1"
+            variant="primary"
+            colorScheme="inverted"
+            size="sm"
+          >
             Button 1
           </OakSmallSecondaryButtonWithDropdown.Item>
         </OakSmallSecondaryButtonWithDropdown>
@@ -89,7 +112,12 @@ export const ButtonWithDropDown: DropdownNavStory = {
           primaryActionText="Loading"
           isLoading
         >
-          <OakSmallSecondaryButtonWithDropdown.Item aria-label="Button 1">
+          <OakSmallSecondaryButtonWithDropdown.Item
+            aria-label="Button 1"
+            variant="primary"
+            colorScheme="inverted"
+            size="sm"
+          >
             Button 1
           </OakSmallSecondaryButtonWithDropdown.Item>
         </OakSmallSecondaryButtonWithDropdown>
@@ -103,24 +131,36 @@ export const leadingButtonIcon: DropdownNavStory = {
     <OakFlex $height={"spacing-240"}>
       <OakSmallSecondaryButtonWithDropdown {...args}>
         <OakSmallSecondaryButtonWithDropdown.Item
+          variant="primary"
+          colorScheme="inverted"
+          size="sm"
           iconName="external"
           aria-label="Glossary"
         >
           Glossary
         </OakSmallSecondaryButtonWithDropdown.Item>
         <OakSmallSecondaryButtonWithDropdown.Item
+          variant="primary"
+          colorScheme="inverted"
+          size="sm"
           iconName="external"
           aria-label="Comprehension task"
         >
           Comprehension task
         </OakSmallSecondaryButtonWithDropdown.Item>
         <OakSmallSecondaryButtonWithDropdown.Item
+          variant="primary"
+          colorScheme="inverted"
+          size="sm"
           iconName="external"
           aria-label="More starter quiz questions"
         >
           More starter quiz questions
         </OakSmallSecondaryButtonWithDropdown.Item>
         <OakSmallSecondaryButtonWithDropdown.Item
+          variant="primary"
+          colorScheme="inverted"
+          size="sm"
           iconName="external"
           aria-label="More exit quiz questions"
         >
@@ -129,7 +169,10 @@ export const leadingButtonIcon: DropdownNavStory = {
 
         <OakSmallSecondaryButtonWithDropdown.Divider />
 
-        <OakSmallPrimaryInvertedButton
+        <OakButton
+          variant="primary"
+          colorScheme="inverted"
+          size="sm"
           element="a"
           href="https://www.oaknationalacademy.com/ai"
           target="_blank"
@@ -142,7 +185,7 @@ export const leadingButtonIcon: DropdownNavStory = {
               <OakIcon iconHeight="spacing-24" iconName="external" />
             </OakFlex>
           </OakFlex>
-        </OakSmallPrimaryInvertedButton>
+        </OakButton>
       </OakSmallSecondaryButtonWithDropdown>
     </OakFlex>
   ),
diff --git a/src/components/buttons/OakSmallSecondaryButtonWithDropdown/OakSmallSecondaryButtonWithDropdown.tsx b/src/components/buttons/OakSmallSecondaryButtonWithDropdown/OakSmallSecondaryButtonWithDropdown.tsx
index 4e1495c52..238ae8d97 100644
--- a/src/components/buttons/OakSmallSecondaryButtonWithDropdown/OakSmallSecondaryButtonWithDropdown.tsx
+++ b/src/components/buttons/OakSmallSecondaryButtonWithDropdown/OakSmallSecondaryButtonWithDropdown.tsx
@@ -1,12 +1,8 @@
 import React, { ElementType } from "react";
 
 import { OakIconName } from "@/components/images-and-icons";
-import { OakSmallSecondaryButton } from "@/components/buttons/OakSmallSecondaryButton";
 import { OakButtonWithDropdown } from "@/components/buttons/OakButtonWithDropdown";
-import {
-  OakSmallPrimaryInvertedButton,
-  OakSmallPrimaryInvertedButtonProps,
-} from "@/components/buttons/OakSmallPrimaryInvertedButton";
+import { OakButton, OakButtonProps } from "@/components/buttons/OakButton";
 import { PolymorphicPropsWithoutRef } from "@/components/polymorphic";
 
 export type OakSmallSecondaryButtonWithDropdownProps = {
@@ -22,6 +18,10 @@ export type OakSmallSecondaryButtonWithDropdownProps = {
   "data-testid"?: string;
 };
 
+const OakButtonSm = (props: Omit<OakButtonProps, "size">) => (
+  <OakButton {...props} size="sm" />
+);
+
 /**
  * A secondary button that allows children to be passed in as a dropdown menu.
  *
@@ -32,7 +32,7 @@ export const OakSmallSecondaryButtonWithDropdown = (
   return (
     <OakButtonWithDropdown
       {...props}
-      buttonComponent={OakSmallSecondaryButton}
+      buttonComponent={OakButtonSm}
       dropdownTopSpacing="spacing-40"
       flexWidth={["100%"]}
     />
@@ -49,14 +49,16 @@ OakSmallSecondaryButtonWithDropdown.Item = <C extends ElementType = "button">({
   ...rest
 }: {
   children: React.ReactNode;
-} & OakSmallPrimaryInvertedButtonProps &
+} & OakButtonProps &
   PolymorphicPropsWithoutRef<C>): React.ReactElement => (
-  <OakSmallPrimaryInvertedButton
+  <OakButton
+    colorScheme="inverted"
+    size="sm"
     element="a"
     role="menuitem"
     isTrailingIcon
     {...rest}
   >
     {children}
-  </OakSmallPrimaryInvertedButton>
+  </OakButton>
 );
diff --git a/src/components/buttons/OakSmallSecondaryButtonWithDropdown/__snapshots__/OakSmallSecondaryButtonWithDropdown.test.tsx.snap b/src/components/buttons/OakSmallSecondaryButtonWithDropdown/__snapshots__/OakSmallSecondaryButtonWithDropdown.test.tsx.snap
index 9bf1df718..baaa8296f 100644
--- a/src/components/buttons/OakSmallSecondaryButtonWithDropdown/__snapshots__/OakSmallSecondaryButtonWithDropdown.test.tsx.snap
+++ b/src/components/buttons/OakSmallSecondaryButtonWithDropdown/__snapshots__/OakSmallSecondaryButtonWithDropdown.test.tsx.snap
@@ -35,10 +35,10 @@ exports[`OakSmallSecondaryButtonWithDropdown matches snapshot 1`] = `
 
 .c13 {
   position: relative;
-  width: 1.5rem;
-  min-width: 1.5rem;
-  height: 1.5rem;
-  min-height: 1.5rem;
+  width: 1.25rem;
+  min-width: 1.25rem;
+  height: 1.25rem;
+  min-height: 1.25rem;
   font-family: --var(google-font),Lexend,sans-serif;
 }
 
@@ -144,8 +144,8 @@ exports[`OakSmallSecondaryButtonWithDropdown matches snapshot 1`] = `
 }
 
 .c9:hover {
-  -webkit-text-decoration: none;
-  text-decoration: none;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
   color: #222222;
   background: #f2f2f2;
   border-color: #222222;
diff --git a/src/components/buttons/OakSmallTertiaryInvertedButton/OakSmallTertiaryInvertedButton.tsx b/src/components/buttons/OakSmallTertiaryInvertedButton/OakSmallTertiaryInvertedButton.tsx
index ad22163ed..0259a7c0b 100644
--- a/src/components/buttons/OakSmallTertiaryInvertedButton/OakSmallTertiaryInvertedButton.tsx
+++ b/src/components/buttons/OakSmallTertiaryInvertedButton/OakSmallTertiaryInvertedButton.tsx
@@ -19,14 +19,6 @@ export type OakSmallTertiaryInvertedButtonProps = Omit<
  *
  * A specific implementation of InternalShadowIconButton
  *
- * The following callbacks are available for tracking focus events:
- *
- * ### onClick
- * `onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;`
- *
- * ### onHovered
- *  `onHovered?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>, duration: number) => void;`<br>
- *  called after a mouseEnter and mouseLeave event has happened
  */
 export const OakSmallTertiaryInvertedButton = <
   C extends ElementType = "button",
diff --git a/src/components/buttons/OakTertiaryButton/OakTertiaryButton.stories.tsx b/src/components/buttons/OakTertiaryButton/OakTertiaryButton.stories.tsx
index 4027f3733..bbe7bda18 100644
--- a/src/components/buttons/OakTertiaryButton/OakTertiaryButton.stories.tsx
+++ b/src/components/buttons/OakTertiaryButton/OakTertiaryButton.stories.tsx
@@ -8,7 +8,7 @@ import { OakFlex } from "@/components/layout-and-structure/OakFlex";
 const meta: Meta<typeof OakTertiaryButton> = {
   component: OakTertiaryButton,
   tags: ["autodocs"],
-  title: "components/Buttons/OakTertiaryButton",
+  title: "components/Buttons/OakTertiaryButton (deprecated)",
   argTypes: {},
   parameters: {
     controls: {
diff --git a/src/components/buttons/OakTertiaryButton/OakTertiaryButton.tsx b/src/components/buttons/OakTertiaryButton/OakTertiaryButton.tsx
index b70b726bb..f53716221 100644
--- a/src/components/buttons/OakTertiaryButton/OakTertiaryButton.tsx
+++ b/src/components/buttons/OakTertiaryButton/OakTertiaryButton.tsx
@@ -19,6 +19,8 @@ type OakTertiaryButtonProps = InternalButtonProps & {
 /**
  * An implementation of InternalShadowRoundButton, its a subtle button with no border and a round icon.
  *
+ * ⚠️ Deprecated - use `<OakButton />` instead
+ * @deprecated Use `<OakButton />` instead
  */
 export const OakTertiaryButton = <C extends ElementType = "button">({
   element,
diff --git a/src/components/buttons/OakTertiaryButton/__snapshots__/OakTertiaryButton.test.tsx.snap b/src/components/buttons/OakTertiaryButton/__snapshots__/OakTertiaryButton.test.tsx.snap
index 8cdda8f19..6904dc506 100644
--- a/src/components/buttons/OakTertiaryButton/__snapshots__/OakTertiaryButton.test.tsx.snap
+++ b/src/components/buttons/OakTertiaryButton/__snapshots__/OakTertiaryButton.test.tsx.snap
@@ -108,10 +108,18 @@ exports[`OakTertiaryButton matches snapshot 1`] = `
   background: #575757;
 }
 
+.c2 > :first-child:hover .icon-container div {
+  border-color: #575757;
+}
+
 .c2 > :first-child:active .icon-container {
   background: #222222;
 }
 
+.c2 > :first-child:active .icon-container div {
+  border-color: #222222;
+}
+
 <div>
   <div
     class="c0 c1 c2"
diff --git a/src/components/buttons/OakTertiaryInvertedButton/OakTertiaryInvertedButton.stories.tsx b/src/components/buttons/OakTertiaryInvertedButton/OakTertiaryInvertedButton.stories.tsx
index 9d27fb614..cd4d17689 100644
--- a/src/components/buttons/OakTertiaryInvertedButton/OakTertiaryInvertedButton.stories.tsx
+++ b/src/components/buttons/OakTertiaryInvertedButton/OakTertiaryInvertedButton.stories.tsx
@@ -8,7 +8,7 @@ import { OakFlex } from "@/components/layout-and-structure/OakFlex";
 const meta: Meta<typeof OakTertiaryInvertedButton> = {
   component: OakTertiaryInvertedButton,
   tags: ["autodocs"],
-  title: "components/Buttons/OakTertiaryInvertedButton",
+  title: "components/Buttons/OakTertiaryInvertedButton (deprecated)",
   argTypes: {},
   parameters: {
     controls: {
diff --git a/src/components/buttons/OakTertiaryInvertedButton/OakTertiaryInvertedButton.tsx b/src/components/buttons/OakTertiaryInvertedButton/OakTertiaryInvertedButton.tsx
index 30f6da7ac..ed0e3d3c9 100644
--- a/src/components/buttons/OakTertiaryInvertedButton/OakTertiaryInvertedButton.tsx
+++ b/src/components/buttons/OakTertiaryInvertedButton/OakTertiaryInvertedButton.tsx
@@ -16,6 +16,8 @@ type OakTertiaryInvertedButtonProps = InternalButtonProps & {
 /**
  * An implementation of InternalShadowRoundButton, its a subtle button with no border and a round icon.
  *
+ * ⚠️ Deprecated - use `<OakButton />` instead
+ * @deprecated Use `<OakButton />` instead
  */
 export const OakTertiaryInvertedButton = <C extends ElementType = "button">({
   element,
diff --git a/src/components/buttons/OakTertiaryInvertedButton/__snapshots__/OakTertiaryInvertedButton.test.tsx.snap b/src/components/buttons/OakTertiaryInvertedButton/__snapshots__/OakTertiaryInvertedButton.test.tsx.snap
index 0861382af..dda254222 100644
--- a/src/components/buttons/OakTertiaryInvertedButton/__snapshots__/OakTertiaryInvertedButton.test.tsx.snap
+++ b/src/components/buttons/OakTertiaryInvertedButton/__snapshots__/OakTertiaryInvertedButton.test.tsx.snap
@@ -108,10 +108,18 @@ exports[`OakTertiaryInvertedButton matches snapshot 1`] = `
   background: #ffffff;
 }
 
+.c2 > :first-child:hover .icon-container div {
+  border-color: #222222;
+}
+
 .c2 > :first-child:active .icon-container {
   background: #ffffff;
 }
 
+.c2 > :first-child:active .icon-container div {
+  border-color: #222222;
+}
+
 <div>
   <div
     class="c0 c1 c2"
diff --git a/src/components/buttons/index.ts b/src/components/buttons/index.ts
index e0b81d005..4a14eefaf 100644
--- a/src/components/buttons/index.ts
+++ b/src/components/buttons/index.ts
@@ -13,3 +13,4 @@ export * from "@/components/buttons/OakSmallTertiaryInvertedButton";
 export * from "@/components/buttons/OakTertiaryButton";
 export * from "@/components/buttons/OakTertiaryInvertedButton";
 export * from "@/components/buttons/OakLeftAlignedButton";
+export * from "@/components/buttons/OakButton";
diff --git a/src/components/cookies/OakCookieBanner/OakCookieBanner.tsx b/src/components/cookies/OakCookieBanner/OakCookieBanner.tsx
index 0355ee071..68cd6aa49 100644
--- a/src/components/cookies/OakCookieBanner/OakCookieBanner.tsx
+++ b/src/components/cookies/OakCookieBanner/OakCookieBanner.tsx
@@ -3,8 +3,7 @@ import React from "react";
 import { OakBox } from "@/components/layout-and-structure/OakBox";
 import { OakFlex } from "@/components/layout-and-structure/OakFlex";
 import { OakSpan } from "@/components/typography";
-import { OakPrimaryButton } from "@/components/buttons/OakPrimaryButton";
-import { OakSecondaryButton } from "@/components/buttons/OakSecondaryButton";
+import { OakButton } from "@/components/buttons/OakButton";
 import { OakSecondaryLink } from "@/components/navigation/OakSecondaryLink";
 import { OakAllSpacingToken } from "@/styles";
 import { ResponsiveValues } from "@/styles/utils/responsiveStyle";
@@ -124,9 +123,9 @@ export const OakCookieBanner = ({
                       at any time.
                     </OakBox>
                     <OakFlex $justifyContent="flex-end" $flexGrow={1}>
-                      <OakSecondaryButton onClick={onHide}>
+                      <OakButton variant="secondary" onClick={onHide}>
                         Hide this message
-                      </OakSecondaryButton>
+                      </OakButton>
                     </OakFlex>
                   </>
                 );
@@ -166,15 +165,16 @@ export const OakCookieBanner = ({
                           Reject non-essential cookies
                         </OakSecondaryLink>
                       </OakFlex>
-                      <OakSecondaryButton onClick={onOpenSettings}>
+                      <OakButton variant="secondary" onClick={onOpenSettings}>
                         Cookie settings
-                      </OakSecondaryButton>
-                      <OakPrimaryButton
+                      </OakButton>
+                      <OakButton
+                        variant="primary"
                         onClick={onAccept}
                         data-testid="cookie-banner-accept"
                       >
                         Accept all cookies
-                      </OakPrimaryButton>
+                      </OakButton>
                     </OakFlex>
                   </>
                 );
diff --git a/src/components/cookies/OakCookieConsent/OakCookieConsent.stories.tsx b/src/components/cookies/OakCookieConsent/OakCookieConsent.stories.tsx
index 9bcca786f..d771eddac 100644
--- a/src/components/cookies/OakCookieConsent/OakCookieConsent.stories.tsx
+++ b/src/components/cookies/OakCookieConsent/OakCookieConsent.stories.tsx
@@ -10,7 +10,7 @@ import {
   OakCookieConsentProviderProps,
   useCookieConsent,
 } from "@/components/cookies/OakCookieConsentProvider/OakCookieConsentProvider";
-import { OakSecondaryButton } from "@/components/buttons/OakSecondaryButton";
+import { OakButton } from "@/components/buttons/OakButton";
 import { sizeArgTypes } from "@/storybook-helpers/sizeStyleHelpers";
 
 const meta: Meta<
@@ -102,9 +102,9 @@ function ConsentBannerButton() {
   const { showBanner } = useCookieConsent();
 
   return (
-    <OakSecondaryButton onClick={showBanner}>
+    <OakButton variant="secondary" onClick={showBanner}>
       Start consent flow
-    </OakSecondaryButton>
+    </OakButton>
   );
 }
 
diff --git a/src/components/cookies/OakCookieSettingsModal/OakCookieSettingsModal.stories.tsx b/src/components/cookies/OakCookieSettingsModal/OakCookieSettingsModal.stories.tsx
index 6aeece579..09b7760c5 100644
--- a/src/components/cookies/OakCookieSettingsModal/OakCookieSettingsModal.stories.tsx
+++ b/src/components/cookies/OakCookieSettingsModal/OakCookieSettingsModal.stories.tsx
@@ -4,7 +4,7 @@ import { useArgs } from "@storybook/preview-api";
 
 import { OakCookieSettingsModal } from "./OakCookieSettingsModal";
 
-import { OakSecondaryButton } from "@/components/buttons/OakSecondaryButton";
+import { OakButton } from "@/components/buttons/OakButton";
 
 const meta: Meta<typeof OakCookieSettingsModal> = {
   component: OakCookieSettingsModal,
@@ -65,7 +65,9 @@ const meta: Meta<typeof OakCookieSettingsModal> = {
 
     return (
       <>
-        <OakSecondaryButton onClick={onOpen}>Open modal</OakSecondaryButton>
+        <OakButton variant="secondary" onClick={onOpen}>
+          Open modal
+        </OakButton>
         <OakCookieSettingsModal {...args} onClose={onClose} />
       </>
     );
diff --git a/src/components/cookies/OakCookieSettingsModal/OakCookieSettingsModal.tsx b/src/components/cookies/OakCookieSettingsModal/OakCookieSettingsModal.tsx
index 440b1bcbb..7be780e40 100644
--- a/src/components/cookies/OakCookieSettingsModal/OakCookieSettingsModal.tsx
+++ b/src/components/cookies/OakCookieSettingsModal/OakCookieSettingsModal.tsx
@@ -12,8 +12,7 @@ import {
   OakInformativeModalProps,
 } from "@/components/messaging-and-feedback/OakInformativeModal";
 import { OakLink } from "@/components/navigation/OakLink";
-import { OakPrimaryButton } from "@/components/buttons/OakPrimaryButton";
-import { OakSecondaryButton } from "@/components/buttons/OakSecondaryButton";
+import { OakButton } from "@/components/buttons";
 import { OakSecondaryLink } from "@/components/navigation/OakSecondaryLink";
 import { OakBox } from "@/components/layout-and-structure/OakBox";
 import { OakHeading } from "@/components/typography/OakHeading";
@@ -91,16 +90,17 @@ export const OakCookieSettingsModal = ({
       zIndex={zIndex}
       footerSlot={
         <OakInformativeModalFooter>
-          <OakSecondaryButton onClick={onReject} width="100%">
+          <OakButton variant="secondary" onClick={onReject} width="100%">
             Reject non-essential cookies
-          </OakSecondaryButton>
-          <OakPrimaryButton
+          </OakButton>
+          <OakButton
+            variant="primary"
             type="submit"
             form="cookie-settings-form"
             width="100%"
           >
             Confirm my choices
-          </OakPrimaryButton>
+          </OakButton>
         </OakInformativeModalFooter>
       }
     >
@@ -121,9 +121,9 @@ export const OakCookieSettingsModal = ({
           .
         </OakP>
         <OakBox $mb="spacing-56">
-          <OakPrimaryButton onClick={onAccept} width="spacing-180">
+          <OakButton variant="primary" onClick={onAccept} width="spacing-180">
             Allow all
-          </OakPrimaryButton>
+          </OakButton>
         </OakBox>
         <OakBox
           $ph="spacing-8"
diff --git a/src/components/form-elements/OakSecondaryButtonAsRadio/OakSecondaryButtonAsRadio.tsx b/src/components/form-elements/OakSecondaryButtonAsRadio/OakSecondaryButtonAsRadio.tsx
index 6692e8860..00ea3872d 100644
--- a/src/components/form-elements/OakSecondaryButtonAsRadio/OakSecondaryButtonAsRadio.tsx
+++ b/src/components/form-elements/OakSecondaryButtonAsRadio/OakSecondaryButtonAsRadio.tsx
@@ -1,8 +1,7 @@
 import React, { useContext } from "react";
 
-import { OakSecondaryButton } from "@/components/buttons/OakSecondaryButton";
 import { RadioContext } from "@/components/form-elements/OakButtonAsRadioGroup/OakButtonAsRadioGroup";
-import { OakPrimaryButton } from "@/components/buttons/OakPrimaryButton";
+import { OakButton } from "@/components/buttons/OakButton";
 
 export type OakSecondaryButtonAsRadioProps = {
   children?: React.ReactNode;
@@ -30,16 +29,17 @@ export const OakSecondaryButtonAsRadio = ({
   const checked = currentValue === value;
 
   return checked ? (
-    <OakPrimaryButton role="radio" aria-checked={checked}>
+    <OakButton variant="primary" role="radio" aria-checked={checked}>
       {children}
-    </OakPrimaryButton>
+    </OakButton>
   ) : (
-    <OakSecondaryButton
+    <OakButton
+      variant="secondary"
       role="radio"
       aria-checked={checked}
       onClick={() => onValueUpdated?.(value)}
     >
       {children}
-    </OakSecondaryButton>
+    </OakButton>
   );
 };
diff --git a/src/components/house-cat/OakCaptionSearch/OakCaptionSearch.tsx b/src/components/house-cat/OakCaptionSearch/OakCaptionSearch.tsx
index 8e0286a98..dde221ea2 100644
--- a/src/components/house-cat/OakCaptionSearch/OakCaptionSearch.tsx
+++ b/src/components/house-cat/OakCaptionSearch/OakCaptionSearch.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 
 import { OakFlex } from "@/components/layout-and-structure/OakFlex";
-import { OakPrimaryButton } from "@/components/buttons/OakPrimaryButton";
+import { OakButton } from "@/components/buttons/OakButton";
 import { OakFormInputWithLabels } from "@/components/owa/OakFormInputWithLabels/OakFormInputWithLabels";
 
 export interface OakCaptionSearchProps {
@@ -67,14 +67,15 @@ export const OakCaptionSearch = ({
         defaultValue={defaultValue}
         required
       />
-      <OakPrimaryButton
+      <OakButton
+        variant="primary"
         type="submit"
         iconName="search"
         isTrailingIcon
         isLoading={isLoading}
       >
         Search
-      </OakPrimaryButton>
+      </OakButton>
     </OakFlex>
   );
 };
diff --git a/src/components/internal-components/InternalButton/InternalButton.tsx b/src/components/internal-components/InternalButton/InternalButton.tsx
index b66c80dc4..8edcdf58c 100644
--- a/src/components/internal-components/InternalButton/InternalButton.tsx
+++ b/src/components/internal-components/InternalButton/InternalButton.tsx
@@ -21,7 +21,14 @@ type StyledButtonProps = TypographyStyleProps &
   DisplayStyleProps &
   BorderStyleProps &
   DropShadowStyleProps & {
+    /**
+     * Adds loading styles to the button and disables interactions when true
+     */
     isLoading?: boolean;
+    /**
+     * Disables the button and prevents interactions when true, works only if underlying element is a `button`
+     */
+    disabled?: boolean;
   };
 
 const internalButtonCss = css<StyledButtonProps>`
@@ -47,6 +54,9 @@ const internalButtonCss = css<StyledButtonProps>`
 `;
 
 export type InternalButtonProps = StyledButtonProps & {
+  /**
+   * Triggered when the button is hovered
+   */
   onHovered?: (
     event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
     duration: number,
diff --git a/src/components/internal-components/InternalReviewAccordion/__snapshots__/InternalReviewAccordion.test.tsx.snap b/src/components/internal-components/InternalReviewAccordion/__snapshots__/InternalReviewAccordion.test.tsx.snap
index 24bf77f74..b61e5dd1f 100644
--- a/src/components/internal-components/InternalReviewAccordion/__snapshots__/InternalReviewAccordion.test.tsx.snap
+++ b/src/components/internal-components/InternalReviewAccordion/__snapshots__/InternalReviewAccordion.test.tsx.snap
@@ -193,10 +193,18 @@ exports[`InternalReviewAccordion matches snapshot 1`] = `
   background: #222222;
 }
 
+.c4 > :first-child:hover .icon-container div {
+  border-color: #222222;
+}
+
 .c4 > :first-child:active .icon-container {
   background: #222222;
 }
 
+.c4 > :first-child:active .icon-container div {
+  border-color: #222222;
+}
+
 .c16 {
   width: 100%;
 }
diff --git a/src/components/internal-components/InternalShadowIconButton/InternalShadowIconButton.tsx b/src/components/internal-components/InternalShadowIconButton/InternalShadowIconButton.tsx
index ca48c6e9d..8c3f3b2d8 100644
--- a/src/components/internal-components/InternalShadowIconButton/InternalShadowIconButton.tsx
+++ b/src/components/internal-components/InternalShadowIconButton/InternalShadowIconButton.tsx
@@ -116,12 +116,12 @@ export const InternalShadowIconButton = <C extends ElementType = "button">(
     disabled,
     width = "max-content",
     maxWidth,
-    hoverIconColor,
     disabledTextColor,
     defaultIconColor,
     disabledIconColor,
     defaultTextColor,
     hoverTextColor,
+    hoverIconColor = defaultIconColor,
     className,
     $justifyContent,
     ...rest
@@ -201,7 +201,7 @@ export const InternalShadowIconButton = <C extends ElementType = "button">(
         element={element ?? "button"}
         {...rest}
         $hoverTextColor={hoverTextColor}
-        $hoverIconColor={hoverIconColor}
+        $hoverIconColor={hoverIconColor ?? defaultIconColor}
         $defaultTextColor={defaultTextColor}
         $disabledTextColor={disabledTextColor}
         $color={defaultTextColor}
diff --git a/src/components/internal-components/InternalShadowRectButton/InternalShadowRectButton.tsx b/src/components/internal-components/InternalShadowRectButton/InternalShadowRectButton.tsx
index dee9f365b..0ec5b677a 100644
--- a/src/components/internal-components/InternalShadowRectButton/InternalShadowRectButton.tsx
+++ b/src/components/internal-components/InternalShadowRectButton/InternalShadowRectButton.tsx
@@ -17,21 +17,13 @@ import {
   positionStyle,
 } from "@/styles/utils/positionStyle";
 import { parseColor } from "@/styles/helpers/parseColor";
-import {
-  OakAllSpacingToken,
-  OakUiRoleToken,
-  OakDropShadowToken,
-} from "@/styles";
+import { OakUiRoleToken, OakDropShadowToken } from "@/styles";
 import { SizeStyleProps, sizeStyle } from "@/styles/utils/sizeStyle";
 import { PolymorphicPropsWithoutRef } from "@/components/polymorphic";
 import { SpacingStyleProps } from "@/styles/utils/spacingStyle";
 import { FlexStyleProps } from "@/styles/utils/flexStyle";
 import { TypographyStyleProps } from "@/styles/utils/typographyStyle";
-
-type OakLoadingSpinnerTokenSubset = Extract<
-  OakAllSpacingToken,
-  "spacing-20" | "spacing-24"
->;
+import { OakLoadingSpinnerTokenSubset } from "@/styles/theme/spacing";
 
 export type InternalShadowRectButtonProps = Omit<
   InternalButtonProps,
@@ -46,26 +38,33 @@ export type InternalShadowRectButtonProps = Omit<
   | "$background"
   | "$color"
 > & {
+  /**
+   *  If set, the button will render an icon next to or instead of the text
+   */
   iconName?: OakIconName;
   iconAriaHidden?: boolean;
   /**
-   *  we can set a custom icon if we want different sizes and padding
+   *  Sets a custom icon if we want different sizes and padding
    */
   iconOverride?: React.ReactNode;
+  /**
+   *  Determines whether the icon is placed before or after the text
+   */
   isTrailingIcon?: boolean;
   /**
-   *  we can arrange the icon vertically or horizontally
+   *  Arranges the icon vertically or horizontally
    */
   iconLayout?: FlexStyleProps["$flexDirection"];
   /**
-   *  we can adjust the gap between the icon and the text
+   *  Adjusts the gap between the icon and the text
    */
   loadingSpinnerSize?: OakLoadingSpinnerTokenSubset;
   /**
-   * whether the button should show a selected state
+   * Whether the button should show a selected state
    */
   selected?: boolean;
   iconGap?: FlexStyleProps["$gap"];
+  iconSize?: SizeStyleProps["$width"];
   defaultTextColor: OakUiRoleToken;
   defaultBackground: OakUiRoleToken;
   defaultBorderColor: OakUiRoleToken;
@@ -169,7 +168,7 @@ export const StyledButtonWrapper = styled(OakBox)<
 /**
  *
  * A styled rectangular button, not intended to be used directly. 
- * Instead used by OakPrimaryButton and OakSecondaryButton.
+ * Used by OakButton
  * 
  * The following callbacks are available for tracking focus events:
  *
@@ -214,6 +213,7 @@ export const InternalShadowRectButton = <C extends ElementType = "button">(
     pl,
     pr,
     iconLayout = "row",
+    iconSize = "spacing-24",
     iconGap = "spacing-8",
     iconOverride,
     font = "heading-7",
@@ -228,8 +228,8 @@ export const InternalShadowRectButton = <C extends ElementType = "button">(
       {iconName && (
         <OakIcon
           iconName={iconName}
-          $width={"spacing-24"}
-          $height={"spacing-24"}
+          $width={iconSize}
+          $height={iconSize}
           $colorFilter={props.disabled ? disabledTextColor : defaultTextColor}
           aria-hidden={iconAriaHidden}
         />
diff --git a/src/components/internal-components/InternalShadowRoundButton/InternalShadowRoundButton.tsx b/src/components/internal-components/InternalShadowRoundButton/InternalShadowRoundButton.tsx
index 37e38d932..98759886c 100644
--- a/src/components/internal-components/InternalShadowRoundButton/InternalShadowRoundButton.tsx
+++ b/src/components/internal-components/InternalShadowRoundButton/InternalShadowRoundButton.tsx
@@ -1,7 +1,6 @@
 import React, { ElementType } from "react";
 import styled, { css } from "styled-components";
 
-import { OakRoundIconProps } from "@/components/images-and-icons/OakRoundIcon";
 import { parseColorFilter } from "@/styles/helpers/parseColorFilter";
 import { PolymorphicPropsWithoutRef } from "@/components/polymorphic";
 import { OakBox } from "@/components/layout-and-structure/OakBox";
@@ -18,9 +17,11 @@ import {
   PositionStyleProps,
   positionStyle,
 } from "@/styles/utils/positionStyle";
+import { FlexStyleProps } from "@/styles/utils/flexStyle";
 import { parseColor } from "@/styles/helpers/parseColor";
 import { OakUiRoleToken, OakDropShadowToken } from "@/styles";
 import { SizeStyleProps, sizeStyle } from "@/styles/utils/sizeStyle";
+import { OakLoadingSpinnerTokenSubset } from "@/styles/theme/spacing";
 
 export type InternalShadowRoundButtonProps = Omit<
   InternalButtonProps,
@@ -33,23 +34,26 @@ export type InternalShadowRoundButtonProps = Omit<
   | "$background"
   | "$color"
 > & {
-  iconName?: OakIconName;
-  isTrailingIcon?: boolean;
   defaultTextColor: OakUiRoleToken;
-  hoverTextColor: OakUiRoleToken;
-  disabledTextColor: OakUiRoleToken;
+  defaultIconColor?: OakUiRoleToken;
   defaultIconBackground: OakUiRoleToken;
-  hoverIconBackground: OakUiRoleToken;
+  defaultIconBorderColor?: OakUiRoleToken;
+  hoverTextColor: OakUiRoleToken;
   hoverIconColor?: OakUiRoleToken;
+  hoverIconBackground: OakUiRoleToken;
+  hoverIconBorderColor?: OakUiRoleToken;
+  disabledTextColor: OakUiRoleToken;
+  disabledIconColor?: OakUiRoleToken;
   disabledIconBackground: OakUiRoleToken;
-  defaultIconColor?: OakRoundIconProps["$colorFilter"];
-  disabledIconColor?: OakRoundIconProps["$colorFilter"];
-  defaultIconBorderColor?: OakUiRoleToken;
   disabledIconBorderColor?: OakUiRoleToken;
+  iconName?: OakIconName;
+  isTrailingIcon?: boolean;
   width?: SizeStyleProps["$width"];
   maxWidth?: SizeStyleProps["$maxWidth"];
   iconBackgroundSize: SizeStyleProps["$width"];
   iconSize: SizeStyleProps["$width"];
+  iconGap?: FlexStyleProps["$gap"];
+  loadingSpinnerSize?: OakLoadingSpinnerTokenSubset;
   hoverDropShadow?: OakDropShadowToken | null;
 } & PositionStyleProps;
 
@@ -80,9 +84,11 @@ const StyledInternalButton = styled(InternalButton)<
 `;
 
 const StyledButtonWrapper = styled(OakFlex)<{
-  $disabledIconBackground: OakUiRoleToken;
-  $hoverIconBackground: OakUiRoleToken;
   $defaultIconBackground: OakUiRoleToken;
+  $defaultIconBorderColor: OakUiRoleToken;
+  $hoverIconBackground: OakUiRoleToken;
+  $hoverIconBorderColor: OakUiRoleToken;
+  $disabledIconBackground: OakUiRoleToken;
   $hoverDropShadow: OakDropShadowToken | null;
 }>`
   ${(props) => css`
@@ -107,9 +113,15 @@ const StyledButtonWrapper = styled(OakFlex)<{
     > :first-child:hover .icon-container {
       background: ${parseColor(props.$hoverIconBackground)};
     }
+    > :first-child:hover .icon-container div {
+      border-color: ${parseColor(props.$hoverIconBorderColor)};
+    }
     > :first-child:active .icon-container {
       background: ${parseColor(props.$defaultIconBackground)};
     }
+    > :first-child:active .icon-container div {
+      border-color: ${parseColor(props.$defaultIconBorderColor)};
+    }
   `}
 `;
 
@@ -141,17 +153,20 @@ export const InternalShadowRoundButton = <C extends ElementType = "button">(
     maxWidth,
     iconBackgroundSize,
     iconSize,
-    disabledIconBackground,
-    hoverIconColor,
-    disabledTextColor,
+    iconGap = "spacing-12",
+    loadingSpinnerSize = iconSize,
+    defaultTextColor,
     defaultIconColor,
-    hoverIconBackground,
     defaultIconBackground,
     defaultIconBorderColor,
-    disabledIconBorderColor,
-    disabledIconColor,
-    defaultTextColor,
     hoverTextColor,
+    hoverIconColor,
+    hoverIconBackground,
+    hoverIconBorderColor = defaultIconBorderColor,
+    disabledTextColor,
+    disabledIconColor = "icon-inverted",
+    disabledIconBackground,
+    disabledIconBorderColor,
     hoverDropShadow = "drop-shadow-lemon",
     className,
     ...rest
@@ -173,8 +188,11 @@ export const InternalShadowRoundButton = <C extends ElementType = "button">(
     />
   );
   const loader = (
-    <OakBox $width={iconSize} $height={iconSize}>
-      <OakLoadingSpinner $width={iconSize} loaderColor="bg-primary" />
+    <OakBox $width={loadingSpinnerSize} $height={loadingSpinnerSize}>
+      <OakLoadingSpinner
+        $width={loadingSpinnerSize}
+        loaderColor={disabledIconColor}
+      />
     </OakBox>
   );
 
@@ -215,17 +233,19 @@ export const InternalShadowRoundButton = <C extends ElementType = "button">(
       $position={"relative"}
       $width={width}
       $maxWidth={maxWidth}
-      $disabledIconBackground={disabledIconBackground}
-      $hoverIconBackground={hoverIconBackground}
       $defaultIconBackground={defaultIconBackground}
+      $defaultIconBorderColor={defaultIconBorderColor ?? defaultIconBackground}
+      $hoverIconBackground={hoverIconBackground}
+      $hoverIconBorderColor={hoverIconBorderColor ?? hoverIconBackground}
+      $disabledIconBackground={disabledIconBackground}
       $hoverDropShadow={hoverDropShadow}
     >
       <StyledInternalButton
         element={element ?? "button"}
         {...rest}
+        $defaultTextColor={defaultTextColor}
         $hoverTextColor={hoverTextColor}
         $hoverIconColor={hoverIconColor}
-        $defaultTextColor={defaultTextColor}
         $disabledTextColor={disabledTextColor}
         $color={defaultTextColor}
         $position={"relative"}
@@ -234,7 +254,7 @@ export const InternalShadowRoundButton = <C extends ElementType = "button">(
         <OakFlex
           $flexDirection={"row"}
           $alignItems={"center"}
-          $gap={children ? "spacing-12" : "spacing-0"}
+          $gap={children ? iconGap : "spacing-0"}
           $justifyContent="center"
         >
           {!isTrailingIcon && iconLogic}
diff --git a/src/components/internal-components/InternalShadowRoundButton/__snapshots__/InternalShadowRoundButton.test.tsx.snap b/src/components/internal-components/InternalShadowRoundButton/__snapshots__/InternalShadowRoundButton.test.tsx.snap
index 19249b2ae..fda1e5590 100644
--- a/src/components/internal-components/InternalShadowRoundButton/__snapshots__/InternalShadowRoundButton.test.tsx.snap
+++ b/src/components/internal-components/InternalShadowRoundButton/__snapshots__/InternalShadowRoundButton.test.tsx.snap
@@ -156,10 +156,18 @@ exports[`InternalShadowRoundButton matches snapshot 1`] = `
   background: #bef2bd;
 }
 
+.c2 > :first-child:hover .icon-container div {
+  border-color: #bef2bd;
+}
+
 .c2 > :first-child:active .icon-container {
   background: #bef2bd;
 }
 
+.c2 > :first-child:active .icon-container div {
+  border-color: #bef2bd;
+}
+
 <div>
   <div
     class="c0 c1 c2"
diff --git a/src/components/internal-components/InternalUnstyledChevronAccordion/InternalUnstyledChevronAccordion.stories.tsx b/src/components/internal-components/InternalUnstyledChevronAccordion/InternalUnstyledChevronAccordion.stories.tsx
index 5d30b3192..896005325 100644
--- a/src/components/internal-components/InternalUnstyledChevronAccordion/InternalUnstyledChevronAccordion.stories.tsx
+++ b/src/components/internal-components/InternalUnstyledChevronAccordion/InternalUnstyledChevronAccordion.stories.tsx
@@ -85,13 +85,22 @@ export const InputAsHeader: Story = {
     header: (
       <OakBox $background={"bg-decorative6-subdued"} $textAlign={"left"}>
         <OakSmallSecondaryButtonWithDropdown primaryActionText="Click me">
-          <OakSmallSecondaryButtonWithDropdown.Item>
+          <OakSmallSecondaryButtonWithDropdown.Item
+            variant="primary"
+            colorScheme="inverted"
+          >
             Action 1
           </OakSmallSecondaryButtonWithDropdown.Item>
-          <OakSmallSecondaryButtonWithDropdown.Item>
+          <OakSmallSecondaryButtonWithDropdown.Item
+            variant="primary"
+            colorScheme="inverted"
+          >
             Action 2
           </OakSmallSecondaryButtonWithDropdown.Item>
-          <OakSmallSecondaryButtonWithDropdown.Item>
+          <OakSmallSecondaryButtonWithDropdown.Item
+            variant="primary"
+            colorScheme="inverted"
+          >
             Action 3
           </OakSmallSecondaryButtonWithDropdown.Item>
         </OakSmallSecondaryButtonWithDropdown>
diff --git a/src/components/layout-and-structure/OakCollapsibleContent/OakCollapsibleContent.stories.tsx b/src/components/layout-and-structure/OakCollapsibleContent/OakCollapsibleContent.stories.tsx
index b72148966..4ea098f36 100644
--- a/src/components/layout-and-structure/OakCollapsibleContent/OakCollapsibleContent.stories.tsx
+++ b/src/components/layout-and-structure/OakCollapsibleContent/OakCollapsibleContent.stories.tsx
@@ -3,7 +3,7 @@ import { Meta, StoryObj } from "@storybook/react";
 
 import { OakCollapsibleContent } from "./OakCollapsibleContent";
 
-import { OakTertiaryButton } from "@/components/buttons/OakTertiaryButton";
+import { OakButton } from "@/components/buttons/OakButton";
 import { OakP } from "@/components/typography/OakP";
 import { sizeArgTypes } from "@/storybook-helpers/sizeStyleHelpers";
 
@@ -63,7 +63,8 @@ export const WithControl: Story = {
     const [isOpen, setIsOpen] = useState(true);
     return (
       <>
-        <OakTertiaryButton
+        <OakButton
+          variant="tertiary"
           onClick={() => setIsOpen(!isOpen)}
           iconName={isOpen ? "chevron-up" : "chevron-down"}
           $mb="spacing-24"
@@ -71,7 +72,7 @@ export const WithControl: Story = {
           aria-controls="collapsible-content"
         >
           {isOpen ? "Close" : "Open"}
-        </OakTertiaryButton>
+        </OakButton>
         <OakCollapsibleContent
           id="collapsible-content"
           {...args}
diff --git a/src/components/messaging-and-feedback/OakInformativeModal/OakInformativeModal.stories.tsx b/src/components/messaging-and-feedback/OakInformativeModal/OakInformativeModal.stories.tsx
index 4041b257e..baa9bf98c 100644
--- a/src/components/messaging-and-feedback/OakInformativeModal/OakInformativeModal.stories.tsx
+++ b/src/components/messaging-and-feedback/OakInformativeModal/OakInformativeModal.stories.tsx
@@ -6,8 +6,7 @@ import { OakInformativeModal } from "./OakInformativeModal";
 import { OakInformativeModalFooter } from "./OakInformativeModalFooter";
 import { OakInformativeModalBody } from "./OakInformativeModalBody";
 
-import { OakSecondaryButton } from "@/components/buttons/OakSecondaryButton";
-import { OakPrimaryButton } from "@/components/buttons/OakPrimaryButton";
+import { OakButton } from "@/components/buttons/OakButton";
 import { OakBox } from "@/components/layout-and-structure/OakBox";
 import { OakP } from "@/components/typography/OakP";
 
@@ -64,7 +63,9 @@ const meta: Meta<typeof OakInformativeModal> = {
 
     return (
       <>
-        <OakSecondaryButton onClick={onOpen}>Open modal</OakSecondaryButton>
+        <OakButton variant="secondary" onClick={onOpen}>
+          Open modal
+        </OakButton>
         <OakInformativeModal {...args} onClose={onClose} />
       </>
     );
@@ -122,8 +123,12 @@ export const WithFooter: Story = {
     "aria-description": "A modal with footer",
     footerSlot: (
       <OakInformativeModalFooter>
-        <OakSecondaryButton width="100%">Secondary action</OakSecondaryButton>
-        <OakPrimaryButton width="100%">Primary action</OakPrimaryButton>
+        <OakButton variant="secondary" width="100%">
+          Secondary action
+        </OakButton>
+        <OakButton variant="primary" width="100%">
+          Primary action
+        </OakButton>
       </OakInformativeModalFooter>
     ),
   },
diff --git a/src/components/messaging-and-feedback/OakInformativeModal/OakInformativeModalFooter.stories.tsx b/src/components/messaging-and-feedback/OakInformativeModal/OakInformativeModalFooter.stories.tsx
index f009a84f4..f521ddde8 100644
--- a/src/components/messaging-and-feedback/OakInformativeModal/OakInformativeModalFooter.stories.tsx
+++ b/src/components/messaging-and-feedback/OakInformativeModal/OakInformativeModalFooter.stories.tsx
@@ -3,8 +3,7 @@ import React from "react";
 
 import { OakInformativeModalFooter } from "./OakInformativeModalFooter";
 
-import { OakSecondaryButton } from "@/components/buttons/OakSecondaryButton";
-import { OakPrimaryButton } from "@/components/buttons/OakPrimaryButton";
+import { OakButton } from "@/components/buttons/OakButton";
 
 const meta: Meta<typeof OakInformativeModalFooter> = {
   component: OakInformativeModalFooter,
@@ -18,8 +17,12 @@ const meta: Meta<typeof OakInformativeModalFooter> = {
   args: {
     children: (
       <>
-        <OakSecondaryButton width="100%">Secondary action</OakSecondaryButton>
-        <OakPrimaryButton width="100%">Primary action</OakPrimaryButton>
+        <OakButton variant="secondary" width="100%">
+          Secondary action
+        </OakButton>
+        <OakButton variant="primary" width="100%">
+          Primary action
+        </OakButton>
       </>
     ),
   },
diff --git a/src/components/messaging-and-feedback/OakInformativeModal/__snapshots__/OakInformativeModal.test.tsx.snap b/src/components/messaging-and-feedback/OakInformativeModal/__snapshots__/OakInformativeModal.test.tsx.snap
index b8fc407e8..15879841b 100644
--- a/src/components/messaging-and-feedback/OakInformativeModal/__snapshots__/OakInformativeModal.test.tsx.snap
+++ b/src/components/messaging-and-feedback/OakInformativeModal/__snapshots__/OakInformativeModal.test.tsx.snap
@@ -240,10 +240,18 @@ exports[`OakInformativeModal matches snapshot when mounted 1`] = `
   background: #f2f2f2;
 }
 
+.c10 > :first-child:hover .icon-container div {
+  border-color: #f2f2f2;
+}
+
 .c10 > :first-child:active .icon-container {
   background: transparent;
 }
 
+.c10 > :first-child:active .icon-container div {
+  border-color: transparent;
+}
+
 .c4 {
   max-width: 100vw;
   -webkit-transform: translateX(0);
diff --git a/src/components/messaging-and-feedback/OakInlineBanner/OakInlineBanner.stories.tsx b/src/components/messaging-and-feedback/OakInlineBanner/OakInlineBanner.stories.tsx
index 7e9f733cc..afd85ddf1 100644
--- a/src/components/messaging-and-feedback/OakInlineBanner/OakInlineBanner.stories.tsx
+++ b/src/components/messaging-and-feedback/OakInlineBanner/OakInlineBanner.stories.tsx
@@ -9,7 +9,7 @@ import {
 } from "@/components/messaging-and-feedback/OakInlineBanner";
 import { OakSecondaryLink } from "@/components/navigation/OakSecondaryLink";
 import { oakIconNames } from "@/components/images-and-icons/OakIcon";
-import { OakPrimaryButton } from "@/components/buttons/OakPrimaryButton";
+import { OakButton } from "@/components/buttons/OakButton";
 
 const meta: Meta<typeof OakInlineBanner> = {
   component: OakInlineBanner,
@@ -113,9 +113,9 @@ export const InfoLarge: Story = {
       informing them of a background process, feedback should be subtle and 
       contextual—reinforcing confidence without demanding unnecessary attention.`,
     cta: (
-      <OakPrimaryButton iconName="chevron-right" isTrailingIcon>
+      <OakButton variant="primary" iconName="chevron-right" isTrailingIcon>
         Button
-      </OakPrimaryButton>
+      </OakButton>
     ),
   },
 };
@@ -143,9 +143,9 @@ export const NeutralLarge: Story = {
       informing them of a background process, feedback should be subtle and 
       contextual—reinforcing confidence without demanding unnecessary attention.`,
     cta: (
-      <OakPrimaryButton iconName="chevron-right" isTrailingIcon>
+      <OakButton variant="primary" iconName="chevron-right" isTrailingIcon>
         Button
-      </OakPrimaryButton>
+      </OakButton>
     ),
   },
 };
@@ -173,9 +173,9 @@ export const SuccessLarge: Story = {
       informing them of a background process, feedback should be subtle and 
       contextual—reinforcing confidence without demanding unnecessary attention.`,
     cta: (
-      <OakPrimaryButton iconName="chevron-right" isTrailingIcon>
+      <OakButton variant="primary" iconName="chevron-right" isTrailingIcon>
         Button
-      </OakPrimaryButton>
+      </OakButton>
     ),
   },
 };
@@ -203,9 +203,9 @@ export const AlertLarge: Story = {
       informing them of a background process, feedback should be subtle and 
       contextual—reinforcing confidence without demanding unnecessary attention.`,
     cta: (
-      <OakPrimaryButton iconName="chevron-right" isTrailingIcon>
+      <OakButton variant="primary" iconName="chevron-right" isTrailingIcon>
         Button
-      </OakPrimaryButton>
+      </OakButton>
     ),
   },
 };
@@ -233,9 +233,9 @@ export const WarningLarge: Story = {
       informing them of a background process, feedback should be subtle and 
       contextual—reinforcing confidence without demanding unnecessary attention.`,
     cta: (
-      <OakPrimaryButton iconName="chevron-right" isTrailingIcon>
+      <OakButton variant="primary" iconName="chevron-right" isTrailingIcon>
         Button
-      </OakPrimaryButton>
+      </OakButton>
     ),
   },
 };
@@ -263,9 +263,9 @@ export const ErrorLarge: Story = {
       informing them of a background process, feedback should be subtle and 
       contextual—reinforcing confidence without demanding unnecessary attention.`,
     cta: (
-      <OakPrimaryButton iconName="chevron-right" isTrailingIcon>
+      <OakButton variant="primary" iconName="chevron-right" isTrailingIcon>
         Button
-      </OakPrimaryButton>
+      </OakButton>
     ),
   },
 };
@@ -308,9 +308,9 @@ export const OverriddenStylingLarge: Story = {
       informing them of a background process, feedback should be subtle and 
       contextual—reinforcing confidence without demanding unnecessary attention.`,
     cta: (
-      <OakPrimaryButton iconName="chevron-right" isTrailingIcon>
+      <OakButton variant="primary" iconName="chevron-right" isTrailingIcon>
         Button
-      </OakPrimaryButton>
+      </OakButton>
     ),
   },
 };
diff --git a/src/components/messaging-and-feedback/OakInlineBanner/__snapshots__/OakInlineBanner.test.tsx.snap b/src/components/messaging-and-feedback/OakInlineBanner/__snapshots__/OakInlineBanner.test.tsx.snap
index eeed47611..5bd7f1311 100644
--- a/src/components/messaging-and-feedback/OakInlineBanner/__snapshots__/OakInlineBanner.test.tsx.snap
+++ b/src/components/messaging-and-feedback/OakInlineBanner/__snapshots__/OakInlineBanner.test.tsx.snap
@@ -286,10 +286,18 @@ exports[`OakInlineBanner matches snapshot for banner with title 1`] = `
   background: #222222;
 }
 
+.c10 > :first-child:hover .icon-container div {
+  border-color: #222222;
+}
+
 .c10 > :first-child:active .icon-container {
   background: transparent;
 }
 
+.c10 > :first-child:active .icon-container div {
+  border-color: transparent;
+}
+
 .c21 {
   font-family: --var(google-font),Lexend,sans-serif;
   font-weight: 600;
@@ -758,10 +766,18 @@ exports[`OakInlineBanner matches snapshot for large variant banner 1`] = `
   background: #222222;
 }
 
+.c11 > :first-child:hover .icon-container div {
+  border-color: #222222;
+}
+
 .c11 > :first-child:active .icon-container {
   background: transparent;
 }
 
+.c11 > :first-child:active .icon-container div {
+  border-color: transparent;
+}
+
 .c22 {
   font-family: --var(google-font),Lexend,sans-serif;
   font-weight: 600;
@@ -1218,10 +1234,18 @@ exports[`OakInlineBanner matches snapshot for simple banner without title 1`] =
   background: #222222;
 }
 
+.c10 > :first-child:hover .icon-container div {
+  border-color: #222222;
+}
+
 .c10 > :first-child:active .icon-container {
   background: transparent;
 }
 
+.c10 > :first-child:active .icon-container div {
+  border-color: transparent;
+}
+
 .c22 {
   display: inline;
   -webkit-align-items: center;
diff --git a/src/components/messaging-and-feedback/OakModalCenter/OakModalCenter.stories.tsx b/src/components/messaging-and-feedback/OakModalCenter/OakModalCenter.stories.tsx
index fd919f439..e9a5dd87f 100644
--- a/src/components/messaging-and-feedback/OakModalCenter/OakModalCenter.stories.tsx
+++ b/src/components/messaging-and-feedback/OakModalCenter/OakModalCenter.stories.tsx
@@ -2,9 +2,7 @@ import { Meta, StoryObj } from "@storybook/react";
 import { useArgs } from "@storybook/preview-api";
 import React, { Fragment } from "react";
 
-import { OakSecondaryButton } from "@/components/buttons/OakSecondaryButton";
-import { OakPrimaryButton } from "@/components/buttons/OakPrimaryButton";
-import { OakPrimaryInvertedButton } from "@/components/buttons/OakPrimaryInvertedButton";
+import { OakButton } from "@/components/buttons/OakButton";
 import {
   OakModalCenter,
   OakModalCenterBody,
@@ -77,12 +75,14 @@ const meta: Meta<typeof OakModalCenter> = {
         $flexDirection="column"
         $rowGap="spacing-24"
       >
-        <OakPrimaryButton $font="heading-7">
-          I understand, continue
-        </OakPrimaryButton>
-        <OakPrimaryInvertedButton iconName="arrow-left" $font="heading-7">
+        <OakButton variant="primary">I understand, continue</OakButton>
+        <OakButton
+          variant="primary"
+          colorScheme="inverted"
+          iconName="arrow-left"
+        >
           Take me home
-        </OakPrimaryInvertedButton>
+        </OakButton>
       </OakFlex>
     ),
   },
@@ -93,7 +93,9 @@ const meta: Meta<typeof OakModalCenter> = {
 
     return (
       <>
-        <OakSecondaryButton onClick={onOpen}>Open modal</OakSecondaryButton>
+        <OakButton variant="secondary" onClick={onOpen}>
+          Open modal
+        </OakButton>
         <OakModalCenter {...args} onClose={onClose} />
       </>
     );
diff --git a/src/components/messaging-and-feedback/OakModalCenter/__snapshots__/OakModalCenter.test.tsx.snap b/src/components/messaging-and-feedback/OakModalCenter/__snapshots__/OakModalCenter.test.tsx.snap
index e6f0923fc..4fe378ed3 100644
--- a/src/components/messaging-and-feedback/OakModalCenter/__snapshots__/OakModalCenter.test.tsx.snap
+++ b/src/components/messaging-and-feedback/OakModalCenter/__snapshots__/OakModalCenter.test.tsx.snap
@@ -227,10 +227,18 @@ exports[`OakModalCenter matches snapshot 1`] = `
   background: #222222;
 }
 
+.c13 > :first-child:hover .icon-container div {
+  border-color: #222222;
+}
+
 .c13 > :first-child:active .icon-container {
   background: transparent;
 }
 
+.c13 > :first-child:active .icon-container div {
+  border-color: transparent;
+}
+
 .c6 {
   width: 100%;
   font-family: --var(google-font),Lexend,sans-serif;
diff --git a/src/components/messaging-and-feedback/OakToast/OakToast.stories.tsx b/src/components/messaging-and-feedback/OakToast/OakToast.stories.tsx
index 40009bce8..69b3b7a7d 100644
--- a/src/components/messaging-and-feedback/OakToast/OakToast.stories.tsx
+++ b/src/components/messaging-and-feedback/OakToast/OakToast.stories.tsx
@@ -4,7 +4,7 @@ import { useArgs } from "@storybook/preview-api";
 
 import { OakToast } from "./OakToast";
 
-import { OakPrimaryButton } from "@/components/buttons/OakPrimaryButton";
+import { OakButton } from "@/components/buttons/OakButton";
 import { OakFlex } from "@/components/layout-and-structure/OakFlex";
 
 const meta: Meta<typeof OakToast> = {
@@ -90,7 +90,9 @@ export const ExtendibleAutoDismiss: Story = {
     };
     return (
       <OakFlex $flexDirection="column" $gap="spacing-20">
-        <OakPrimaryButton onClick={replaceToast}>Update toast</OakPrimaryButton>
+        <OakButton variant="primary" onClick={replaceToast}>
+          Update toast
+        </OakButton>
         <OakToast {...args} />
       </OakFlex>
     );
diff --git a/src/components/messaging-and-feedback/OakTooltip/OakTooltip.stories.tsx b/src/components/messaging-and-feedback/OakTooltip/OakTooltip.stories.tsx
index e011e6149..576d11a98 100644
--- a/src/components/messaging-and-feedback/OakTooltip/OakTooltip.stories.tsx
+++ b/src/components/messaging-and-feedback/OakTooltip/OakTooltip.stories.tsx
@@ -3,7 +3,7 @@ import { Meta, StoryObj } from "@storybook/react";
 
 import { OakTooltip } from "./OakTooltip";
 
-import { OakTertiaryButton } from "@/components/buttons/OakTertiaryButton";
+import { OakButton } from "@/components/buttons/OakButton";
 import { OakBox } from "@/components/layout-and-structure/OakBox";
 
 const meta: Meta<typeof OakTooltip> = {
@@ -33,7 +33,7 @@ const meta: Meta<typeof OakTooltip> = {
     isOpen: true,
     tooltip: "Hello there",
     tooltipPosition: "bottom-left",
-    children: <OakTertiaryButton>Target</OakTertiaryButton>,
+    children: <OakButton variant="tertiary">Target</OakButton>,
   },
 };
 export default meta;
diff --git a/src/components/owa/OakCodeRenderer/__snapshots__/OakCodeRenderer.test.tsx.snap b/src/components/owa/OakCodeRenderer/__snapshots__/OakCodeRenderer.test.tsx.snap
index df183b44b..4b2fde8df 100644
--- a/src/components/owa/OakCodeRenderer/__snapshots__/OakCodeRenderer.test.tsx.snap
+++ b/src/components/owa/OakCodeRenderer/__snapshots__/OakCodeRenderer.test.tsx.snap
@@ -307,10 +307,18 @@ exports[`OakCodeRenderer matches snapshot 1`] = `
   background: #ffe555;
 }
 
+.c22 > :first-child:hover .icon-container div {
+  border-color: #ffe555;
+}
+
 .c22 > :first-child:active .icon-container {
   background: #ffe555;
 }
 
+.c22 > :first-child:active .icon-container div {
+  border-color: #ffe555;
+}
+
 .c23:hover .shadow {
   box-shadow: none !important;
 }
diff --git a/src/components/owa/OakCopyLinkButton/OakCopyLinkButton.tsx b/src/components/owa/OakCopyLinkButton/OakCopyLinkButton.tsx
index 254d8dc7f..f75829c0c 100644
--- a/src/components/owa/OakCopyLinkButton/OakCopyLinkButton.tsx
+++ b/src/components/owa/OakCopyLinkButton/OakCopyLinkButton.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 
-import { OakSmallSecondaryButton } from "@/components/buttons/OakSmallSecondaryButton";
+import { OakButton } from "@/components/buttons/OakButton";
 import { OakBox } from "@/components/layout-and-structure/OakBox";
 
 type OakCopyLinkButtonProps = {
@@ -45,7 +45,9 @@ export const OakCopyLinkButton = ({ href }: OakCopyLinkButtonProps) => {
   return (
     <>
       <OakBox $display={["none", "block"]}>
-        <OakSmallSecondaryButton
+        <OakButton
+          variant="secondary"
+          size="sm"
           iconName={active ? "copy" : "tick"}
           iconAriaHidden={true}
           isTrailingIcon
@@ -53,12 +55,12 @@ export const OakCopyLinkButton = ({ href }: OakCopyLinkButtonProps) => {
           data-testid={"copy-link-desktop-button"}
         >
           {label}
-        </OakSmallSecondaryButton>
+        </OakButton>
       </OakBox>
       <OakBox $display={["block", "none"]}>
-        <OakSmallSecondaryButton onClick={copyLink}>
+        <OakButton variant="secondary" size="sm" onClick={copyLink}>
           {label}
-        </OakSmallSecondaryButton>
+        </OakButton>
       </OakBox>
       {/* Live region for aria-live announcements */}
       {announce && (
diff --git a/src/components/owa/OakCopyLinkButton/__snapshots__/OakCopyLinkButton.test.tsx.snap b/src/components/owa/OakCopyLinkButton/__snapshots__/OakCopyLinkButton.test.tsx.snap
index 037a1c7b2..c01b5c4b3 100644
--- a/src/components/owa/OakCopyLinkButton/__snapshots__/OakCopyLinkButton.test.tsx.snap
+++ b/src/components/owa/OakCopyLinkButton/__snapshots__/OakCopyLinkButton.test.tsx.snap
@@ -30,10 +30,10 @@ exports[`OakCopyLinkButton matches snapshot 1`] = `
 
 .c9 {
   position: relative;
-  width: 1.5rem;
-  min-width: 1.5rem;
-  height: 1.5rem;
-  min-height: 1.5rem;
+  width: 1.25rem;
+  min-width: 1.25rem;
+  height: 1.25rem;
+  min-height: 1.25rem;
   font-family: --var(google-font),Lexend,sans-serif;
 }
 
@@ -114,8 +114,8 @@ exports[`OakCopyLinkButton matches snapshot 1`] = `
 }
 
 .c5:hover {
-  -webkit-text-decoration: none;
-  text-decoration: none;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
   color: #222222;
   background: #f2f2f2;
   border-color: #222222;
diff --git a/src/components/owa/OakDownloadsJourneyChildSubjectTierSelector/OakDownloadsJourneyChildSubjectTierSelector.tsx b/src/components/owa/OakDownloadsJourneyChildSubjectTierSelector/OakDownloadsJourneyChildSubjectTierSelector.tsx
index 885c6c25c..79bbbf857 100644
--- a/src/components/owa/OakDownloadsJourneyChildSubjectTierSelector/OakDownloadsJourneyChildSubjectTierSelector.tsx
+++ b/src/components/owa/OakDownloadsJourneyChildSubjectTierSelector/OakDownloadsJourneyChildSubjectTierSelector.tsx
@@ -3,7 +3,7 @@ import styled, { css } from "styled-components";
 
 import { OakFlex } from "@/components/layout-and-structure/OakFlex";
 import { OakInlineBanner } from "@/components/messaging-and-feedback/OakInlineBanner";
-import { OakPrimaryButton } from "@/components/buttons/OakPrimaryButton";
+import { OakButton } from "@/components/buttons/OakButton";
 import { OakRadioButton } from "@/components/form-elements/OakRadioButton";
 import { OakRadioGroup } from "@/components/form-elements/OakRadioGroup";
 
@@ -109,13 +109,14 @@ const UnstyledComponent = (
           ))}
         </OakRadioGroup>
       )}
-      <OakPrimaryButton
+      <OakButton
+        variant="primary"
         iconName="arrow-right"
         isTrailingIcon={true}
         onClick={handleNextClick}
       >
         Next
-      </OakPrimaryButton>
+      </OakButton>
     </OakFlex>
   );
 };
diff --git a/src/components/owa/OakFilterDrawer/OakFilterDrawer.stories.tsx b/src/components/owa/OakFilterDrawer/OakFilterDrawer.stories.tsx
index e044e7f79..fbcf53226 100644
--- a/src/components/owa/OakFilterDrawer/OakFilterDrawer.stories.tsx
+++ b/src/components/owa/OakFilterDrawer/OakFilterDrawer.stories.tsx
@@ -5,13 +5,12 @@ import styled from "styled-components";
 
 import { OakFilterDrawer } from "./OakFilterDrawer";
 
-import { OakSecondaryButton } from "@/components/buttons/OakSecondaryButton";
 import { OakBox } from "@/components/layout-and-structure/OakBox";
 import { OakFlex } from "@/components/layout-and-structure/OakFlex";
 import { OakHeading } from "@/components/typography/OakHeading";
 import { OakSearchFilterCheckBox } from "@/components/form-elements";
 import { OakRadioGroup } from "@/components/form-elements/OakRadioGroup";
-import { OakPrimaryButton } from "@/components/buttons/OakPrimaryButton";
+import { OakButton } from "@/components/buttons/OakButton";
 import { OakRadioButton } from "@/components/form-elements/OakRadioButton";
 
 const StyledFieldset = styled.fieldset`
@@ -40,16 +39,16 @@ const meta: Meta<typeof OakFilterDrawer> = {
 
     return (
       <>
-        <OakSecondaryButton onClick={onOpen}>
+        <OakButton variant="secondary" onClick={onOpen}>
           Open filter drawer
-        </OakSecondaryButton>
+        </OakButton>
         <OakFilterDrawer
           {...args}
           onClose={onClose}
           footerSlot={
-            <OakPrimaryButton onClick={onClose}>
+            <OakButton variant="primary" onClick={onClose}>
               Show results (23)
-            </OakPrimaryButton>
+            </OakButton>
           }
         >
           <>
diff --git a/src/components/owa/OakFilterDrawer/__snapshots__/OakFilterDrawer.test.tsx.snap b/src/components/owa/OakFilterDrawer/__snapshots__/OakFilterDrawer.test.tsx.snap
index 5bc3a4df1..623f6c4be 100644
--- a/src/components/owa/OakFilterDrawer/__snapshots__/OakFilterDrawer.test.tsx.snap
+++ b/src/components/owa/OakFilterDrawer/__snapshots__/OakFilterDrawer.test.tsx.snap
@@ -263,10 +263,18 @@ exports[`OakFilterDrawer matches snapshot when mounted 1`] = `
   background: #222222;
 }
 
+.c12 > :first-child:hover .icon-container div {
+  border-color: #222222;
+}
+
 .c12 > :first-child:active .icon-container {
   background: transparent;
 }
 
+.c12 > :first-child:active .icon-container div {
+  border-color: transparent;
+}
+
 .c9 {
   font-family: --var(google-font),Lexend,sans-serif;
   font-weight: 600;
diff --git a/src/components/owa/OakInfo/__snapshots__/OakInfo.test.tsx.snap b/src/components/owa/OakInfo/__snapshots__/OakInfo.test.tsx.snap
index 36d826b29..8a3bbfcb0 100644
--- a/src/components/owa/OakInfo/__snapshots__/OakInfo.test.tsx.snap
+++ b/src/components/owa/OakInfo/__snapshots__/OakInfo.test.tsx.snap
@@ -163,10 +163,18 @@ exports[`OakInfo matches snapshot 1`] = `
   background: #ffe555;
 }
 
+.c3 > :first-child:hover .icon-container div {
+  border-color: #ffe555;
+}
+
 .c3 > :first-child:active .icon-container {
   background: #ffe555;
 }
 
+.c3 > :first-child:active .icon-container div {
+  border-color: #ffe555;
+}
+
 .c4:hover .shadow {
   box-shadow: none !important;
 }
diff --git a/src/components/owa/OakInfoButton/__snapshots__/OakInfoButton.test.tsx.snap b/src/components/owa/OakInfoButton/__snapshots__/OakInfoButton.test.tsx.snap
index ddec4e524..0810eb4b8 100644
--- a/src/components/owa/OakInfoButton/__snapshots__/OakInfoButton.test.tsx.snap
+++ b/src/components/owa/OakInfoButton/__snapshots__/OakInfoButton.test.tsx.snap
@@ -158,10 +158,18 @@ exports[`OakInfoButton matches snapshot 1`] = `
   background: #ffe555;
 }
 
+.c2 > :first-child:hover .icon-container div {
+  border-color: #ffe555;
+}
+
 .c2 > :first-child:active .icon-container {
   background: #ffe555;
 }
 
+.c2 > :first-child:active .icon-container div {
+  border-color: #ffe555;
+}
+
 .c3:hover .shadow {
   box-shadow: none !important;
 }
diff --git a/src/components/owa/OakLessonInfoCard/OakLessonInfoCard.stories.tsx b/src/components/owa/OakLessonInfoCard/OakLessonInfoCard.stories.tsx
index 3df011ff3..ab08ad20d 100644
--- a/src/components/owa/OakLessonInfoCard/OakLessonInfoCard.stories.tsx
+++ b/src/components/owa/OakLessonInfoCard/OakLessonInfoCard.stories.tsx
@@ -10,7 +10,7 @@ import {
 
 import { OakFlex } from "@/components/layout-and-structure/OakFlex";
 import { OakP } from "@/components/typography/OakP";
-import { OakPrimaryInvertedButton } from "@/components/buttons/OakPrimaryInvertedButton";
+import { OakButton } from "@/components/buttons/OakButton";
 
 const meta: Meta<typeof OakLessonInfoCard> = {
   component: OakLessonInfoCard,
@@ -84,14 +84,16 @@ export const Worksheet: Story = (args: OakInfoCardProps) => (
     </OakCardHeader>
     Optional
     <OakFlex $justifyContent={"flex-end"}>
-      <OakPrimaryInvertedButton
+      <OakButton
+        variant="primary"
+        colorScheme="inverted"
         onClick={() => {}}
         iconName="download"
         isTrailingIcon
         $font={"heading-7"}
       >
         Download worksheet
-      </OakPrimaryInvertedButton>
+      </OakButton>
     </OakFlex>
   </OakLessonInfoCard>
 );
diff --git a/src/components/owa/OakLinkCard/OakLinkCard.stories.tsx b/src/components/owa/OakLinkCard/OakLinkCard.stories.tsx
index 6403b3f50..4fbcf133c 100644
--- a/src/components/owa/OakLinkCard/OakLinkCard.stories.tsx
+++ b/src/components/owa/OakLinkCard/OakLinkCard.stories.tsx
@@ -1,7 +1,7 @@
 import { Meta, StoryObj } from "@storybook/react";
 import React from "react";
 
-import { OakTertiaryButton } from "@/components/buttons/OakTertiaryButton";
+import { OakButton } from "@/components/buttons/OakButton";
 import { OakLinkCard } from "@/components/owa/OakLinkCard";
 import { OakFlex } from "@/components/layout-and-structure/OakFlex";
 import { OakHeading } from "@/components/typography/OakHeading";
@@ -66,9 +66,9 @@ const meta: Meta<typeof OakLinkCard> = {
           A series of lessons offering practical knowledge and skills, developed
           independently of the national curriculum.
         </OakP>
-        <OakTertiaryButton iconName="chevron-right" isTrailingIcon>
+        <OakButton variant="tertiary" iconName="chevron-right" isTrailingIcon>
           Go to new finance lessons
-        </OakTertiaryButton>
+        </OakButton>
       </OakFlex>
     ),
     iconName: "subject-financial-education",
@@ -112,9 +112,9 @@ export const WithLongText: Story = {
           financial literacy program. Learn how to budget, save, and invest your
           money. Get started today!
         </OakP>
-        <OakTertiaryButton iconName="chevron-right" isTrailingIcon>
+        <OakButton variant="tertiary" iconName="chevron-right" isTrailingIcon>
           Start learning
-        </OakTertiaryButton>
+        </OakButton>
       </OakFlex>
     ),
     iconName: "books",
@@ -136,9 +136,9 @@ export const WithAnimation: Story = {
           bg-primary. It eases in an out for a delightful user experience.
           Discover more subtle ways to call attention to components.
         </OakP>
-        <OakTertiaryButton iconName="chevron-right" isTrailingIcon>
+        <OakButton variant="tertiary" iconName="chevron-right" isTrailingIcon>
           Find out more
-        </OakTertiaryButton>
+        </OakButton>
       </OakFlex>
     ),
     iconName: "question-mark",
diff --git a/src/components/owa/OakSignLanguageButton/OakSignLanguageButton.tsx b/src/components/owa/OakSignLanguageButton/OakSignLanguageButton.tsx
index 8ae7ecb52..fc85b0f37 100644
--- a/src/components/owa/OakSignLanguageButton/OakSignLanguageButton.tsx
+++ b/src/components/owa/OakSignLanguageButton/OakSignLanguageButton.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 
-import { OakSmallSecondaryButton } from "@/components/buttons/OakSmallSecondaryButton";
+import { OakButton } from "@/components/buttons/OakButton";
 import { OakBox } from "@/components/layout-and-structure/OakBox";
 
 type OakSignLanguageButtonProps = {
@@ -25,19 +25,21 @@ export const OakSignLanguageButton = ({
   return (
     <>
       <OakBox $display={["none", "block"]}>
-        <OakSmallSecondaryButton
+        <OakButton
+          variant="secondary"
+          size="sm"
           iconName="sign-language"
           isTrailingIcon
           onClick={handleClick}
           data-testid={"sign-language-desktop-button"}
         >
           {showSignLanguage ? "Hide sign language" : "Show sign language"}
-        </OakSmallSecondaryButton>
+        </OakButton>
       </OakBox>
       <OakBox $display={["block", "none"]}>
-        <OakSmallSecondaryButton onClick={handleClick}>
+        <OakButton variant="secondary" size="sm" onClick={handleClick}>
           {showSignLanguage ? "Hide sign language" : "Show sign language"}
-        </OakSmallSecondaryButton>
+        </OakButton>
       </OakBox>
     </>
   );
diff --git a/src/components/owa/OakSignLanguageButton/__snapshots__/OakSignLanguageButton.test.tsx.snap b/src/components/owa/OakSignLanguageButton/__snapshots__/OakSignLanguageButton.test.tsx.snap
index e4d64927e..41619a8da 100644
--- a/src/components/owa/OakSignLanguageButton/__snapshots__/OakSignLanguageButton.test.tsx.snap
+++ b/src/components/owa/OakSignLanguageButton/__snapshots__/OakSignLanguageButton.test.tsx.snap
@@ -30,10 +30,10 @@ exports[`OakSignLanguageButton matches snapshot 1`] = `
 
 .c9 {
   position: relative;
-  width: 1.5rem;
-  min-width: 1.5rem;
-  height: 1.5rem;
-  min-height: 1.5rem;
+  width: 1.25rem;
+  min-width: 1.25rem;
+  height: 1.25rem;
+  min-height: 1.25rem;
   font-family: --var(google-font),Lexend,sans-serif;
 }
 
@@ -114,8 +114,8 @@ exports[`OakSignLanguageButton matches snapshot 1`] = `
 }
 
 .c5:hover {
-  -webkit-text-decoration: none;
-  text-decoration: none;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
   color: #222222;
   background: #f2f2f2;
   border-color: #222222;
diff --git a/src/components/owa/OakVideoTranscript/OakVideoTranscript.tsx b/src/components/owa/OakVideoTranscript/OakVideoTranscript.tsx
index e6b28c08a..b6ead98d2 100644
--- a/src/components/owa/OakVideoTranscript/OakVideoTranscript.tsx
+++ b/src/components/owa/OakVideoTranscript/OakVideoTranscript.tsx
@@ -3,7 +3,7 @@ import React, { ReactNode, useState } from "react";
 import { OakBox } from "@/components/layout-and-structure/OakBox";
 import { OakFlex } from "@/components/layout-and-structure/OakFlex";
 import { OakCollapsibleContent } from "@/components/layout-and-structure/OakCollapsibleContent";
-import { OakSmallSecondaryButton } from "@/components/buttons/OakSmallSecondaryButton";
+import { OakButton } from "@/components/buttons/OakButton";
 
 type OakVideoTranscriptProps = {
   /**
@@ -60,7 +60,9 @@ export const OakVideoTranscript = ({
 
         {children && (
           <OakBox $display={["none", "block"]}>
-            <OakSmallSecondaryButton
+            <OakButton
+              variant="secondary"
+              size="sm"
               onClick={handleClick}
               iconName={showTranscript ? "chevron-up" : "chevron-down"}
               isTrailingIcon
@@ -68,20 +70,22 @@ export const OakVideoTranscript = ({
               aria-expanded={showTranscript}
             >
               {label}
-            </OakSmallSecondaryButton>
+            </OakButton>
           </OakBox>
         )}
 
         {/* mobile */}
         {children && (
           <OakBox $display={["block", "none"]}>
-            <OakSmallSecondaryButton
+            <OakButton
+              variant="secondary"
+              size="sm"
               onClick={handleClick}
               aria-controls={id}
               aria-expanded={showTranscript}
             >
               {label}
-            </OakSmallSecondaryButton>
+            </OakButton>
           </OakBox>
         )}
         {copyLinkControl && <OakBox>{copyLinkControl}</OakBox>}
diff --git a/src/components/owa/OakVideoTranscript/__snapshots__/OakVideoTranscript.test.tsx.snap b/src/components/owa/OakVideoTranscript/__snapshots__/OakVideoTranscript.test.tsx.snap
index 2d00afd05..29a1adfd6 100644
--- a/src/components/owa/OakVideoTranscript/__snapshots__/OakVideoTranscript.test.tsx.snap
+++ b/src/components/owa/OakVideoTranscript/__snapshots__/OakVideoTranscript.test.tsx.snap
@@ -30,10 +30,10 @@ exports[`OakVideoTranscript matches snapshot 1`] = `
 
 .c10 {
   position: relative;
-  width: 1.5rem;
-  min-width: 1.5rem;
-  height: 1.5rem;
-  min-height: 1.5rem;
+  width: 1.25rem;
+  min-width: 1.25rem;
+  height: 1.25rem;
+  min-height: 1.25rem;
   font-family: --var(google-font),Lexend,sans-serif;
 }
 
@@ -186,8 +186,8 @@ exports[`OakVideoTranscript matches snapshot 1`] = `
 }
 
 .c7:hover {
-  -webkit-text-decoration: none;
-  text-decoration: none;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
   color: #222222;
   background: #f2f2f2;
   border-color: #222222;
diff --git a/src/components/owa/pupil/browse/OakPupilJourneyContentGuidance/OakPupilJourneyContentGuidance.stories.tsx b/src/components/owa/pupil/browse/OakPupilJourneyContentGuidance/OakPupilJourneyContentGuidance.stories.tsx
index c6be3536e..e22c3cce1 100644
--- a/src/components/owa/pupil/browse/OakPupilJourneyContentGuidance/OakPupilJourneyContentGuidance.stories.tsx
+++ b/src/components/owa/pupil/browse/OakPupilJourneyContentGuidance/OakPupilJourneyContentGuidance.stories.tsx
@@ -4,7 +4,7 @@ import { useArgs } from "@storybook/preview-api";
 
 import { OakPupilJourneyContentGuidance } from "./OakPupilJourneyContentGuidance";
 
-import { OakSecondaryButton } from "@/components/buttons/OakSecondaryButton";
+import { OakButton } from "@/components/buttons/OakButton";
 
 const meta: Meta<typeof OakPupilJourneyContentGuidance> = {
   tags: ["autodocs"],
@@ -43,7 +43,9 @@ export const Default: Story = {
 
     return (
       <>
-        <OakSecondaryButton onClick={onOpen}>Open modal</OakSecondaryButton>
+        <OakButton variant="secondary" onClick={onOpen}>
+          Open modal
+        </OakButton>
         <OakPupilJourneyContentGuidance
           {...args}
           onAccept={onClose}
diff --git a/src/components/owa/pupil/browse/OakPupilJourneyContentGuidance/OakPupilJourneyContentGuidance.tsx b/src/components/owa/pupil/browse/OakPupilJourneyContentGuidance/OakPupilJourneyContentGuidance.tsx
index 24a6ba3d6..a4583b9be 100644
--- a/src/components/owa/pupil/browse/OakPupilJourneyContentGuidance/OakPupilJourneyContentGuidance.tsx
+++ b/src/components/owa/pupil/browse/OakPupilJourneyContentGuidance/OakPupilJourneyContentGuidance.tsx
@@ -4,8 +4,7 @@ import {
   OakModalCenter,
   OakModalCenterBody,
 } from "@/components/messaging-and-feedback/OakModalCenter";
-import { OakPrimaryButton } from "@/components/buttons/OakPrimaryButton";
-import { OakPrimaryInvertedButton } from "@/components/buttons/OakPrimaryInvertedButton";
+import { OakButton } from "@/components/buttons/OakButton";
 import { OakFlex } from "@/components/layout-and-structure/OakFlex";
 import { OakHeading } from "@/components/typography/OakHeading";
 import { OakIconName } from "@/components/images-and-icons/OakIcon";
@@ -104,21 +103,24 @@ export const OakPupilJourneyContentGuidance = ({
           $pv="spacing-24"
           $rowGap="spacing-24"
         >
-          <OakPrimaryButton
+          <OakButton
+            variant="primary"
             $font="heading-7"
             onClick={onAccept}
             data-testid="acceptButton"
           >
             {acceptText}
-          </OakPrimaryButton>
-          <OakPrimaryInvertedButton
+          </OakButton>
+          <OakButton
+            variant="primary"
+            colorScheme="inverted"
             $font="heading-7"
             iconName={declineIcon}
             onClick={onDecline}
             data-testid="declineButton"
           >
             {declineText}
-          </OakPrimaryInvertedButton>
+          </OakButton>
         </OakFlex>
       }
       hideCloseButton
diff --git a/src/components/owa/pupil/browse/OakPupilJourneyLayout/OakPupilJourneyLayout.stories.tsx b/src/components/owa/pupil/browse/OakPupilJourneyLayout/OakPupilJourneyLayout.stories.tsx
index 5047fa8c7..456a661d4 100644
--- a/src/components/owa/pupil/browse/OakPupilJourneyLayout/OakPupilJourneyLayout.stories.tsx
+++ b/src/components/owa/pupil/browse/OakPupilJourneyLayout/OakPupilJourneyLayout.stories.tsx
@@ -4,7 +4,7 @@ import { Meta, StoryObj } from "@storybook/react";
 import { OakPupilJourneyLayout } from "./OakPupilJourneyLayout";
 
 import { OakBox } from "@/components/layout-and-structure/OakBox";
-import { OakTertiaryButton } from "@/components/buttons/OakTertiaryButton";
+import { OakButton } from "@/components/buttons/OakButton";
 
 const meta: Meta<typeof OakPupilJourneyLayout> = {
   component: OakPupilJourneyLayout,
@@ -52,9 +52,14 @@ export const Default: Story = {
     <OakPupilJourneyLayout
       {...args}
       topNavSlot={
-        <OakTertiaryButton iconName="arrow-left" href={"#"} element="a">
+        <OakButton
+          variant="tertiary"
+          iconName="arrow-left"
+          href={"#"}
+          element="a"
+        >
           View all units
-        </OakTertiaryButton>
+        </OakButton>
       }
       sectionName={sectionName}
     >
diff --git a/src/components/owa/pupil/browse/OakPupilJourneyUnitsFilter/OakPupilJourneyUnitsFilter.tsx b/src/components/owa/pupil/browse/OakPupilJourneyUnitsFilter/OakPupilJourneyUnitsFilter.tsx
index 513941361..fe2b4aa37 100644
--- a/src/components/owa/pupil/browse/OakPupilJourneyUnitsFilter/OakPupilJourneyUnitsFilter.tsx
+++ b/src/components/owa/pupil/browse/OakPupilJourneyUnitsFilter/OakPupilJourneyUnitsFilter.tsx
@@ -3,12 +3,12 @@ import styled from "styled-components";
 
 import { OakButtonAsRadioGroup } from "@/components/form-elements/OakButtonAsRadioGroup";
 import { OakSecondaryButtonAsRadio } from "@/components/form-elements/OakSecondaryButtonAsRadio";
-import { OakSecondaryButton } from "@/components/buttons/OakSecondaryButton";
+import { OakButton } from "@/components/buttons/OakButton";
 import { OakOutlineAccordion } from "@/components/owa/OakOutlineAccordion";
 import { OakHeading } from "@/components/typography/OakHeading";
 import { OakFlex } from "@/components/layout-and-structure/OakFlex";
 
-const StyledOakSecondaryButton = styled(OakSecondaryButton)`
+const StyledOakSecondaryButton = styled(OakButton)`
   & > button {
     opacity: 0;
     position: absolute;
@@ -98,7 +98,10 @@ export const OakPupilJourneyUnitsFilter = (
         $alignItems={"end"}
       >
         {menuItems.length > 3 && (
-          <StyledOakSecondaryButton onClick={onSkipCallback}>
+          <StyledOakSecondaryButton
+            onClick={onSkipCallback}
+            variant="secondary"
+          >
             Skip to results
           </StyledOakSecondaryButton>
         )}
diff --git a/src/components/owa/pupil/lesson/OakLessonBottomNav/OakLessonBottomNav.stories.tsx b/src/components/owa/pupil/lesson/OakLessonBottomNav/OakLessonBottomNav.stories.tsx
index 91ecc1eb4..a17a65f8f 100644
--- a/src/components/owa/pupil/lesson/OakLessonBottomNav/OakLessonBottomNav.stories.tsx
+++ b/src/components/owa/pupil/lesson/OakLessonBottomNav/OakLessonBottomNav.stories.tsx
@@ -4,7 +4,7 @@ import { Meta, StoryObj } from "@storybook/react";
 import { OakLessonBottomNav } from "./OakLessonBottomNav";
 
 import { OakFlex } from "@/components/layout-and-structure/OakFlex";
-import { OakPrimaryButton } from "@/components/buttons/OakPrimaryButton";
+import { OakButton } from "@/components/buttons/OakButton";
 import { OakCodeRenderer } from "@/components/owa/OakCodeRenderer";
 
 const meta: Meta<typeof OakLessonBottomNav> = {
@@ -49,13 +49,14 @@ export const Default: Story = {
 export const WithButton: Story = {
   render: (args) => (
     <OakLessonBottomNav {...args}>
-      <OakPrimaryButton
+      <OakButton
+        variant="primary"
         iconName="arrow-right"
         isTrailingIcon
         width={["100%", "auto"]}
       >
         Next question
-      </OakPrimaryButton>
+      </OakButton>
     </OakLessonBottomNav>
   ),
 };
@@ -63,13 +64,14 @@ export const WithButton: Story = {
 export const WithHintAndButton: Story = {
   render: (args) => (
     <OakLessonBottomNav {...args}>
-      <OakPrimaryButton
+      <OakButton
+        variant="primary"
         iconName="arrow-right"
         isTrailingIcon
         width={["100%", "auto"]}
       >
         Continue
-      </OakPrimaryButton>
+      </OakButton>
     </OakLessonBottomNav>
   ),
   args: {
@@ -81,31 +83,34 @@ export const WithFeedbackAndButton: Story = {
   render: (args) => (
     <>
       <OakLessonBottomNav {...args} feedback="correct">
-        <OakPrimaryButton
+        <OakButton
+          variant="primary"
           iconName="arrow-right"
           isTrailingIcon
           width={["100%", "max-content"]}
         >
           Next question
-        </OakPrimaryButton>
+        </OakButton>
       </OakLessonBottomNav>
       <OakLessonBottomNav {...args} feedback="incorrect">
-        <OakPrimaryButton
+        <OakButton
+          variant="primary"
           iconName="arrow-right"
           isTrailingIcon
           width={["100%", "max-content"]}
         >
           Next question
-        </OakPrimaryButton>
+        </OakButton>
       </OakLessonBottomNav>
       <OakLessonBottomNav {...args} feedback="partially-correct">
-        <OakPrimaryButton
+        <OakButton
+          variant="primary"
           iconName="arrow-right"
           isTrailingIcon
           width={["100%", "max-content"]}
         >
           Next question
-        </OakPrimaryButton>
+        </OakButton>
       </OakLessonBottomNav>
     </>
   ),
@@ -117,13 +122,14 @@ export const WithFeedbackAndButton: Story = {
 export const WithLongFeedbackAndButton: Story = {
   render: (args) => (
     <OakLessonBottomNav {...args}>
-      <OakPrimaryButton
+      <OakButton
+        variant="primary"
         iconName="arrow-right"
         isTrailingIcon
         width={["100%", "max-content"]}
       >
         Next question
-      </OakPrimaryButton>
+      </OakButton>
     </OakLessonBottomNav>
   ),
   args: {
@@ -136,13 +142,14 @@ export const WithLongFeedbackAndButton: Story = {
 export const WithNoAnswerFeedbackAndButton: Story = {
   render: (args) => (
     <OakLessonBottomNav {...args}>
-      <OakPrimaryButton
+      <OakButton
+        variant="primary"
         iconName="arrow-right"
         isTrailingIcon
         width={["100%", "max-content"]}
       >
         Next question
-      </OakPrimaryButton>
+      </OakButton>
     </OakLessonBottomNav>
   ),
   args: {
@@ -153,13 +160,14 @@ export const WithNoAnswerFeedbackAndButton: Story = {
 export const FeedbackWithCode: Story = {
   render: (args) => (
     <OakLessonBottomNav {...args}>
-      <OakPrimaryButton
+      <OakButton
+        variant="primary"
         iconName="arrow-right"
         isTrailingIcon
         width={["100%", "max-content"]}
       >
         Next question
-      </OakPrimaryButton>
+      </OakButton>
     </OakLessonBottomNav>
   ),
   args: {
diff --git a/src/components/owa/pupil/lesson/OakLessonBottomNav/__snapshots__/OakLessonBottomNav.test.tsx.snap b/src/components/owa/pupil/lesson/OakLessonBottomNav/__snapshots__/OakLessonBottomNav.test.tsx.snap
index 7e3e062bf..163ab57f0 100644
--- a/src/components/owa/pupil/lesson/OakLessonBottomNav/__snapshots__/OakLessonBottomNav.test.tsx.snap
+++ b/src/components/owa/pupil/lesson/OakLessonBottomNav/__snapshots__/OakLessonBottomNav.test.tsx.snap
@@ -304,10 +304,18 @@ exports[`OakLessonBottomNav matches snapshot 1`] = `
   background: #ffe555;
 }
 
+.c8 > :first-child:hover .icon-container div {
+  border-color: #ffe555;
+}
+
 .c8 > :first-child:active .icon-container {
   background: #ffe555;
 }
 
+.c8 > :first-child:active .icon-container div {
+  border-color: #ffe555;
+}
+
 .c9:hover .shadow {
   box-shadow: none !important;
 }
diff --git a/src/components/owa/pupil/lesson/OakLessonLayout/OakLessonLayout.stories.tsx b/src/components/owa/pupil/lesson/OakLessonLayout/OakLessonLayout.stories.tsx
index 0487cf22d..9535c6628 100644
--- a/src/components/owa/pupil/lesson/OakLessonLayout/OakLessonLayout.stories.tsx
+++ b/src/components/owa/pupil/lesson/OakLessonLayout/OakLessonLayout.stories.tsx
@@ -7,7 +7,7 @@ import {
   lessonSectionNames,
 } from "./OakLessonLayout";
 
-import { OakPrimaryButton } from "@/components/buttons/OakPrimaryButton";
+import { OakButton } from "@/components/buttons/OakButton";
 import { OakBackLink } from "@/components/owa/OakBackLink";
 import { OakBox } from "@/components/layout-and-structure/OakBox";
 import { OakLessonTopNav } from "@/components/owa/pupil/lesson/OakLessonTopNav";
@@ -91,7 +91,9 @@ export const Default: Story = {
       }
       bottomNavSlot={
         <OakLessonBottomNav>
-          <OakPrimaryButton width={["100%", "auto"]}>Button</OakPrimaryButton>
+          <OakButton variant="primary" width={["100%", "auto"]}>
+            Button
+          </OakButton>
         </OakLessonBottomNav>
       }
     >
diff --git a/src/components/owa/pupil/lesson/OakLessonVideoTranscript/OakLessonVideoTranscript.stories.tsx b/src/components/owa/pupil/lesson/OakLessonVideoTranscript/OakLessonVideoTranscript.stories.tsx
index 7371ea096..0415df2d3 100644
--- a/src/components/owa/pupil/lesson/OakLessonVideoTranscript/OakLessonVideoTranscript.stories.tsx
+++ b/src/components/owa/pupil/lesson/OakLessonVideoTranscript/OakLessonVideoTranscript.stories.tsx
@@ -4,7 +4,7 @@ import { Meta, StoryObj } from "@storybook/react";
 import { OakLessonVideoTranscript } from "./OakLessonVideoTranscript";
 
 import { OakP } from "@/components/typography/OakP";
-import { OakTertiaryButton } from "@/components/buttons/OakTertiaryButton";
+import { OakButton } from "@/components/buttons/OakButton";
 
 const meta: Meta<typeof OakLessonVideoTranscript> = {
   component: OakLessonVideoTranscript,
@@ -133,9 +133,9 @@ export const WithSignLanguageControl: Story = {
   render: (args) => <OakLessonVideoTranscript {...args} />,
   args: {
     signLanguageControl: (
-      <OakTertiaryButton iconName="sign-language" isTrailingIcon>
+      <OakButton variant="tertiary" iconName="sign-language" isTrailingIcon>
         Show sign language
-      </OakTertiaryButton>
+      </OakButton>
     ),
   },
 };
@@ -145,9 +145,9 @@ export const WithNoTranscript: Story = {
   args: {
     children: null,
     signLanguageControl: (
-      <OakTertiaryButton iconName="sign-language" isTrailingIcon>
+      <OakButton variant="tertiary" iconName="sign-language" isTrailingIcon>
         Show sign language
-      </OakTertiaryButton>
+      </OakButton>
     ),
   },
 };
diff --git a/src/components/owa/pupil/lesson/OakLessonVideoTranscript/OakLessonVideoTranscript.tsx b/src/components/owa/pupil/lesson/OakLessonVideoTranscript/OakLessonVideoTranscript.tsx
index f0fe43403..e60ff86ef 100644
--- a/src/components/owa/pupil/lesson/OakLessonVideoTranscript/OakLessonVideoTranscript.tsx
+++ b/src/components/owa/pupil/lesson/OakLessonVideoTranscript/OakLessonVideoTranscript.tsx
@@ -3,7 +3,7 @@ import React, { ReactNode, useState } from "react";
 import { OakFlex } from "@/components/layout-and-structure/OakFlex";
 import { OakBox } from "@/components/layout-and-structure/OakBox";
 import { OakCollapsibleContent } from "@/components/layout-and-structure/OakCollapsibleContent";
-import { OakTertiaryButton } from "@/components/buttons/OakTertiaryButton";
+import { OakButton } from "@/components/buttons/OakButton";
 
 type OakLessonVideoTranscriptProps = {
   /**
@@ -47,7 +47,8 @@ export const OakLessonVideoTranscript = ({
       >
         <OakBox>
           {children && (
-            <OakTertiaryButton
+            <OakButton
+              variant="tertiary"
               onClick={handleClick}
               iconName={showTranscript ? "chevron-up" : "chevron-down"}
               isTrailingIcon
@@ -56,7 +57,7 @@ export const OakLessonVideoTranscript = ({
               $mb="spacing-24"
             >
               {showTranscript ? "Hide transcript" : "Show transcript"}
-            </OakTertiaryButton>
+            </OakButton>
           )}
         </OakBox>
         {signLanguageControl && (
diff --git a/src/components/owa/pupil/lesson/OakLessonVideoTranscript/__snapshots__/OakLessonVideoTranscript.test.tsx.snap b/src/components/owa/pupil/lesson/OakLessonVideoTranscript/__snapshots__/OakLessonVideoTranscript.test.tsx.snap
index 65b1a2b52..f956e9a4c 100644
--- a/src/components/owa/pupil/lesson/OakLessonVideoTranscript/__snapshots__/OakLessonVideoTranscript.test.tsx.snap
+++ b/src/components/owa/pupil/lesson/OakLessonVideoTranscript/__snapshots__/OakLessonVideoTranscript.test.tsx.snap
@@ -29,6 +29,8 @@ exports[`OakLessonVideoTranscript matches snapshot 1`] = `
   top: 0rem;
   width: 100%;
   height: 100%;
+  border: 0.125rem solid;
+  border-color: #222222;
   border-radius: 6.25rem;
   font-family: --var(google-font),Lexend,sans-serif;
 }
@@ -112,7 +114,7 @@ exports[`OakLessonVideoTranscript matches snapshot 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  gap: 0.75rem;
+  gap: 0.5rem;
 }
 
 .c10 {
@@ -222,10 +224,18 @@ exports[`OakLessonVideoTranscript matches snapshot 1`] = `
   background: #575757;
 }
 
+.c4 > :first-child:hover .icon-container div {
+  border-color: #575757;
+}
+
 .c4 > :first-child:active .icon-container {
   background: #222222;
 }
 
+.c4 > :first-child:active .icon-container div {
+  border-color: #222222;
+}
+
 @media (min-width:750px) {
   .c1 {
     -webkit-flex-direction: row;
@@ -248,6 +258,9 @@ exports[`OakLessonVideoTranscript matches snapshot 1`] = `
           aria-controls="transcript-element"
           aria-expanded="false"
           class="c5 c6"
+          font="heading-7"
+          ph="spacing-16"
+          pv="spacing-12"
         >
           <div
             class="c0 c7"
diff --git a/src/components/owa/pupil/quiz/OakHintButton/__snapshots__/OakHintButton.test.tsx.snap b/src/components/owa/pupil/quiz/OakHintButton/__snapshots__/OakHintButton.test.tsx.snap
index aaff61cb9..63c6e7a7d 100644
--- a/src/components/owa/pupil/quiz/OakHintButton/__snapshots__/OakHintButton.test.tsx.snap
+++ b/src/components/owa/pupil/quiz/OakHintButton/__snapshots__/OakHintButton.test.tsx.snap
@@ -156,10 +156,18 @@ exports[`OakHintButton matches snapshot 1`] = `
   background: #ffe555;
 }
 
+.c2 > :first-child:hover .icon-container div {
+  border-color: #ffe555;
+}
+
 .c2 > :first-child:active .icon-container {
   background: #ffe555;
 }
 
+.c2 > :first-child:active .icon-container div {
+  border-color: #ffe555;
+}
+
 .c3:hover .shadow {
   box-shadow: none !important;
 }
diff --git a/src/components/owa/pupil/quiz/OakQuizHint/__snapshots__/OakQuizHint.test.tsx.snap b/src/components/owa/pupil/quiz/OakQuizHint/__snapshots__/OakQuizHint.test.tsx.snap
index d2a3d93cb..f37888256 100644
--- a/src/components/owa/pupil/quiz/OakQuizHint/__snapshots__/OakQuizHint.test.tsx.snap
+++ b/src/components/owa/pupil/quiz/OakQuizHint/__snapshots__/OakQuizHint.test.tsx.snap
@@ -161,10 +161,18 @@ exports[`OakQuizHint matches snapshot 1`] = `
   background: #ffe555;
 }
 
+.c3 > :first-child:hover .icon-container div {
+  border-color: #ffe555;
+}
+
 .c3 > :first-child:active .icon-container {
   background: #ffe555;
 }
 
+.c3 > :first-child:active .icon-container div {
+  border-color: #ffe555;
+}
+
 .c4:hover .shadow {
   box-shadow: none !important;
 }
diff --git a/src/components/owa/teacher/OakInlineRegistrationBanner/OakInlineRegistrationBanner.tsx b/src/components/owa/teacher/OakInlineRegistrationBanner/OakInlineRegistrationBanner.tsx
index edff6c4ba..637603f68 100644
--- a/src/components/owa/teacher/OakInlineRegistrationBanner/OakInlineRegistrationBanner.tsx
+++ b/src/components/owa/teacher/OakInlineRegistrationBanner/OakInlineRegistrationBanner.tsx
@@ -7,7 +7,7 @@ import { OakBox } from "@/components/layout-and-structure/OakBox";
 import { OakP } from "@/components/typography/OakP";
 import { OakFieldError } from "@/components/form-elements/OakFieldError";
 import { OakJauntyAngleLabel } from "@/components/form-elements/OakJauntyAngleLabel";
-import { OakPrimaryButton } from "@/components/buttons/OakPrimaryButton";
+import { OakButton } from "@/components/buttons/OakButton";
 import { OakTextInput } from "@/components/form-elements/OakTextInput";
 import { ColorStyleProps } from "@/styles/utils/colorStyle";
 import { BorderStyleProps } from "@/styles/utils/borderStyle";
@@ -96,9 +96,9 @@ export const OakInlineRegistrationBanner = (
                   wrapperWidth="100%"
                 />
               </OakBox>
-              <OakPrimaryButton innerWidth="max-content">
+              <OakButton variant="primary" innerWidth="max-content">
                 Sign up
-              </OakPrimaryButton>
+              </OakButton>
             </OakFlex>
             {success && (
               <OakP $font="body-1-bold" $mt="spacing-16">
diff --git a/src/components/owa/teacher/OakTeacherNotesModal/OakTeacherNotesModal.stories.tsx b/src/components/owa/teacher/OakTeacherNotesModal/OakTeacherNotesModal.stories.tsx
index 2966749e1..b2327aab8 100644
--- a/src/components/owa/teacher/OakTeacherNotesModal/OakTeacherNotesModal.stories.tsx
+++ b/src/components/owa/teacher/OakTeacherNotesModal/OakTeacherNotesModal.stories.tsx
@@ -7,7 +7,7 @@ import StarterKit from "@tiptap/starter-kit";
 
 import { OakTeacherNotesModal } from "./OakTeacherNotesModal";
 
-import { OakSecondaryButton } from "@/components/buttons/OakSecondaryButton";
+import { OakButton } from "@/components/buttons/OakButton";
 import { OakIcon } from "@/components/images-and-icons/OakIcon";
 import { OakFlex } from "@/components/layout-and-structure/OakFlex";
 import { OakSpan } from "@/components/typography/OakSpan";
@@ -124,7 +124,9 @@ export const Default: Story = {
 
     return (
       <>
-        <OakSecondaryButton onClick={onOpen}>Open modal</OakSecondaryButton>
+        <OakButton variant="secondary" onClick={onOpen}>
+          Open modal
+        </OakButton>
         <OakTeacherNotesModal
           {...args}
           onClose={onClose}
@@ -169,7 +171,9 @@ export const WithTipTap: Story = {
 
     return (
       <>
-        <OakSecondaryButton onClick={onOpen}>Open modal</OakSecondaryButton>
+        <OakButton variant="secondary" onClick={onOpen}>
+          Open modal
+        </OakButton>
         <OakTeacherNotesModal
           {...args}
           onClose={onClose}
diff --git a/src/components/owa/teacher/OakTeacherNotesModal/OakTeacherNotesModal.tsx b/src/components/owa/teacher/OakTeacherNotesModal/OakTeacherNotesModal.tsx
index 47686ed96..596f5b3f9 100644
--- a/src/components/owa/teacher/OakTeacherNotesModal/OakTeacherNotesModal.tsx
+++ b/src/components/owa/teacher/OakTeacherNotesModal/OakTeacherNotesModal.tsx
@@ -3,7 +3,7 @@ import React from "react";
 import { OakInlineBanner } from "@/components/messaging-and-feedback/OakInlineBanner";
 import { OakLink } from "@/components/navigation/OakLink";
 import { OakModalCenter } from "@/components/messaging-and-feedback/OakModalCenter";
-import { OakSmallPrimaryButton } from "@/components/buttons/OakSmallPrimaryButton";
+import { OakButton } from "@/components/buttons/OakButton";
 import { OakFlex } from "@/components/layout-and-structure/OakFlex";
 import { OakGrid } from "@/components/layout-and-structure/OakGrid";
 import { OakGridArea } from "@/components/layout-and-structure/OakGridArea";
@@ -171,14 +171,16 @@ export const OakTeacherNotesModal = ({
                   {footer}
                 </OakFlex>
               )}
-              <OakSmallPrimaryButton
+              <OakButton
+                variant="primary"
+                size="sm"
                 onClick={onShareClicked}
                 iconName="copy"
                 isTrailingIcon
                 disabled={shareLinkDisabled}
               >
                 Share link
-              </OakSmallPrimaryButton>
+              </OakButton>
             </OakFlex>
           </OakGridArea>
         </OakGrid>
diff --git a/src/components/owa/teacher/OakTeacherNotesModal/__snapshots__/OakTeacherNotesModal.test.tsx.snap b/src/components/owa/teacher/OakTeacherNotesModal/__snapshots__/OakTeacherNotesModal.test.tsx.snap
index feeddd6c0..eaee81e0a 100644
--- a/src/components/owa/teacher/OakTeacherNotesModal/__snapshots__/OakTeacherNotesModal.test.tsx.snap
+++ b/src/components/owa/teacher/OakTeacherNotesModal/__snapshots__/OakTeacherNotesModal.test.tsx.snap
@@ -150,10 +150,10 @@ exports[`OakTeacherNotesModal matches snapshot 1`] = `
 
 .c51 {
   position: relative;
-  width: 1.5rem;
-  min-width: 1.5rem;
-  height: 1.5rem;
-  min-height: 1.5rem;
+  width: 1.25rem;
+  min-width: 1.25rem;
+  height: 1.25rem;
+  min-height: 1.25rem;
   font-family: --var(google-font),Lexend,sans-serif;
 }
 
@@ -569,10 +569,18 @@ exports[`OakTeacherNotesModal matches snapshot 1`] = `
   background: #222222;
 }
 
+.c13 > :first-child:hover .icon-container div {
+  border-color: #222222;
+}
+
 .c13 > :first-child:active .icon-container {
   background: transparent;
 }
 
+.c13 > :first-child:active .icon-container div {
+  border-color: transparent;
+}
+
 .c26 {
   font-family: --var(google-font),Lexend,sans-serif;
   font-weight: 700;
@@ -687,8 +695,8 @@ exports[`OakTeacherNotesModal matches snapshot 1`] = `
 }
 
 .c50:hover {
-  -webkit-text-decoration: none;
-  text-decoration: none;
+  -webkit-text-decoration: underline;
+  text-decoration: underline;
   color: #ffffff;
   background: #575757;
   border-color: #575757;
diff --git a/src/components/owa/teacher/OakUnitsContainer/__snapshots__/OakUnitsContainer.test.tsx.snap b/src/components/owa/teacher/OakUnitsContainer/__snapshots__/OakUnitsContainer.test.tsx.snap
index d9c8beb0d..83a81c671 100644
--- a/src/components/owa/teacher/OakUnitsContainer/__snapshots__/OakUnitsContainer.test.tsx.snap
+++ b/src/components/owa/teacher/OakUnitsContainer/__snapshots__/OakUnitsContainer.test.tsx.snap
@@ -64,6 +64,8 @@ exports[`OakUnitsContainer matches snapshot 1`] = `
   top: 0rem;
   width: 100%;
   height: 100%;
+  border: 0.125rem solid;
+  border-color: #222222;
   border-radius: 6.25rem;
   font-family: --var(google-font),Lexend,sans-serif;
 }
@@ -168,7 +170,7 @@ exports[`OakUnitsContainer matches snapshot 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  gap: 0.75rem;
+  gap: 0.5rem;
 }
 
 .c7 {
@@ -291,10 +293,18 @@ exports[`OakUnitsContainer matches snapshot 1`] = `
   background: #575757;
 }
 
+.c18 > :first-child:hover .icon-container div {
+  border-color: #575757;
+}
+
 .c18 > :first-child:active .icon-container {
   background: #222222;
 }
 
+.c18 > :first-child:active .icon-container div {
+  border-color: #222222;
+}
+
 .c4 {
   width: 100%;
 }
@@ -462,7 +472,10 @@ exports[`OakUnitsContainer matches snapshot 1`] = `
       >
         <a
           class="c19 c20"
+          font="heading-7"
           href="https://www.thenational.academy"
+          ph="spacing-16"
+          pv="spacing-12"
         >
           <div
             class="c2 c21"
diff --git a/src/components/owa/teacher/OakUnitsHeader/OakUnitsHeader.tsx b/src/components/owa/teacher/OakUnitsHeader/OakUnitsHeader.tsx
index cc1dc7b2f..f39ba7878 100644
--- a/src/components/owa/teacher/OakUnitsHeader/OakUnitsHeader.tsx
+++ b/src/components/owa/teacher/OakUnitsHeader/OakUnitsHeader.tsx
@@ -5,7 +5,7 @@ import { OakFlex } from "@/components/layout-and-structure/OakFlex";
 import { OakHeading } from "@/components/typography/OakHeading";
 import { OakTypography } from "@/components/typography/OakTypography";
 import { OakPromoTag } from "@/components/owa/OakPromoTag";
-import { OakTertiaryButton } from "@/components/buttons/OakTertiaryButton";
+import { OakButton } from "@/components/buttons/OakButton";
 import { SizeStyleProps, sizeStyle } from "@/styles/utils/sizeStyle";
 
 export type OakUnitsHeaderProps = {
@@ -26,7 +26,8 @@ const CurriculumDownloadButton = (
   props: Omit<OakUnitsHeaderProps, "subject">,
 ) => {
   return props.curriculumHref ? (
-    <OakTertiaryButton
+    <OakButton
+      variant="tertiary"
       element="a"
       iconName="chevron-right"
       href={props.curriculumHref}
@@ -36,7 +37,7 @@ const CurriculumDownloadButton = (
       {props.isLegacy
         ? "Curriculum download"
         : `Full ${props.phase.toLowerCase()} curriculum`}
-    </OakTertiaryButton>
+    </OakButton>
   ) : null;
 };
 
diff --git a/src/components/owa/teacher/OakUnitsHeader/__snapshots__/OakUnitsHeader.test.tsx.snap b/src/components/owa/teacher/OakUnitsHeader/__snapshots__/OakUnitsHeader.test.tsx.snap
index c7c37893b..9d2f3bbb0 100644
--- a/src/components/owa/teacher/OakUnitsHeader/__snapshots__/OakUnitsHeader.test.tsx.snap
+++ b/src/components/owa/teacher/OakUnitsHeader/__snapshots__/OakUnitsHeader.test.tsx.snap
@@ -57,6 +57,8 @@ exports[`OakUnitsHeader matches snapshot 1`] = `
   top: 0rem;
   width: 100%;
   height: 100%;
+  border: 0.125rem solid;
+  border-color: #222222;
   border-radius: 6.25rem;
   font-family: --var(google-font),Lexend,sans-serif;
 }
@@ -146,7 +148,7 @@ exports[`OakUnitsHeader matches snapshot 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  gap: 0.75rem;
+  gap: 0.5rem;
 }
 
 .c4 {
@@ -269,10 +271,18 @@ exports[`OakUnitsHeader matches snapshot 1`] = `
   background: #575757;
 }
 
+.c15 > :first-child:hover .icon-container div {
+  border-color: #575757;
+}
+
 .c15 > :first-child:active .icon-container {
   background: #222222;
 }
 
+.c15 > :first-child:active .icon-container div {
+  border-color: #222222;
+}
+
 @media (min-width:750px) {
   .c5 {
     width: 3rem;
@@ -413,7 +423,10 @@ exports[`OakUnitsHeader matches snapshot 1`] = `
     >
       <a
         class="c16 c17"
+        font="heading-7"
         href="https://www.thenational.academy"
+        ph="spacing-16"
+        pv="spacing-12"
       >
         <div
           class="c0 c18"
@@ -508,6 +521,8 @@ exports[`OakUnitsHeader matches snapshot with banner 1`] = `
   top: 0rem;
   width: 100%;
   height: 100%;
+  border: 0.125rem solid;
+  border-color: #222222;
   border-radius: 6.25rem;
   font-family: --var(google-font),Lexend,sans-serif;
 }
@@ -643,7 +658,7 @@ exports[`OakUnitsHeader matches snapshot with banner 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
-  gap: 0.75rem;
+  gap: 0.5rem;
 }
 
 .c26 {
@@ -827,10 +842,18 @@ exports[`OakUnitsHeader matches snapshot with banner 1`] = `
   background: #575757;
 }
 
+.c15 > :first-child:hover .icon-container div {
+  border-color: #575757;
+}
+
 .c15 > :first-child:active .icon-container {
   background: #222222;
 }
 
+.c15 > :first-child:active .icon-container div {
+  border-color: #222222;
+}
+
 @media (min-width:750px) {
   .c5 {
     width: 3rem;
@@ -971,7 +994,10 @@ exports[`OakUnitsHeader matches snapshot with banner 1`] = `
     >
       <a
         class="c16 c17"
+        font="heading-7"
         href="https://www.thenational.academy"
+        ph="spacing-16"
+        pv="spacing-12"
       >
         <div
           class="c0 c18"
diff --git a/src/components/presentational/OakCarousel/SubCarouselPositionControl.test.tsx b/src/components/presentational/OakCarousel/SubCarouselPositionControl.test.tsx
index f7fb81c88..959050cc6 100644
--- a/src/components/presentational/OakCarousel/SubCarouselPositionControl.test.tsx
+++ b/src/components/presentational/OakCarousel/SubCarouselPositionControl.test.tsx
@@ -25,12 +25,8 @@ jest.mock("@/components/layout-and-structure/OakFlex", () => ({
   OakFlex: ({ children }: FlexProps): ReactElement => <div>{children}</div>,
 }));
 
-jest.mock("@/components/buttons/OakTertiaryInvertedButton", () => ({
-  OakTertiaryInvertedButton: ({
-    onClick,
-    iconName,
-    disabled,
-  }: ButtonProps): ReactElement => (
+jest.mock("@/components/buttons/OakButton", () => ({
+  OakButton: ({ onClick, iconName, disabled }: ButtonProps): ReactElement => (
     <button
       onClick={onClick}
       disabled={disabled}
diff --git a/src/components/presentational/OakCarousel/SubCarouselPositionControl.tsx b/src/components/presentational/OakCarousel/SubCarouselPositionControl.tsx
index 29351aaeb..ba080498b 100644
--- a/src/components/presentational/OakCarousel/SubCarouselPositionControl.tsx
+++ b/src/components/presentational/OakCarousel/SubCarouselPositionControl.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 
 import { OakFlex } from "@/components/layout-and-structure/OakFlex";
-import { OakTertiaryInvertedButton } from "@/components/buttons/OakTertiaryInvertedButton";
+import { OakButton } from "@/components/buttons/OakButton";
 
 export type SubCarouselPositionControlProps = {
   onBack: () => void;
@@ -22,13 +22,17 @@ export const SubCarouselPositionControl = ({
 }: SubCarouselPositionControlProps) => {
   return (
     <OakFlex $gap={"spacing-24"}>
-      <OakTertiaryInvertedButton
+      <OakButton
+        variant="tertiary"
+        colorScheme="inverted"
         onClick={onBack}
         iconName="chevron-left"
         disabled={disableBack}
         aria-label={backLabel}
       />
-      <OakTertiaryInvertedButton
+      <OakButton
+        variant="tertiary"
+        colorScheme="inverted"
         onClick={onFwd}
         iconName="chevron-right"
         disabled={disableFwd}
diff --git a/src/docs/designingComponents.mdx b/src/docs/designingComponents.mdx
index 430607177..1d029ae2d 100644
--- a/src/docs/designingComponents.mdx
+++ b/src/docs/designingComponents.mdx
@@ -37,7 +37,7 @@ When component becomes deprecated:
 
 #### Storybook
 
-- Make sure the `title` attribute in the storybook file is correct, this will ensure to keep files in the right subfolder within storybook, ie. `title: "components/Buttons/OakPrimaryButton"`
+- Make sure the `title` attribute in the storybook file is correct, this will ensure to keep files in the right subfolder within storybook, ie. `title: "components/Buttons/OakButton"`
 - Make sure your storybook file exposes relevant props with correct control for each prop (`argTypes` should use the same type as actual prop)
 
 ## What is the $ for ?
diff --git a/src/docs/reusableCode.mdx b/src/docs/reusableCode.mdx
index 3d3d167e0..28b08d380 100644
--- a/src/docs/reusableCode.mdx
+++ b/src/docs/reusableCode.mdx
@@ -32,7 +32,7 @@ When you want to use the majority of the existing component but with a few chang
 ### Pure composition
 
 - Simply return the existing component perhaps with some props fixed at certain values or with some extra functionality added in the body of the component.
-- An example of this is `OakPrimaryButton` which is a specialised version of InternalShadowRectButton
+- An example of this is `OakButton` which is a specialised version of InternalShadowRectButton
 - This works when you only need to add additional functionality.
 
 ### Quasi-inheritance
diff --git a/src/styles/theme/color.ts b/src/styles/theme/color.ts
index 9a629e906..31fc26d98 100644
--- a/src/styles/theme/color.ts
+++ b/src/styles/theme/color.ts
@@ -202,3 +202,20 @@ export type UiRoleMap = Record<
   OakUiRoleToken,
   OakColorToken | null | undefined
 >;
+
+const oakColorSchemeTokens = [
+  "primary",
+  "inverted",
+  "transparent",
+  "decorative1",
+  "decorative2",
+  "decorative3",
+  "decorative4",
+  "decorative5",
+  "decorative6",
+  "success",
+  "error",
+  "warning",
+  "neutral",
+];
+export type OakColorSchemeToken = (typeof oakColorSchemeTokens)[number];
diff --git a/src/styles/theme/spacing.ts b/src/styles/theme/spacing.ts
index a25805e0c..dda9e7879 100644
--- a/src/styles/theme/spacing.ts
+++ b/src/styles/theme/spacing.ts
@@ -88,3 +88,12 @@ export type OakCombinedSpacingToken =
   | OakInnerPaddingToken
   | OakSpaceBetweenToken
   | AdditionalSpacingTypes;
+
+export const oakSizeTokens = ["xs", "sm", "md", "lg", "xl"];
+
+export type OakSizeToken = (typeof oakSizeTokens)[number];
+
+export type OakLoadingSpinnerTokenSubset = Extract<
+  OakAllSpacingToken,
+  "spacing-20" | "spacing-24"
+>;