diff --git a/packages/ds-react-core/src/ui/Button/Button.tsx b/packages/ds-react-core/src/ui/Button/Button.tsx
index 2165cc87..f496a59c 100644
--- a/packages/ds-react-core/src/ui/Button/Button.tsx
+++ b/packages/ds-react-core/src/ui/Button/Button.tsx
@@ -1,34 +1,6 @@
-import type React from "react";
-
+import type Props from "./types.js";
 import "./styles.css";
 
-// TODO: this is how appearance could work as enum
-//
-// export enum ButtonAppearance {
-//   DEFAULT = "default",
-//   BASE = "base",
-//   POSITIVE = "positive",
-//   NEGATIVE = "negative",
-//   LINK = "link",
-// }
-
-export interface ButtonProps {
-  /* A unique identifier for the button */
-  id?: string;
-  /** Additional CSS classes */
-  className?: string;
-  /** The visual style of the button */
-  appearance?: "neutral" | "base" | "positive" | "negative" | "link";
-  /** Button contents */
-  label: string;
-  /** Optional click handler */
-  onClick?: () => void;
-}
-
-// combine custom props with all native button element attributes
-export type ButtonPropsType = ButtonProps &
-  React.ButtonHTMLAttributes<HTMLButtonElement>;
-
 /** Buttons are clickable elements used to perform an action. */
 const Button = ({
   id,
@@ -36,7 +8,7 @@ const Button = ({
   appearance,
   label,
   ...props
-}: ButtonPropsType): React.ReactElement => {
+}: Props): React.ReactElement => {
   return (
     <button
       id={id}
diff --git a/packages/ds-react-core/src/ui/Button/index.ts b/packages/ds-react-core/src/ui/Button/index.ts
index 1f6f2ab4..28ff64d5 100644
--- a/packages/ds-react-core/src/ui/Button/index.ts
+++ b/packages/ds-react-core/src/ui/Button/index.ts
@@ -1 +1,5 @@
-export { default as Button, type ButtonProps } from "./Button.js";
+export { default as Button } from "./Button.js";
+export type {
+  default as ButtonProps,
+  BaseProps as ButtonBaseProps,
+} from "./types.js";
diff --git a/packages/ds-react-core/src/ui/Button/types.ts b/packages/ds-react-core/src/ui/Button/types.ts
new file mode 100644
index 00000000..3d85b755
--- /dev/null
+++ b/packages/ds-react-core/src/ui/Button/types.ts
@@ -0,0 +1,29 @@
+import type React from "react";
+
+// TODO: this is how appearance could work as enum
+//
+// export enum ButtonAppearance {
+//   DEFAULT = "default",
+//   BASE = "base",
+//   POSITIVE = "positive",
+//   NEGATIVE = "negative",
+//   LINK = "link",
+// }
+//
+
+export interface BaseProps {
+  /* A unique identifier for the button */
+  id?: string;
+  /** Additional CSS classes */
+  className?: string;
+  /** The visual style of the button */
+  appearance?: "neutral" | "base" | "positive" | "negative" | "link";
+  /** Button contents */
+  label: string;
+  /** Optional click handler */
+  onClick?: () => void;
+}
+
+type Props = BaseProps & React.ButtonHTMLAttributes<HTMLButtonElement>;
+
+export default Props;