diff --git a/packages/design-system-react-native/src/components/BannerBase/BannerBase.tsx b/packages/design-system-react-native/src/components/BannerBase/BannerBase.tsx
index 32e230834..1f923b4c0 100644
--- a/packages/design-system-react-native/src/components/BannerBase/BannerBase.tsx
+++ b/packages/design-system-react-native/src/components/BannerBase/BannerBase.tsx
@@ -3,13 +3,14 @@ import {
   BoxBackgroundColor,
   BoxFlexDirection,
   ButtonIconSize,
+  ButtonSize,
   FontWeight,
+  IconName,
   TextVariant,
 } from '@metamask/design-system-shared';
 import React from 'react';
 import { GestureResponderEvent } from 'react-native';
 
-import { ButtonSize, IconName } from '../../types';
 import { Box } from '../Box';
 import { Button } from '../Button';
 import { ButtonIcon } from '../ButtonIcon';
diff --git a/packages/design-system-react-native/src/components/Button/Button.stories.tsx b/packages/design-system-react-native/src/components/Button/Button.stories.tsx
index faa991000..bdce75316 100644
--- a/packages/design-system-react-native/src/components/Button/Button.stories.tsx
+++ b/packages/design-system-react-native/src/components/Button/Button.stories.tsx
@@ -1,11 +1,13 @@
+import {
+  ButtonSize,
+  ButtonVariant,
+  IconName,
+} from '@metamask/design-system-shared';
 import { useTailwind } from '@metamask/design-system-twrnc-preset';
 import type { Meta, StoryObj } from '@storybook/react-native';
 import React from 'react';
 import { View } from 'react-native';
 
-import { ButtonSize, ButtonVariant } from '../../types';
-import { IconName } from '../Icon';
-
 import { Button } from './Button';
 import type { ButtonProps } from './Button.types';
 
diff --git a/packages/design-system-react-native/src/components/Button/Button.test.tsx b/packages/design-system-react-native/src/components/Button/Button.test.tsx
index fbc829f0b..ed73efefe 100644
--- a/packages/design-system-react-native/src/components/Button/Button.test.tsx
+++ b/packages/design-system-react-native/src/components/Button/Button.test.tsx
@@ -1,8 +1,7 @@
+import { ButtonVariant } from '@metamask/design-system-shared';
 import { render } from '@testing-library/react-native';
 import React from 'react';
 
-import { ButtonVariant } from '../../types';
-
 import { Button } from './Button';
 
 describe('Button', () => {
diff --git a/packages/design-system-react-native/src/components/Button/Button.tsx b/packages/design-system-react-native/src/components/Button/Button.tsx
index b900eab6d..72e76ae72 100644
--- a/packages/design-system-react-native/src/components/Button/Button.tsx
+++ b/packages/design-system-react-native/src/components/Button/Button.tsx
@@ -1,7 +1,6 @@
+import { ButtonVariant } from '@metamask/design-system-shared';
 import React from 'react';
 
-import { ButtonVariant } from '../../types';
-
 import type { ButtonProps } from './Button.types';
 import { ButtonPrimary } from './variants/ButtonPrimary';
 import { ButtonSecondary } from './variants/ButtonSecondary';
diff --git a/packages/design-system-react-native/src/components/Button/Button.types.ts b/packages/design-system-react-native/src/components/Button/Button.types.ts
index 8857d7acf..8397e7945 100644
--- a/packages/design-system-react-native/src/components/Button/Button.types.ts
+++ b/packages/design-system-react-native/src/components/Button/Button.types.ts
@@ -1,4 +1,4 @@
-import type { ButtonVariant } from '../../types';
+import type { ButtonPropsShared } from '@metamask/design-system-shared';
 
 import type { ButtonPrimaryProps } from './variants/ButtonPrimary';
 import type { ButtonSecondaryProps } from './variants/ButtonSecondary';
@@ -7,13 +7,5 @@ import type { ButtonTertiaryProps } from './variants/ButtonTertiary';
 /**
  * Button component props.
  */
-export type ButtonProps = (
-  | ButtonTertiaryProps
-  | ButtonPrimaryProps
-  | ButtonSecondaryProps
-) & {
-  /**
-   * Variant of Button.
-   */
-  variant?: ButtonVariant;
-};
+export type ButtonProps = ButtonPropsShared &
+  (ButtonTertiaryProps | ButtonPrimaryProps | ButtonSecondaryProps);
diff --git a/packages/design-system-react-native/src/components/Button/index.ts b/packages/design-system-react-native/src/components/Button/index.ts
index d49c58803..4992b96c8 100644
--- a/packages/design-system-react-native/src/components/Button/index.ts
+++ b/packages/design-system-react-native/src/components/Button/index.ts
@@ -1,3 +1,3 @@
-export { ButtonSize, ButtonVariant } from '../../types';
+export { ButtonSize, ButtonVariant } from '@metamask/design-system-shared';
 export { Button } from './Button';
 export type { ButtonProps } from './Button.types';
diff --git a/packages/design-system-react-native/src/components/Button/variants/ButtonPrimary/ButtonPrimary.stories.tsx b/packages/design-system-react-native/src/components/Button/variants/ButtonPrimary/ButtonPrimary.stories.tsx
index 9383d0271..3a592c41d 100644
--- a/packages/design-system-react-native/src/components/Button/variants/ButtonPrimary/ButtonPrimary.stories.tsx
+++ b/packages/design-system-react-native/src/components/Button/variants/ButtonPrimary/ButtonPrimary.stories.tsx
@@ -1,10 +1,8 @@
+import { ButtonSize, IconName } from '@metamask/design-system-shared';
 import { useTailwind } from '@metamask/design-system-twrnc-preset';
 import type { Meta, StoryObj } from '@storybook/react-native';
 import { View } from 'react-native';
 
-import { ButtonPrimarySize } from '../../../../types';
-import { IconName } from '../../../Icon';
-
 import { ButtonPrimary } from './ButtonPrimary';
 import type { ButtonPrimaryProps } from './ButtonPrimary.types';
 
@@ -17,7 +15,7 @@ const meta: Meta<ButtonPrimaryProps> = {
     },
     size: {
       control: 'select',
-      options: ButtonPrimarySize,
+      options: ButtonSize,
     },
     isLoading: {
       control: 'boolean',
@@ -69,7 +67,7 @@ const ButtonPrimaryStory: React.FC<ButtonPrimaryProps> = ({
 export const Default: Story = {
   args: {
     children: 'Sample ButtonPrimary Text',
-    size: ButtonPrimarySize.Lg,
+    size: ButtonSize.Lg,
     isLoading: false,
     loadingText: 'Loading',
     startIconName: IconName.Add,
@@ -85,9 +83,9 @@ export const Default: Story = {
 export const Sizes: Story = {
   render: () => (
     <View style={{ gap: 16 }}>
-      <ButtonPrimary size={ButtonPrimarySize.Sm}>ButtonSize Sm</ButtonPrimary>
-      <ButtonPrimary size={ButtonPrimarySize.Md}>ButtonSize Md</ButtonPrimary>
-      <ButtonPrimary size={ButtonPrimarySize.Lg}>
+      <ButtonPrimary size={ButtonSize.Sm}>ButtonSize Sm</ButtonPrimary>
+      <ButtonPrimary size={ButtonSize.Md}>ButtonSize Md</ButtonPrimary>
+      <ButtonPrimary size={ButtonSize.Lg}>
         ButtonSize Lg (Default)
       </ButtonPrimary>
     </View>
diff --git a/packages/design-system-react-native/src/components/Button/variants/ButtonPrimary/ButtonPrimary.test.tsx b/packages/design-system-react-native/src/components/Button/variants/ButtonPrimary/ButtonPrimary.test.tsx
index c88a53f90..8a530e140 100644
--- a/packages/design-system-react-native/src/components/Button/variants/ButtonPrimary/ButtonPrimary.test.tsx
+++ b/packages/design-system-react-native/src/components/Button/variants/ButtonPrimary/ButtonPrimary.test.tsx
@@ -1,11 +1,10 @@
+import { ButtonBaseSize } from '@metamask/design-system-shared';
 import { useTailwind } from '@metamask/design-system-twrnc-preset';
 import { renderHook } from '@testing-library/react-hooks';
 import { render } from '@testing-library/react-native';
 import React from 'react';
 import * as ReactTestRenderer from 'react-test-renderer';
 
-import { ButtonBaseSize } from '../../../../types';
-
 import { ButtonPrimary } from './ButtonPrimary';
 
 describe('ButtonPrimary', () => {
diff --git a/packages/design-system-react-native/src/components/Button/variants/ButtonPrimary/ButtonPrimary.tsx b/packages/design-system-react-native/src/components/Button/variants/ButtonPrimary/ButtonPrimary.tsx
index adf71f997..c7c728abd 100644
--- a/packages/design-system-react-native/src/components/Button/variants/ButtonPrimary/ButtonPrimary.tsx
+++ b/packages/design-system-react-native/src/components/Button/variants/ButtonPrimary/ButtonPrimary.tsx
@@ -6,6 +6,8 @@ import { TextVariant, FontWeight } from '../../../Text';
 
 import type { ButtonPrimaryProps } from './ButtonPrimary.types';
 
+// Internal Button variant.
+// Consumers should use `Button` with `variant`.
 export const ButtonPrimary = ({
   children,
   textProps,
diff --git a/packages/design-system-react-native/src/components/Button/variants/ButtonPrimary/README.md b/packages/design-system-react-native/src/components/Button/variants/ButtonPrimary/README.md
index 6d9b1d2c9..9bbfd4297 100644
--- a/packages/design-system-react-native/src/components/Button/variants/ButtonPrimary/README.md
+++ b/packages/design-system-react-native/src/components/Button/variants/ButtonPrimary/README.md
@@ -1,5 +1,8 @@
 # ButtonPrimary
 
+`ButtonPrimary` is an internal variant of the public `Button` component.
+Consumers should use `Button` with `variant={ButtonVariant.Primary}` instead of using `ButtonPrimary` directly.
+
 `ButtonPrimary` is a button for most important and desired action to guide the user.
 
 ## Props
diff --git a/packages/design-system-react-native/src/components/Button/variants/ButtonPrimary/index.ts b/packages/design-system-react-native/src/components/Button/variants/ButtonPrimary/index.ts
index 348e9a3d7..ea4794add 100644
--- a/packages/design-system-react-native/src/components/Button/variants/ButtonPrimary/index.ts
+++ b/packages/design-system-react-native/src/components/Button/variants/ButtonPrimary/index.ts
@@ -1,3 +1,2 @@
-export { ButtonPrimarySize } from '../../../../types';
 export { ButtonPrimary } from './ButtonPrimary';
 export type { ButtonPrimaryProps } from './ButtonPrimary.types';
diff --git a/packages/design-system-react-native/src/components/Button/variants/ButtonSecondary/ButtonSecondary.stories.tsx b/packages/design-system-react-native/src/components/Button/variants/ButtonSecondary/ButtonSecondary.stories.tsx
index 283a223ac..8bd8fc12a 100644
--- a/packages/design-system-react-native/src/components/Button/variants/ButtonSecondary/ButtonSecondary.stories.tsx
+++ b/packages/design-system-react-native/src/components/Button/variants/ButtonSecondary/ButtonSecondary.stories.tsx
@@ -1,10 +1,8 @@
+import { ButtonSize, IconName } from '@metamask/design-system-shared';
 import { useTailwind } from '@metamask/design-system-twrnc-preset';
 import type { Meta, StoryObj } from '@storybook/react-native';
 import { View } from 'react-native';
 
-import { ButtonSecondarySize } from '../../../../types';
-import { IconName } from '../../../Icon';
-
 import { ButtonSecondary } from './ButtonSecondary';
 import type { ButtonSecondaryProps } from './ButtonSecondary.types';
 
@@ -17,7 +15,7 @@ const meta: Meta<ButtonSecondaryProps> = {
     },
     size: {
       control: 'select',
-      options: ButtonSecondarySize,
+      options: ButtonSize,
     },
     isLoading: {
       control: 'boolean',
@@ -69,7 +67,7 @@ const ButtonSecondaryStory: React.FC<ButtonSecondaryProps> = ({
 export const Default: Story = {
   args: {
     children: 'Sample ButtonSecondary Text',
-    size: ButtonSecondarySize.Lg,
+    size: ButtonSize.Lg,
     isLoading: false,
     loadingText: 'Loading',
     startIconName: IconName.Add,
@@ -85,13 +83,9 @@ export const Default: Story = {
 export const Sizes: Story = {
   render: () => (
     <View style={{ gap: 16 }}>
-      <ButtonSecondary size={ButtonSecondarySize.Sm}>
-        ButtonSize Sm
-      </ButtonSecondary>
-      <ButtonSecondary size={ButtonSecondarySize.Md}>
-        ButtonSize Md
-      </ButtonSecondary>
-      <ButtonSecondary size={ButtonSecondarySize.Lg}>
+      <ButtonSecondary size={ButtonSize.Sm}>ButtonSize Sm</ButtonSecondary>
+      <ButtonSecondary size={ButtonSize.Md}>ButtonSize Md</ButtonSecondary>
+      <ButtonSecondary size={ButtonSize.Lg}>
         ButtonSize Lg (Default)
       </ButtonSecondary>
     </View>
diff --git a/packages/design-system-react-native/src/components/Button/variants/ButtonSecondary/ButtonSecondary.test.tsx b/packages/design-system-react-native/src/components/Button/variants/ButtonSecondary/ButtonSecondary.test.tsx
index 6f744e79c..9619c8e78 100644
--- a/packages/design-system-react-native/src/components/Button/variants/ButtonSecondary/ButtonSecondary.test.tsx
+++ b/packages/design-system-react-native/src/components/Button/variants/ButtonSecondary/ButtonSecondary.test.tsx
@@ -1,11 +1,10 @@
+import { ButtonBaseSize } from '@metamask/design-system-shared';
 import { useTailwind } from '@metamask/design-system-twrnc-preset';
 import { renderHook } from '@testing-library/react-hooks';
 import { render } from '@testing-library/react-native';
 import React from 'react';
 import * as ReactTestRenderer from 'react-test-renderer';
 
-import { ButtonBaseSize } from '../../../../types';
-
 import { ButtonSecondary } from './ButtonSecondary';
 
 describe('ButtonSecondary', () => {
diff --git a/packages/design-system-react-native/src/components/Button/variants/ButtonSecondary/ButtonSecondary.tsx b/packages/design-system-react-native/src/components/Button/variants/ButtonSecondary/ButtonSecondary.tsx
index e555b86ce..05272b34d 100644
--- a/packages/design-system-react-native/src/components/Button/variants/ButtonSecondary/ButtonSecondary.tsx
+++ b/packages/design-system-react-native/src/components/Button/variants/ButtonSecondary/ButtonSecondary.tsx
@@ -6,6 +6,8 @@ import { TextVariant, FontWeight } from '../../../Text';
 
 import type { ButtonSecondaryProps } from './ButtonSecondary.types';
 
+// Internal Button variant.
+// Consumers should use `Button` with `variant`.
 export const ButtonSecondary = ({
   children,
   textProps,
diff --git a/packages/design-system-react-native/src/components/Button/variants/ButtonSecondary/README.md b/packages/design-system-react-native/src/components/Button/variants/ButtonSecondary/README.md
index 94d5d986e..c33adfeca 100644
--- a/packages/design-system-react-native/src/components/Button/variants/ButtonSecondary/README.md
+++ b/packages/design-system-react-native/src/components/Button/variants/ButtonSecondary/README.md
@@ -1,5 +1,8 @@
 # ButtonSecondary
 
+`ButtonSecondary` is an internal variant of the public `Button` component.
+Consumers should use `Button` with `variant={ButtonVariant.Secondary}` instead of using `ButtonSecondary` directly.
+
 `ButtonSecondary` is a button for additional options that are helpful.
 
 ## Props
diff --git a/packages/design-system-react-native/src/components/Button/variants/ButtonSecondary/index.ts b/packages/design-system-react-native/src/components/Button/variants/ButtonSecondary/index.ts
index 391fa2b30..73a792c24 100644
--- a/packages/design-system-react-native/src/components/Button/variants/ButtonSecondary/index.ts
+++ b/packages/design-system-react-native/src/components/Button/variants/ButtonSecondary/index.ts
@@ -1,3 +1,2 @@
-export { ButtonSecondarySize } from '../../../../types';
 export { ButtonSecondary } from './ButtonSecondary';
 export type { ButtonSecondaryProps } from './ButtonSecondary.types';
diff --git a/packages/design-system-react-native/src/components/Button/variants/ButtonTertiary/ButtonTertiary.stories.tsx b/packages/design-system-react-native/src/components/Button/variants/ButtonTertiary/ButtonTertiary.stories.tsx
index 46a4a1954..9f4738b59 100644
--- a/packages/design-system-react-native/src/components/Button/variants/ButtonTertiary/ButtonTertiary.stories.tsx
+++ b/packages/design-system-react-native/src/components/Button/variants/ButtonTertiary/ButtonTertiary.stories.tsx
@@ -1,10 +1,8 @@
+import { ButtonSize, IconName } from '@metamask/design-system-shared';
 import { useTailwind } from '@metamask/design-system-twrnc-preset';
 import type { Meta, StoryObj } from '@storybook/react-native';
 import { View } from 'react-native';
 
-import { ButtonTertiarySize } from '../../../../types';
-import { IconName } from '../../../Icon';
-
 import { ButtonTertiary } from './ButtonTertiary';
 import type { ButtonTertiaryProps } from './ButtonTertiary.types';
 
@@ -17,7 +15,7 @@ const meta: Meta<ButtonTertiaryProps> = {
     },
     size: {
       control: 'select',
-      options: ButtonTertiarySize,
+      options: ButtonSize,
     },
     isLoading: {
       control: 'boolean',
@@ -69,7 +67,7 @@ const ButtonTertiaryStory: React.FC<ButtonTertiaryProps> = ({
 export const Default: Story = {
   args: {
     children: 'Sample ButtonTertiary Text',
-    size: ButtonTertiarySize.Lg,
+    size: ButtonSize.Lg,
     isLoading: false,
     loadingText: 'Loading',
     startIconName: IconName.Add,
@@ -85,13 +83,9 @@ export const Default: Story = {
 export const Sizes: Story = {
   render: () => (
     <View style={{ gap: 16 }}>
-      <ButtonTertiary size={ButtonTertiarySize.Sm}>
-        ButtonSize Sm
-      </ButtonTertiary>
-      <ButtonTertiary size={ButtonTertiarySize.Md}>
-        ButtonSize Md
-      </ButtonTertiary>
-      <ButtonTertiary size={ButtonTertiarySize.Lg}>
+      <ButtonTertiary size={ButtonSize.Sm}>ButtonSize Sm</ButtonTertiary>
+      <ButtonTertiary size={ButtonSize.Md}>ButtonSize Md</ButtonTertiary>
+      <ButtonTertiary size={ButtonSize.Lg}>
         ButtonSize Lg (Default)
       </ButtonTertiary>
     </View>
diff --git a/packages/design-system-react-native/src/components/Button/variants/ButtonTertiary/ButtonTertiary.test.tsx b/packages/design-system-react-native/src/components/Button/variants/ButtonTertiary/ButtonTertiary.test.tsx
index c572e13ff..b5ff0501b 100644
--- a/packages/design-system-react-native/src/components/Button/variants/ButtonTertiary/ButtonTertiary.test.tsx
+++ b/packages/design-system-react-native/src/components/Button/variants/ButtonTertiary/ButtonTertiary.test.tsx
@@ -1,11 +1,10 @@
+import { ButtonBaseSize } from '@metamask/design-system-shared';
 import { useTailwind } from '@metamask/design-system-twrnc-preset';
 import { renderHook } from '@testing-library/react-hooks';
 import { render } from '@testing-library/react-native';
 import React from 'react';
 import * as ReactTestRenderer from 'react-test-renderer';
 
-import { ButtonBaseSize } from '../../../../types';
-
 import { ButtonTertiary } from './ButtonTertiary';
 
 describe('ButtonTertiary', () => {
diff --git a/packages/design-system-react-native/src/components/Button/variants/ButtonTertiary/ButtonTertiary.tsx b/packages/design-system-react-native/src/components/Button/variants/ButtonTertiary/ButtonTertiary.tsx
index cec8457a3..66925c59a 100644
--- a/packages/design-system-react-native/src/components/Button/variants/ButtonTertiary/ButtonTertiary.tsx
+++ b/packages/design-system-react-native/src/components/Button/variants/ButtonTertiary/ButtonTertiary.tsx
@@ -6,6 +6,8 @@ import { TextVariant, FontWeight } from '../../../Text';
 
 import type { ButtonTertiaryProps } from './ButtonTertiary.types';
 
+// Internal Button variant.
+// Consumers should use `Button` with `variant`.
 export const ButtonTertiary = ({
   children,
   textProps,
diff --git a/packages/design-system-react-native/src/components/Button/variants/ButtonTertiary/README.md b/packages/design-system-react-native/src/components/Button/variants/ButtonTertiary/README.md
index 165a7a3eb..3bfb0ea51 100644
--- a/packages/design-system-react-native/src/components/Button/variants/ButtonTertiary/README.md
+++ b/packages/design-system-react-native/src/components/Button/variants/ButtonTertiary/README.md
@@ -1,5 +1,8 @@
 # ButtonTertiary
 
+`ButtonTertiary` is an internal variant of the public `Button` component.
+Consumers should use `Button` with `variant={ButtonVariant.Tertiary}` instead of using `ButtonTertiary` directly.
+
 `ButtonTertiary` is a button for optional and lowest attention.
 
 ## Props
diff --git a/packages/design-system-react-native/src/components/Button/variants/ButtonTertiary/index.ts b/packages/design-system-react-native/src/components/Button/variants/ButtonTertiary/index.ts
index db6f99b9f..33bbae45d 100644
--- a/packages/design-system-react-native/src/components/Button/variants/ButtonTertiary/index.ts
+++ b/packages/design-system-react-native/src/components/Button/variants/ButtonTertiary/index.ts
@@ -1,3 +1,2 @@
-export { ButtonTertiarySize } from '../../../../types';
 export { ButtonTertiary } from './ButtonTertiary';
 export type { ButtonTertiaryProps } from './ButtonTertiary.types';
diff --git a/packages/design-system-react-native/src/components/ButtonBase/ButtonBase.constants.ts b/packages/design-system-react-native/src/components/ButtonBase/ButtonBase.constants.ts
index bae08cbab..d31826bb5 100644
--- a/packages/design-system-react-native/src/components/ButtonBase/ButtonBase.constants.ts
+++ b/packages/design-system-react-native/src/components/ButtonBase/ButtonBase.constants.ts
@@ -1,4 +1,4 @@
-import { ButtonBaseSize } from '../../types';
+import { ButtonBaseSize } from '@metamask/design-system-shared';
 
 export const TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION: Record<
   ButtonBaseSize,
diff --git a/packages/design-system-react-native/src/components/ButtonBase/ButtonBase.stories.tsx b/packages/design-system-react-native/src/components/ButtonBase/ButtonBase.stories.tsx
index 378d20406..c24fe953a 100644
--- a/packages/design-system-react-native/src/components/ButtonBase/ButtonBase.stories.tsx
+++ b/packages/design-system-react-native/src/components/ButtonBase/ButtonBase.stories.tsx
@@ -1,9 +1,11 @@
-import { BoxFlexDirection } from '@metamask/design-system-shared';
+import {
+  BoxFlexDirection,
+  ButtonBaseSize,
+  IconName,
+} from '@metamask/design-system-shared';
 import type { Meta, StoryObj } from '@storybook/react-native';
 
-import { ButtonBaseSize } from '../../types';
 import { Box } from '../Box';
-import { IconName } from '../Icon';
 
 import { ButtonBase } from './ButtonBase';
 import type { ButtonBaseProps } from './ButtonBase.types';
diff --git a/packages/design-system-react-native/src/components/ButtonBase/ButtonBase.test.tsx b/packages/design-system-react-native/src/components/ButtonBase/ButtonBase.test.tsx
index 751dadad7..e979234cb 100644
--- a/packages/design-system-react-native/src/components/ButtonBase/ButtonBase.test.tsx
+++ b/packages/design-system-react-native/src/components/ButtonBase/ButtonBase.test.tsx
@@ -1,3 +1,4 @@
+import { ButtonBaseSize, IconName } from '@metamask/design-system-shared';
 import { useTailwind } from '@metamask/design-system-twrnc-preset';
 import { renderHook } from '@testing-library/react-hooks';
 import { render, fireEvent, waitFor } from '@testing-library/react-native';
@@ -5,8 +6,6 @@ import React from 'react';
 import { View, Text } from 'react-native';
 import * as ReactTestRenderer from 'react-test-renderer';
 
-import { ButtonBaseSize, IconName } from '../../types';
-
 import { ButtonBase } from './ButtonBase';
 
 describe('ButtonBase', () => {
diff --git a/packages/design-system-react-native/src/components/ButtonBase/ButtonBase.tsx b/packages/design-system-react-native/src/components/ButtonBase/ButtonBase.tsx
index 1ae187d4b..b6a45f2c4 100644
--- a/packages/design-system-react-native/src/components/ButtonBase/ButtonBase.tsx
+++ b/packages/design-system-react-native/src/components/ButtonBase/ButtonBase.tsx
@@ -1,9 +1,9 @@
+import { ButtonBaseSize } from '@metamask/design-system-shared';
 import { useTailwind } from '@metamask/design-system-twrnc-preset';
 import React, { useMemo } from 'react';
 import { View } from 'react-native';
 import type { StyleProp, ViewStyle } from 'react-native';
 
-import { ButtonBaseSize } from '../../types';
 import { Icon, IconColor, IconSize } from '../Icon';
 import { ButtonAnimated } from '../temp-components/ButtonAnimated';
 import { Spinner } from '../temp-components/Spinner';
diff --git a/packages/design-system-react-native/src/components/ButtonBase/ButtonBase.types.ts b/packages/design-system-react-native/src/components/ButtonBase/ButtonBase.types.ts
index c4c24594a..6bf4806dd 100644
--- a/packages/design-system-react-native/src/components/ButtonBase/ButtonBase.types.ts
+++ b/packages/design-system-react-native/src/components/ButtonBase/ButtonBase.types.ts
@@ -1,14 +1,17 @@
+import type {
+  ButtonBasePropsShared,
+  IconName,
+} from '@metamask/design-system-shared';
 import type { PressableProps, StyleProp, ViewStyle } from 'react-native';
 
-import type { ButtonBaseSize } from '../../types';
-import type { IconProps, IconName } from '../Icon';
+import type { IconProps } from '../Icon';
 import type { SpinnerProps } from '../temp-components/Spinner';
 import type { TextProps } from '../Text';
 
 /**
  * ButtonBase component props.
  */
-export type ButtonBaseProps = {
+export type ButtonBaseProps = ButtonBasePropsShared & {
   /**
    * Required prop for the content to be rendered within the ButtonBase
    */
@@ -17,23 +20,6 @@ export type ButtonBaseProps = {
    * Optional props to be passed to the Text component when children is a string
    */
   textProps?: Omit<Partial<TextProps>, 'children'>;
-  /**
-   * Optional prop to control the size of the ButtonBase
-   * Possible values: ButtonBaseSize.Sm (32px), ButtonBaseSize.Md (40px), ButtonBaseSize.Lg (48px)
-   *
-   * @default ButtonBaseSize.Lg
-   */
-  size?: ButtonBaseSize;
-  /**
-   * Optional prop that when true, shows a loading spinner
-   *
-   * @default false
-   */
-  isLoading?: boolean;
-  /**
-   * Optional prop for text to display when button is in loading state
-   */
-  loadingText?: string;
   /**
    * Optional prop to pass additional properties to the end icon
    */
@@ -62,18 +48,6 @@ export type ButtonBaseProps = {
    * Optional prop for a custom element to show at the end of the button
    */
   endAccessory?: React.ReactNode;
-  /**
-   * Optional prop that when true, disables the button
-   *
-   * @default false
-   */
-  isDisabled?: boolean;
-  /**
-   * Optional prop that when true, makes the button take up the full width of its container
-   *
-   * @default false
-   */
-  isFullWidth?: boolean;
   /**
    * Optional prop to add twrnc overriding classNames.
    * Can be a string or a function that receives pressed state and returns a string.
@@ -121,10 +95,10 @@ export type ButtonBaseProps = {
     nativeEvent: { actionName: string };
   }) => void;
 } & Omit<
-  PressableProps,
-  | 'accessibilityRole'
-  | 'accessibilityLabel'
-  | 'accessibilityHint'
-  | 'accessibilityActions'
-  | 'onAccessibilityAction'
->;
+    PressableProps,
+    | 'accessibilityRole'
+    | 'accessibilityLabel'
+    | 'accessibilityHint'
+    | 'accessibilityActions'
+    | 'onAccessibilityAction'
+  >;
diff --git a/packages/design-system-react-native/src/components/ButtonBase/index.ts b/packages/design-system-react-native/src/components/ButtonBase/index.ts
index 89a94d3d9..62f936d51 100644
--- a/packages/design-system-react-native/src/components/ButtonBase/index.ts
+++ b/packages/design-system-react-native/src/components/ButtonBase/index.ts
@@ -1,4 +1,4 @@
-export { ButtonBaseSize } from '../../types';
+export { ButtonBaseSize } from '@metamask/design-system-shared';
 export { ButtonBase } from './ButtonBase';
 export { TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION } from './ButtonBase.constants';
 export type { ButtonBaseProps } from './ButtonBase.types';
diff --git a/packages/design-system-react-native/src/components/ButtonHero/ButtonHero.stories.tsx b/packages/design-system-react-native/src/components/ButtonHero/ButtonHero.stories.tsx
index a83069b42..5732a66be 100644
--- a/packages/design-system-react-native/src/components/ButtonHero/ButtonHero.stories.tsx
+++ b/packages/design-system-react-native/src/components/ButtonHero/ButtonHero.stories.tsx
@@ -1,10 +1,8 @@
+import { ButtonHeroSize, IconName } from '@metamask/design-system-shared';
 import type { Meta, StoryObj } from '@storybook/react-native';
 import React from 'react';
 import { View } from 'react-native';
 
-import { ButtonHeroSize } from '../../types';
-import { IconName } from '../Icon';
-
 import { ButtonHero } from './ButtonHero';
 
 const meta: Meta<typeof ButtonHero> = {
diff --git a/packages/design-system-react-native/src/components/ButtonHero/index.ts b/packages/design-system-react-native/src/components/ButtonHero/index.ts
index 8d9eedd17..77ea4f3fd 100644
--- a/packages/design-system-react-native/src/components/ButtonHero/index.ts
+++ b/packages/design-system-react-native/src/components/ButtonHero/index.ts
@@ -1,3 +1,3 @@
 export { ButtonHero } from './ButtonHero';
 export type { ButtonHeroProps } from './ButtonHero.types';
-export { ButtonHeroSize } from '../../types';
+export { ButtonHeroSize } from '@metamask/design-system-shared';
diff --git a/packages/design-system-react-native/src/components/Checkbox/Checkbox.stories.tsx b/packages/design-system-react-native/src/components/Checkbox/Checkbox.stories.tsx
index 24669ea36..685fb04e6 100644
--- a/packages/design-system-react-native/src/components/Checkbox/Checkbox.stories.tsx
+++ b/packages/design-system-react-native/src/components/Checkbox/Checkbox.stories.tsx
@@ -1,8 +1,8 @@
+import { ButtonVariant } from '@metamask/design-system-shared';
 import type { Meta, StoryObj } from '@storybook/react-native';
 import { useState, useRef } from 'react';
 import { View } from 'react-native';
 
-import { ButtonVariant } from '../../types';
 import { Button } from '../Button';
 
 import { Checkbox } from './Checkbox';
diff --git a/packages/design-system-react-native/src/types/index.ts b/packages/design-system-react-native/src/types/index.ts
index 484f16b74..1029e19f4 100644
--- a/packages/design-system-react-native/src/types/index.ts
+++ b/packages/design-system-react-native/src/types/index.ts
@@ -19,35 +19,3 @@ export enum AvatarGroupVariant {
   Network = 'network',
   Token = 'token',
 }
-
-/**
- * ButtonBase - size
- */
-export enum ButtonBaseSize {
-  /**
-   * Represents a small button size (32px).
-   */
-  Sm = 'sm',
-  /**
-   * Represents a medium button size (40px).
-   */
-  Md = 'md',
-  /**
-   * Represents a large button size (48px).
-   */
-  Lg = 'lg',
-}
-export { ButtonBaseSize as ButtonSize };
-export { ButtonBaseSize as ButtonPrimarySize };
-export { ButtonBaseSize as ButtonSecondarySize };
-export { ButtonBaseSize as ButtonTertiarySize };
-export { ButtonBaseSize as ButtonHeroSize };
-
-/**
- * Button - variant
- */
-export enum ButtonVariant {
-  Primary = 'primary',
-  Secondary = 'secondary',
-  Tertiary = 'tertiary',
-}
diff --git a/packages/design-system-react/src/components/BannerBase/BannerBase.tsx b/packages/design-system-react/src/components/BannerBase/BannerBase.tsx
index d13795eed..daf620537 100644
--- a/packages/design-system-react/src/components/BannerBase/BannerBase.tsx
+++ b/packages/design-system-react/src/components/BannerBase/BannerBase.tsx
@@ -3,12 +3,13 @@ import {
   BoxBackgroundColor,
   BoxFlexDirection,
   ButtonIconSize,
+  ButtonSize,
   FontWeight,
+  IconName,
   TextVariant,
 } from '@metamask/design-system-shared';
 import React, { forwardRef } from 'react';
 
-import { ButtonSize, IconName } from '../../types';
 import { twMerge } from '../../utils/tw-merge';
 import { Box } from '../Box';
 import { Button } from '../Button';
diff --git a/packages/design-system-react/src/components/Button/Button.stories.tsx b/packages/design-system-react/src/components/Button/Button.stories.tsx
index e7ac2350f..081745587 100644
--- a/packages/design-system-react/src/components/Button/Button.stories.tsx
+++ b/packages/design-system-react/src/components/Button/Button.stories.tsx
@@ -1,9 +1,11 @@
+import {
+  ButtonVariant,
+  ButtonSize,
+  IconName,
+} from '@metamask/design-system-shared';
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { ButtonVariant, ButtonSize } from '../../types';
-import { IconName } from '../Icon';
-
 import { Button } from './Button';
 import README from './README.mdx';
 
diff --git a/packages/design-system-react/src/components/Button/Button.test.tsx b/packages/design-system-react/src/components/Button/Button.test.tsx
index b66e41208..af89d09ad 100644
--- a/packages/design-system-react/src/components/Button/Button.test.tsx
+++ b/packages/design-system-react/src/components/Button/Button.test.tsx
@@ -1,9 +1,7 @@
+import { ButtonVariant, IconName } from '@metamask/design-system-shared';
 import { render, screen } from '@testing-library/react';
 import React, { createRef } from 'react';
 
-import { ButtonVariant } from '../../types';
-import { IconName } from '../Icon';
-
 import { Button } from './Button';
 
 describe('Button', () => {
diff --git a/packages/design-system-react/src/components/Button/Button.tsx b/packages/design-system-react/src/components/Button/Button.tsx
index 64881b3ad..1a2e46d14 100644
--- a/packages/design-system-react/src/components/Button/Button.tsx
+++ b/packages/design-system-react/src/components/Button/Button.tsx
@@ -1,7 +1,6 @@
+import { ButtonVariant } from '@metamask/design-system-shared';
 import React, { forwardRef } from 'react';
 
-import { ButtonVariant } from '../../types';
-
 import type { ButtonProps } from './Button.types';
 import { ButtonPrimary } from './variants/ButtonPrimary';
 import type { ButtonPrimaryProps } from './variants/ButtonPrimary';
diff --git a/packages/design-system-react/src/components/Button/Button.types.ts b/packages/design-system-react/src/components/Button/Button.types.ts
index 4dc9cd062..e490627c8 100644
--- a/packages/design-system-react/src/components/Button/Button.types.ts
+++ b/packages/design-system-react/src/components/Button/Button.types.ts
@@ -1,24 +1,21 @@
-import type { ButtonVariant } from '../../types';
+import type {
+  ButtonPropsShared,
+  ButtonVariant,
+} from '@metamask/design-system-shared';
 
 import type { ButtonPrimaryProps } from './variants/ButtonPrimary';
 import type { ButtonSecondaryProps } from './variants/ButtonSecondary';
 import type { ButtonTertiaryProps } from './variants/ButtonTertiary';
 
-export type ButtonProps = {
-  /**
-   * Optional prop to control the variant of the Button
-   *
-   * @default ButtonVariant.Primary
-   */
-  variant?: ButtonVariant;
-} & (
-  | (Omit<ButtonPrimaryProps, 'ref'> & {
-      variant?: ButtonVariant.Primary;
-    })
-  | (Omit<ButtonSecondaryProps, 'ref'> & {
-      variant?: ButtonVariant.Secondary;
-    })
-  | (Omit<ButtonTertiaryProps, 'ref'> & {
-      variant?: ButtonVariant.Tertiary;
-    })
-);
+export type ButtonProps = ButtonPropsShared &
+  (
+    | (Omit<ButtonPrimaryProps, 'ref'> & {
+        variant?: typeof ButtonVariant.Primary;
+      })
+    | (Omit<ButtonSecondaryProps, 'ref'> & {
+        variant?: typeof ButtonVariant.Secondary;
+      })
+    | (Omit<ButtonTertiaryProps, 'ref'> & {
+        variant?: typeof ButtonVariant.Tertiary;
+      })
+  );
diff --git a/packages/design-system-react/src/components/Button/index.ts b/packages/design-system-react/src/components/Button/index.ts
index ef9407485..a35bfd094 100644
--- a/packages/design-system-react/src/components/Button/index.ts
+++ b/packages/design-system-react/src/components/Button/index.ts
@@ -1,3 +1,3 @@
-export { ButtonVariant, ButtonSize } from '../../types';
+export { ButtonVariant, ButtonSize } from '@metamask/design-system-shared';
 export { Button } from './Button';
 export type { ButtonProps } from './Button.types';
diff --git a/packages/design-system-react/src/components/Button/variants/ButtonPrimary/ButtonPrimary.stories.tsx b/packages/design-system-react/src/components/Button/variants/ButtonPrimary/ButtonPrimary.stories.tsx
index 57b0ade52..5fa7438cc 100644
--- a/packages/design-system-react/src/components/Button/variants/ButtonPrimary/ButtonPrimary.stories.tsx
+++ b/packages/design-system-react/src/components/Button/variants/ButtonPrimary/ButtonPrimary.stories.tsx
@@ -1,9 +1,7 @@
+import { ButtonSize, IconName } from '@metamask/design-system-shared';
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { ButtonPrimarySize } from '../../../../types';
-import { IconName } from '../../../Icon';
-
 import { ButtonPrimary } from './ButtonPrimary';
 import README from './README.mdx';
 
@@ -38,8 +36,8 @@ const meta: Meta<typeof ButtonPrimary> = {
     },
     size: {
       control: 'select',
-      options: Object.keys(ButtonPrimarySize),
-      mapping: ButtonPrimarySize,
+      options: Object.keys(ButtonSize),
+      mapping: ButtonSize,
       description: 'Optional prop to control the size of the ButtonPrimary',
     },
     isFullWidth: {
@@ -134,13 +132,13 @@ export const IsInverse: Story = {
 export const Size: Story = {
   render: (args) => (
     <div className="flex gap-2">
-      <ButtonPrimary {...args} size={ButtonPrimarySize.Sm}>
+      <ButtonPrimary {...args} size={ButtonSize.Sm}>
         Small
       </ButtonPrimary>
-      <ButtonPrimary {...args} size={ButtonPrimarySize.Md}>
+      <ButtonPrimary {...args} size={ButtonSize.Md}>
         Medium
       </ButtonPrimary>
-      <ButtonPrimary {...args} size={ButtonPrimarySize.Lg}>
+      <ButtonPrimary {...args} size={ButtonSize.Lg}>
         Large
       </ButtonPrimary>
     </div>
diff --git a/packages/design-system-react/src/components/Button/variants/ButtonPrimary/ButtonPrimary.test.tsx b/packages/design-system-react/src/components/Button/variants/ButtonPrimary/ButtonPrimary.test.tsx
index b12707bb9..817da34ea 100644
--- a/packages/design-system-react/src/components/Button/variants/ButtonPrimary/ButtonPrimary.test.tsx
+++ b/packages/design-system-react/src/components/Button/variants/ButtonPrimary/ButtonPrimary.test.tsx
@@ -1,9 +1,7 @@
+import { ButtonSize, IconName } from '@metamask/design-system-shared';
 import { render, screen } from '@testing-library/react';
 import React from 'react';
 
-import { ButtonPrimarySize } from '../../../../types';
-import { IconName } from '../../../Icon';
-
 import { ButtonPrimary } from './ButtonPrimary';
 
 describe('ButtonPrimary', () => {
@@ -116,11 +114,11 @@ describe('ButtonPrimary', () => {
 
   it('renders with correct size classes', () => {
     const { rerender } = render(
-      <ButtonPrimary size={ButtonPrimarySize.Sm}>Small</ButtonPrimary>,
+      <ButtonPrimary size={ButtonSize.Sm}>Small</ButtonPrimary>,
     );
     expect(screen.getByRole('button')).toHaveClass('h-8');
 
-    rerender(<ButtonPrimary size={ButtonPrimarySize.Lg}>Large</ButtonPrimary>);
+    rerender(<ButtonPrimary size={ButtonSize.Lg}>Large</ButtonPrimary>);
     expect(screen.getByRole('button')).toHaveClass('h-12');
   });
 
diff --git a/packages/design-system-react/src/components/Button/variants/ButtonPrimary/ButtonPrimary.tsx b/packages/design-system-react/src/components/Button/variants/ButtonPrimary/ButtonPrimary.tsx
index 87fbc848d..1d5440e9c 100644
--- a/packages/design-system-react/src/components/Button/variants/ButtonPrimary/ButtonPrimary.tsx
+++ b/packages/design-system-react/src/components/Button/variants/ButtonPrimary/ButtonPrimary.tsx
@@ -5,6 +5,8 @@ import { ButtonBase } from '../../../ButtonBase';
 
 import type { ButtonPrimaryProps } from './ButtonPrimary.types';
 
+// Internal Button variant.
+// Consumers should use `Button` with `variant`.
 export const ButtonPrimary = forwardRef<HTMLButtonElement, ButtonPrimaryProps>(
   (
     { className, isDanger, isInverse, isDisabled, isLoading, ...props },
diff --git a/packages/design-system-react/src/components/Button/variants/ButtonPrimary/README.mdx b/packages/design-system-react/src/components/Button/variants/ButtonPrimary/README.mdx
index 1d2a7b25f..0c5a22869 100644
--- a/packages/design-system-react/src/components/Button/variants/ButtonPrimary/README.mdx
+++ b/packages/design-system-react/src/components/Button/variants/ButtonPrimary/README.mdx
@@ -4,12 +4,13 @@ import * as ButtonPrimaryStories from './ButtonPrimary.stories';
 
 # ButtonPrimary
 
-`ButtonPrimary` is a button for most important and desired action to guide the user.
+`ButtonPrimary` is an internal variant of the public `Button` component.
+Consumers should use `Button` with `variant={ButtonVariant.Primary}` instead of using `ButtonPrimary` directly.
 
 ```tsx
-import { ButtonPrimary } from '@metamask/design-system-react';
+import { Button, ButtonVariant } from '@metamask/design-system-react';
 
-<ButtonPrimary>Primary Button</ButtonPrimary>;
+<Button variant={ButtonVariant.Primary}>Primary Button</Button>;
 ```
 
 <Canvas of={ButtonPrimaryStories.Default} />
@@ -22,9 +23,9 @@ ButtonPrimary supports three sizes.
 
 Available sizes:
 
-- `ButtonPrimarySize.Sm` (32px)
-- `ButtonPrimarySize.Md` (40px)
-- `ButtonPrimarySize.Lg` (48px)
+- `ButtonSize.Sm` (32px)
+- `ButtonSize.Md` (40px)
+- `ButtonSize.Lg` (48px)
 
 <table>
   <thead>
@@ -37,11 +38,11 @@ Available sizes:
   <tbody>
     <tr>
       <td align="left">
-        <code>ButtonPrimarySize</code>
+        <code>ButtonSize</code>
       </td>
       <td align="left">No</td>
       <td align="left">
-        <code>ButtonPrimarySize.Lg</code>
+        <code>ButtonSize.Lg</code>
       </td>
     </tr>
   </tbody>
diff --git a/packages/design-system-react/src/components/Button/variants/ButtonPrimary/index.ts b/packages/design-system-react/src/components/Button/variants/ButtonPrimary/index.ts
index 348e9a3d7..ea4794add 100644
--- a/packages/design-system-react/src/components/Button/variants/ButtonPrimary/index.ts
+++ b/packages/design-system-react/src/components/Button/variants/ButtonPrimary/index.ts
@@ -1,3 +1,2 @@
-export { ButtonPrimarySize } from '../../../../types';
 export { ButtonPrimary } from './ButtonPrimary';
 export type { ButtonPrimaryProps } from './ButtonPrimary.types';
diff --git a/packages/design-system-react/src/components/Button/variants/ButtonSecondary/ButtonSecondary.stories.tsx b/packages/design-system-react/src/components/Button/variants/ButtonSecondary/ButtonSecondary.stories.tsx
index 74e96d500..7e5000633 100644
--- a/packages/design-system-react/src/components/Button/variants/ButtonSecondary/ButtonSecondary.stories.tsx
+++ b/packages/design-system-react/src/components/Button/variants/ButtonSecondary/ButtonSecondary.stories.tsx
@@ -1,9 +1,7 @@
+import { ButtonSize, IconName } from '@metamask/design-system-shared';
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { ButtonSecondarySize } from '../../../../types';
-import { IconName } from '../../../Icon';
-
 import { ButtonSecondary } from './ButtonSecondary';
 import README from './README.mdx';
 
@@ -38,8 +36,8 @@ const meta: Meta<typeof ButtonSecondary> = {
     },
     size: {
       control: 'select',
-      options: Object.keys(ButtonSecondarySize),
-      mapping: ButtonSecondarySize,
+      options: Object.keys(ButtonSize),
+      mapping: ButtonSize,
       description: 'Optional prop to control the size of the ButtonSecondary',
     },
     isFullWidth: {
@@ -134,13 +132,13 @@ export const IsInverse: Story = {
 export const Size: Story = {
   render: (args) => (
     <div className="flex gap-2">
-      <ButtonSecondary {...args} size={ButtonSecondarySize.Sm}>
+      <ButtonSecondary {...args} size={ButtonSize.Sm}>
         Small
       </ButtonSecondary>
-      <ButtonSecondary {...args} size={ButtonSecondarySize.Md}>
+      <ButtonSecondary {...args} size={ButtonSize.Md}>
         Medium
       </ButtonSecondary>
-      <ButtonSecondary {...args} size={ButtonSecondarySize.Lg}>
+      <ButtonSecondary {...args} size={ButtonSize.Lg}>
         Large
       </ButtonSecondary>
     </div>
diff --git a/packages/design-system-react/src/components/Button/variants/ButtonSecondary/ButtonSecondary.test.tsx b/packages/design-system-react/src/components/Button/variants/ButtonSecondary/ButtonSecondary.test.tsx
index 374c250ab..55342e4b6 100644
--- a/packages/design-system-react/src/components/Button/variants/ButtonSecondary/ButtonSecondary.test.tsx
+++ b/packages/design-system-react/src/components/Button/variants/ButtonSecondary/ButtonSecondary.test.tsx
@@ -1,9 +1,7 @@
+import { ButtonSize, IconName } from '@metamask/design-system-shared';
 import { render, screen } from '@testing-library/react';
 import React from 'react';
 
-import { ButtonSecondarySize } from '../../../../types';
-import { IconName } from '../../../Icon';
-
 import { ButtonSecondary } from './ButtonSecondary';
 
 describe('ButtonSecondary', () => {
@@ -99,13 +97,11 @@ describe('ButtonSecondary', () => {
 
   it('renders with correct size classes', () => {
     const { rerender } = render(
-      <ButtonSecondary size={ButtonSecondarySize.Sm}>Small</ButtonSecondary>,
+      <ButtonSecondary size={ButtonSize.Sm}>Small</ButtonSecondary>,
     );
     expect(screen.getByRole('button')).toHaveClass('h-8');
 
-    rerender(
-      <ButtonSecondary size={ButtonSecondarySize.Lg}>Large</ButtonSecondary>,
-    );
+    rerender(<ButtonSecondary size={ButtonSize.Lg}>Large</ButtonSecondary>);
     expect(screen.getByRole('button')).toHaveClass('h-12');
   });
 
diff --git a/packages/design-system-react/src/components/Button/variants/ButtonSecondary/ButtonSecondary.tsx b/packages/design-system-react/src/components/Button/variants/ButtonSecondary/ButtonSecondary.tsx
index 4ea72be56..168853d28 100644
--- a/packages/design-system-react/src/components/Button/variants/ButtonSecondary/ButtonSecondary.tsx
+++ b/packages/design-system-react/src/components/Button/variants/ButtonSecondary/ButtonSecondary.tsx
@@ -5,6 +5,8 @@ import { ButtonBase } from '../../../ButtonBase';
 
 import type { ButtonSecondaryProps } from './ButtonSecondary.types';
 
+// Internal Button variant.
+// Consumers should use `Button` with `variant`.
 export const ButtonSecondary = forwardRef<
   HTMLButtonElement,
   ButtonSecondaryProps
diff --git a/packages/design-system-react/src/components/Button/variants/ButtonSecondary/README.mdx b/packages/design-system-react/src/components/Button/variants/ButtonSecondary/README.mdx
index d0331b099..b47735170 100644
--- a/packages/design-system-react/src/components/Button/variants/ButtonSecondary/README.mdx
+++ b/packages/design-system-react/src/components/Button/variants/ButtonSecondary/README.mdx
@@ -4,12 +4,13 @@ import * as ButtonSecondaryStories from './ButtonSecondary.stories';
 
 # ButtonSecondary
 
-`ButtonSecondary` is a button for additional options that are helpful.
+`ButtonSecondary` is an internal variant of the public `Button` component.
+Consumers should use `Button` with `variant={ButtonVariant.Secondary}` instead of using `ButtonSecondary` directly.
 
 ```tsx
-import { ButtonSecondary } from '@metamask/design-system-react';
+import { Button, ButtonVariant } from '@metamask/design-system-react';
 
-<ButtonSecondary onClick={() => {}}>Secondary Button</ButtonSecondary>;
+<Button variant={ButtonVariant.Secondary}>Secondary Button</Button>;
 ```
 
 <Canvas of={ButtonSecondaryStories.Default} />
@@ -22,9 +23,9 @@ ButtonSecondary supports three sizes.
 
 Available sizes:
 
-- `ButtonSecondarySize.Sm` (32px)
-- `ButtonSecondarySize.Md` (40px)
-- `ButtonSecondarySize.Lg` (48px)
+- `ButtonSize.Sm` (32px)
+- `ButtonSize.Md` (40px)
+- `ButtonSize.Lg` (48px)
 
 <table>
   <thead>
@@ -37,11 +38,11 @@ Available sizes:
   <tbody>
     <tr>
       <td align="left">
-        <code>ButtonSecondarySize</code>
+        <code>ButtonSize</code>
       </td>
       <td align="left">No</td>
       <td align="left">
-        <code>ButtonSecondarySize.Lg</code>
+        <code>ButtonSize.Lg</code>
       </td>
     </tr>
   </tbody>
diff --git a/packages/design-system-react/src/components/Button/variants/ButtonSecondary/index.ts b/packages/design-system-react/src/components/Button/variants/ButtonSecondary/index.ts
index 391fa2b30..73a792c24 100644
--- a/packages/design-system-react/src/components/Button/variants/ButtonSecondary/index.ts
+++ b/packages/design-system-react/src/components/Button/variants/ButtonSecondary/index.ts
@@ -1,3 +1,2 @@
-export { ButtonSecondarySize } from '../../../../types';
 export { ButtonSecondary } from './ButtonSecondary';
 export type { ButtonSecondaryProps } from './ButtonSecondary.types';
diff --git a/packages/design-system-react/src/components/Button/variants/ButtonTertiary/ButtonTertiary.stories.tsx b/packages/design-system-react/src/components/Button/variants/ButtonTertiary/ButtonTertiary.stories.tsx
index 35190c80a..19ba2924d 100644
--- a/packages/design-system-react/src/components/Button/variants/ButtonTertiary/ButtonTertiary.stories.tsx
+++ b/packages/design-system-react/src/components/Button/variants/ButtonTertiary/ButtonTertiary.stories.tsx
@@ -1,9 +1,7 @@
+import { ButtonSize, IconName } from '@metamask/design-system-shared';
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { ButtonTertiarySize } from '../../../../types';
-import { IconName } from '../../../Icon';
-
 import { ButtonTertiary } from './ButtonTertiary';
 import README from './README.mdx';
 
@@ -33,7 +31,7 @@ const meta: Meta<typeof ButtonTertiary> = {
     },
     size: {
       control: 'select',
-      options: Object.values(ButtonTertiarySize),
+      options: Object.values(ButtonSize),
       description: 'Optional prop to control the size of the ButtonTertiary',
     },
     isFullWidth: {
@@ -113,13 +111,13 @@ export const IsDanger: Story = {
 export const Size: Story = {
   render: (args) => (
     <div className="flex gap-2">
-      <ButtonTertiary {...args} size={ButtonTertiarySize.Sm}>
+      <ButtonTertiary {...args} size={ButtonSize.Sm}>
         Small
       </ButtonTertiary>
-      <ButtonTertiary {...args} size={ButtonTertiarySize.Md}>
+      <ButtonTertiary {...args} size={ButtonSize.Md}>
         Medium
       </ButtonTertiary>
-      <ButtonTertiary {...args} size={ButtonTertiarySize.Lg}>
+      <ButtonTertiary {...args} size={ButtonSize.Lg}>
         Large
       </ButtonTertiary>
     </div>
diff --git a/packages/design-system-react/src/components/Button/variants/ButtonTertiary/ButtonTertiary.test.tsx b/packages/design-system-react/src/components/Button/variants/ButtonTertiary/ButtonTertiary.test.tsx
index 6dc20deb1..ce4dadf9e 100644
--- a/packages/design-system-react/src/components/Button/variants/ButtonTertiary/ButtonTertiary.test.tsx
+++ b/packages/design-system-react/src/components/Button/variants/ButtonTertiary/ButtonTertiary.test.tsx
@@ -1,9 +1,7 @@
+import { ButtonSize, IconName } from '@metamask/design-system-shared';
 import { render, screen } from '@testing-library/react';
 import React, { createRef } from 'react';
 
-import { ButtonTertiarySize } from '../../../../types';
-import { IconName } from '../../../Icon';
-
 import { ButtonTertiary } from './ButtonTertiary';
 
 describe('ButtonTertiary', () => {
@@ -55,18 +53,14 @@ describe('ButtonTertiary', () => {
 
   it('renders with correct size classes', () => {
     const { rerender } = render(
-      <ButtonTertiary size={ButtonTertiarySize.Sm}>Small</ButtonTertiary>,
+      <ButtonTertiary size={ButtonSize.Sm}>Small</ButtonTertiary>,
     );
     expect(screen.getByRole('button')).toHaveClass('h-8');
 
-    rerender(
-      <ButtonTertiary size={ButtonTertiarySize.Md}>Medium</ButtonTertiary>,
-    );
+    rerender(<ButtonTertiary size={ButtonSize.Md}>Medium</ButtonTertiary>);
     expect(screen.getByRole('button')).toHaveClass('h-10');
 
-    rerender(
-      <ButtonTertiary size={ButtonTertiarySize.Lg}>Large</ButtonTertiary>,
-    );
+    rerender(<ButtonTertiary size={ButtonSize.Lg}>Large</ButtonTertiary>);
     expect(screen.getByRole('button')).toHaveClass('h-12');
   });
 
diff --git a/packages/design-system-react/src/components/Button/variants/ButtonTertiary/ButtonTertiary.tsx b/packages/design-system-react/src/components/Button/variants/ButtonTertiary/ButtonTertiary.tsx
index 3c0602dcc..8f03e924f 100644
--- a/packages/design-system-react/src/components/Button/variants/ButtonTertiary/ButtonTertiary.tsx
+++ b/packages/design-system-react/src/components/Button/variants/ButtonTertiary/ButtonTertiary.tsx
@@ -5,6 +5,8 @@ import { ButtonBase } from '../../../ButtonBase';
 
 import type { ButtonTertiaryProps } from './ButtonTertiary.types';
 
+// Internal Button variant.
+// Consumers should use `Button` with `variant`.
 export const ButtonTertiary = forwardRef<
   HTMLButtonElement,
   ButtonTertiaryProps
diff --git a/packages/design-system-react/src/components/Button/variants/ButtonTertiary/README.mdx b/packages/design-system-react/src/components/Button/variants/ButtonTertiary/README.mdx
index 55d963878..0ec75e470 100644
--- a/packages/design-system-react/src/components/Button/variants/ButtonTertiary/README.mdx
+++ b/packages/design-system-react/src/components/Button/variants/ButtonTertiary/README.mdx
@@ -4,12 +4,13 @@ import * as ButtonTertiaryStories from './ButtonTertiary.stories';
 
 # ButtonTertiary
 
-`ButtonTertiary` is a button for optional and lowest attention.
+`ButtonTertiary` is an internal variant of the public `Button` component.
+Consumers should use `Button` with `variant={ButtonVariant.Tertiary}` instead of using `ButtonTertiary` directly.
 
 ```tsx
-import { ButtonTertiary } from '@metamask/design-system-react';
+import { Button, ButtonVariant } from '@metamask/design-system-react';
 
-<ButtonTertiary onClick={() => {}}>Button Tertiary</ButtonTertiary>;
+<Button variant={ButtonVariant.Tertiary}>Button Tertiary</Button>;
 ```
 
 <Canvas of={ButtonTertiaryStories.Default} />
@@ -22,9 +23,9 @@ ButtonTertiary supports three sizes.
 
 Available sizes:
 
-- `ButtonTertiarySize.Sm` (32px)
-- `ButtonTertiarySize.Md` (40px)
-- `ButtonTertiarySize.Lg` (48px)
+- `ButtonSize.Sm` (32px)
+- `ButtonSize.Md` (40px)
+- `ButtonSize.Lg` (48px)
 
 <table>
   <thead>
@@ -37,11 +38,11 @@ Available sizes:
   <tbody>
     <tr>
       <td align="left">
-        <code>ButtonTertiarySize</code>
+        <code>ButtonSize</code>
       </td>
       <td align="left">No</td>
       <td align="left">
-        <code>ButtonTertiarySize.Lg</code>
+        <code>ButtonSize.Lg</code>
       </td>
     </tr>
   </tbody>
diff --git a/packages/design-system-react/src/components/Button/variants/ButtonTertiary/index.ts b/packages/design-system-react/src/components/Button/variants/ButtonTertiary/index.ts
index db6f99b9f..33bbae45d 100644
--- a/packages/design-system-react/src/components/Button/variants/ButtonTertiary/index.ts
+++ b/packages/design-system-react/src/components/Button/variants/ButtonTertiary/index.ts
@@ -1,3 +1,2 @@
-export { ButtonTertiarySize } from '../../../../types';
 export { ButtonTertiary } from './ButtonTertiary';
 export type { ButtonTertiaryProps } from './ButtonTertiary.types';
diff --git a/packages/design-system-react/src/components/ButtonBase/ButtonBase.constants.ts b/packages/design-system-react/src/components/ButtonBase/ButtonBase.constants.ts
index bae08cbab..d31826bb5 100644
--- a/packages/design-system-react/src/components/ButtonBase/ButtonBase.constants.ts
+++ b/packages/design-system-react/src/components/ButtonBase/ButtonBase.constants.ts
@@ -1,4 +1,4 @@
-import { ButtonBaseSize } from '../../types';
+import { ButtonBaseSize } from '@metamask/design-system-shared';
 
 export const TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION: Record<
   ButtonBaseSize,
diff --git a/packages/design-system-react/src/components/ButtonBase/ButtonBase.stories.tsx b/packages/design-system-react/src/components/ButtonBase/ButtonBase.stories.tsx
index fc487015e..3af8d7a33 100644
--- a/packages/design-system-react/src/components/ButtonBase/ButtonBase.stories.tsx
+++ b/packages/design-system-react/src/components/ButtonBase/ButtonBase.stories.tsx
@@ -1,9 +1,13 @@
-import { TextColor, TextVariant } from '@metamask/design-system-shared';
+import {
+  ButtonBaseSize,
+  IconName,
+  TextColor,
+  TextVariant,
+} from '@metamask/design-system-shared';
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { ButtonBaseSize } from '../../types';
-import { Icon, IconName } from '../Icon';
+import { Icon } from '../Icon';
 import { Text } from '../Text';
 
 import { ButtonBase } from './ButtonBase';
diff --git a/packages/design-system-react/src/components/ButtonBase/ButtonBase.test.tsx b/packages/design-system-react/src/components/ButtonBase/ButtonBase.test.tsx
index 3fbd91dfc..4b2b127da 100644
--- a/packages/design-system-react/src/components/ButtonBase/ButtonBase.test.tsx
+++ b/packages/design-system-react/src/components/ButtonBase/ButtonBase.test.tsx
@@ -1,9 +1,7 @@
+import { ButtonBaseSize, IconName } from '@metamask/design-system-shared';
 import { render, screen } from '@testing-library/react';
 import React from 'react';
 
-import { ButtonBaseSize } from '../../types';
-import { IconName } from '../Icon';
-
 import { ButtonBase } from './ButtonBase';
 
 describe('ButtonBase', () => {
diff --git a/packages/design-system-react/src/components/ButtonBase/ButtonBase.tsx b/packages/design-system-react/src/components/ButtonBase/ButtonBase.tsx
index 9fda610e9..7a3b4f0c5 100644
--- a/packages/design-system-react/src/components/ButtonBase/ButtonBase.tsx
+++ b/packages/design-system-react/src/components/ButtonBase/ButtonBase.tsx
@@ -1,9 +1,9 @@
+import { ButtonBaseSize, IconName } from '@metamask/design-system-shared';
 import { Slot, Slottable } from '@radix-ui/react-slot';
 import React, { forwardRef } from 'react';
 
-import { ButtonBaseSize } from '../../types';
 import { twMerge } from '../../utils/tw-merge';
-import { Icon, IconName, IconSize } from '../Icon';
+import { Icon, IconSize } from '../Icon';
 import { Text, FontWeight, TextColor } from '../Text';
 
 import { TWCLASSMAP_BUTTONBASE_SIZE_DIMENSION } from './ButtonBase.constants';
diff --git a/packages/design-system-react/src/components/ButtonBase/ButtonBase.types.ts b/packages/design-system-react/src/components/ButtonBase/ButtonBase.types.ts
index e7b55f5b0..ec186dc92 100644
--- a/packages/design-system-react/src/components/ButtonBase/ButtonBase.types.ts
+++ b/packages/design-system-react/src/components/ButtonBase/ButtonBase.types.ts
@@ -1,138 +1,110 @@
+import type {
+  ButtonBasePropsShared,
+  IconName,
+} from '@metamask/design-system-shared';
 import type { ComponentProps } from 'react';
 
-import type { ButtonBaseSize } from '../../types';
-import type { IconName, IconProps } from '../Icon';
+import type { IconProps } from '../Icon';
 import type { TextProps } from '../Text';
 
-export type ButtonBaseProps = ComponentProps<'button'> & {
-  /**
-   * Required prop for the content to be rendered within the ButtonBase
-   */
-  children: React.ReactNode;
-  /**
-   * Optional prop for additional CSS classes to be applied to the ButtonBase component.
-   * These classes will be merged with the component's default classes using twMerge.
-   */
-  className?: string;
-  /**
-   * Optional prop to control the size of the ButtonBase
-   *
-   * @default ButtonBaseSize.Lg
-   */
-  size?: ButtonBaseSize;
-  /**
-   * Optional props to be passed to the Text component when children is a string
-   */
-  textProps?: Partial<TextProps>;
-  /**
-   * Optional prop that when true, makes the button take up the full width of its container
-   *
-   * @default false
-   */
-  isFullWidth?: boolean;
-  /**
-   * Optional boolean that determines if the component should merge its props onto its immediate child
-   * instead of rendering a button element
-   *
-   * @default false
-   */
-  asChild?: boolean;
-  /**
-   * Optional prop that when true, shows a loading spinner
-   *
-   * @default false
-   */
-  isLoading?: boolean;
-  /**
-   * Optional prop for text to display when button is in loading state
-   */
-  loadingText?: string;
-  /**
-   * Optional props to be passed to the loading Text component
-   */
-  loadingTextProps?: Partial<TextProps>;
-  /**
-   * Optional prop to specify an icon to show at the start of the button
-   */
-  startIconName?: IconName;
-  /**
-   * Optional prop to pass additional properties to the start icon
-   */
-  startIconProps?: Partial<IconProps>;
-  /**
-   * Optional prop for a custom element to show at the start of the button
-   */
-  startAccessory?: React.ReactNode;
-  /**
-   * Optional prop to specify an icon to show at the end of the button
-   */
-  endIconName?: IconName;
-  /**
-   * Optional prop to pass additional properties to the end icon
-   */
-  endIconProps?: Partial<IconProps>;
-  /**
-   * Optional prop for a custom element to show at the end of the button
-   */
-  endAccessory?: React.ReactNode;
-  /**
-   * Optional prop that when true, disables the button
-   *
-   * @default false
-   */
-  isDisabled?: boolean;
-  /**
-   * Optional prop to pass additional properties to the loading icon
-   */
-  loadingIconProps?: Partial<IconProps>;
-  /**
-   * Optional CSS styles to be applied to the component.
-   * Should be used sparingly and only for dynamic styles that can't be achieved with className.
-   */
-  style?: React.CSSProperties;
+export type ButtonBaseProps = ComponentProps<'button'> &
+  ButtonBasePropsShared & {
+    /**
+     * Optional prop for additional CSS classes to be applied to the ButtonBase component.
+     * These classes will be merged with the component's default classes using twMerge.
+     */
+    className?: string;
+    /**
+     * Optional props to be passed to the Text component when children is a string
+     */
+    textProps?: Partial<TextProps>;
+    /**
+     * Optional boolean that determines if the component should merge its props onto its immediate child
+     * instead of rendering a button element
+     *
+     * @default false
+     */
+    asChild?: boolean;
+    /**
+     * Optional props to be passed to the loading Text component
+     */
+    loadingTextProps?: Partial<TextProps>;
+    /**
+     * Optional prop to specify an icon to show at the start of the button
+     */
+    startIconName?: IconName;
+    /**
+     * Optional prop to pass additional properties to the start icon
+     */
+    startIconProps?: Partial<IconProps>;
+    /**
+     * Optional prop for a custom element to show at the start of the button
+     */
+    startAccessory?: React.ReactNode;
+    /**
+     * Optional prop to specify an icon to show at the end of the button
+     */
+    endIconName?: IconName;
+    /**
+     * Optional prop to pass additional properties to the end icon
+     */
+    endIconProps?: Partial<IconProps>;
+    /**
+     * Optional prop for a custom element to show at the end of the button
+     */
+    endAccessory?: React.ReactNode;
+    /**
+     * Optional prop to pass additional properties to the loading icon
+     */
+    loadingIconProps?: Partial<IconProps>;
+    /**
+     * Optional CSS styles to be applied to the component.
+     * Should be used sparingly and only for dynamic styles that can't be achieved with className.
+     */
+    style?: React.CSSProperties;
 
-  // Accessibility props
-  /**
-   * Optional accessible label for the button. Use when the button text doesn't fully describe its purpose.
-   * This will be used as the aria-label attribute.
-   */
-  'aria-label'?: string;
-  /**
-   * Optional ID of an element that labels the button.
-   * This will be used as the aria-labelledby attribute.
-   */
-  'aria-labelledby'?: string;
-  /**
-   * Optional ID of an element that describes the button.
-   * This will be used as the aria-describedby attribute.
-   */
-  'aria-describedby'?: string;
-  /**
-   * Optional prop to indicate if the button is pressed (for toggle buttons).
-   * This will be used as the aria-pressed attribute.
-   */
-  'aria-pressed'?: boolean | 'mixed';
-  /**
-   * Optional prop to indicate if the button controls a collapsible element.
-   * This will be used as the aria-expanded attribute.
-   */
-  'aria-expanded'?: boolean;
-  /**
-   * Optional prop to indicate if the button controls another element.
-   * This will be used as the aria-controls attribute.
-   */
-  'aria-controls'?: string;
-  /**
-   * Optional prop to indicate if the button has a popup (menu, listbox, tree, grid, or dialog).
-   * This will be used as the aria-haspopup attribute.
-   */
-  'aria-haspopup'?:
-    | boolean
-    | 'false'
-    | 'true'
-    | 'menu'
-    | 'listbox'
-    | 'tree'
-    | 'grid'
-    | 'dialog';
-};
+    // Accessibility props
+    /**
+     * Optional accessible label for the button. Use when the button text doesn't fully describe its purpose.
+     * This will be used as the aria-label attribute.
+     */
+    'aria-label'?: string;
+    /**
+     * Optional ID of an element that labels the button.
+     * This will be used as the aria-labelledby attribute.
+     */
+    'aria-labelledby'?: string;
+    /**
+     * Optional ID of an element that describes the button.
+     * This will be used as the aria-describedby attribute.
+     */
+    'aria-describedby'?: string;
+    /**
+     * Optional prop to indicate if the button is pressed (for toggle buttons).
+     * This will be used as the aria-pressed attribute.
+     */
+    'aria-pressed'?: boolean | 'mixed';
+    /**
+     * Optional prop to indicate if the button controls a collapsible element.
+     * This will be used as the aria-expanded attribute.
+     */
+    'aria-expanded'?: boolean;
+    /**
+     * Optional prop to indicate if the button controls another element.
+     * This will be used as the aria-controls attribute.
+     */
+    'aria-controls'?: string;
+    /**
+     * Optional prop to indicate if the button has a popup (menu, listbox, tree, grid, or dialog).
+     * This will be used as the aria-haspopup attribute.
+     */
+    'aria-haspopup'?:
+      | boolean
+      | 'false'
+      | 'true'
+      | 'menu'
+      | 'listbox'
+      | 'tree'
+      | 'grid'
+      | 'dialog';
+  };
diff --git a/packages/design-system-react/src/components/ButtonBase/index.ts b/packages/design-system-react/src/components/ButtonBase/index.ts
index 680ba6a9b..2de52e24c 100644
--- a/packages/design-system-react/src/components/ButtonBase/index.ts
+++ b/packages/design-system-react/src/components/ButtonBase/index.ts
@@ -1,3 +1,3 @@
-export { ButtonBaseSize } from '../../types';
+export { ButtonBaseSize } from '@metamask/design-system-shared';
 export { ButtonBase } from './ButtonBase';
 export type { ButtonBaseProps } from './ButtonBase.types';
diff --git a/packages/design-system-react/src/components/ButtonHero/ButtonHero.stories.tsx b/packages/design-system-react/src/components/ButtonHero/ButtonHero.stories.tsx
index f9584ffd9..46ed8a031 100644
--- a/packages/design-system-react/src/components/ButtonHero/ButtonHero.stories.tsx
+++ b/packages/design-system-react/src/components/ButtonHero/ButtonHero.stories.tsx
@@ -1,9 +1,7 @@
+import { ButtonHeroSize, IconName } from '@metamask/design-system-shared';
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { ButtonHeroSize } from '../../types';
-import { IconName } from '../Icon';
-
 import { ButtonHero } from './ButtonHero';
 import README from './README.mdx';
 
diff --git a/packages/design-system-react/src/components/ButtonHero/index.ts b/packages/design-system-react/src/components/ButtonHero/index.ts
index 8d9eedd17..77ea4f3fd 100644
--- a/packages/design-system-react/src/components/ButtonHero/index.ts
+++ b/packages/design-system-react/src/components/ButtonHero/index.ts
@@ -1,3 +1,3 @@
 export { ButtonHero } from './ButtonHero';
 export type { ButtonHeroProps } from './ButtonHero.types';
-export { ButtonHeroSize } from '../../types';
+export { ButtonHeroSize } from '@metamask/design-system-shared';
diff --git a/packages/design-system-react/src/types/index.ts b/packages/design-system-react/src/types/index.ts
index b780329ff..9a344c832 100644
--- a/packages/design-system-react/src/types/index.ts
+++ b/packages/design-system-react/src/types/index.ts
@@ -20,47 +20,6 @@ export enum AvatarGroupVariant {
   Token = 'token',
 }
 
-/**
- * ButtonBase - size
- */
-export enum ButtonBaseSize {
-  /**
-   * Represents a small button size (32px).
-   */
-  Sm = 'sm',
-  /**
-   * Represents a medium button size (40px).
-   */
-  Md = 'md',
-  /**
-   * Represents a large button size (48px).
-   */
-  Lg = 'lg',
-}
-export { ButtonBaseSize as ButtonPrimarySize };
-export { ButtonBaseSize as ButtonSecondarySize };
-export { ButtonBaseSize as ButtonTertiarySize };
-export { ButtonBaseSize as ButtonHeroSize };
-export { ButtonBaseSize as ButtonSize };
-
-/**
- * Button - variant
- */
-export enum ButtonVariant {
-  /**
-   * Primary button variant - used for primary actions
-   */
-  Primary = 'primary',
-  /**
-   * Secondary button variant - used for secondary actions
-   */
-  Secondary = 'secondary',
-  /**
-   * Tertiary button variant - used for tertiary-like actions
-   */
-  Tertiary = 'tertiary',
-}
-
 /**
  * Text - textAlign
  */
diff --git a/packages/design-system-shared/src/index.ts b/packages/design-system-shared/src/index.ts
index c231c6de1..0aa5644b3 100644
--- a/packages/design-system-shared/src/index.ts
+++ b/packages/design-system-shared/src/index.ts
@@ -77,6 +77,17 @@ export {
 // ButtonFilter types (ADR-0004)
 export { type ButtonFilterPropsShared } from './types/ButtonFilter';
 
+// ButtonBase types (ADR-0003 + ADR-0004)
+export {
+  ButtonBaseSize,
+  ButtonHeroSize,
+  ButtonSize,
+  type ButtonBasePropsShared,
+} from './types/ButtonBase';
+
+// Button types (ADR-0003 + ADR-0004)
+export { ButtonVariant, type ButtonPropsShared } from './types/Button';
+
 // AvatarNetwork types (ADR-0004)
 export { type AvatarNetworkPropsShared } from './types/AvatarNetwork';
 
diff --git a/packages/design-system-shared/src/types/Button/Button.types.ts b/packages/design-system-shared/src/types/Button/Button.types.ts
new file mode 100644
index 000000000..c395d3a29
--- /dev/null
+++ b/packages/design-system-shared/src/types/Button/Button.types.ts
@@ -0,0 +1,32 @@
+/**
+ * Button - variant
+ * Convert from enum to const object (ADR-0003)
+ */
+export const ButtonVariant = {
+  /**
+   * Primary button variant - used for primary actions
+   */
+  Primary: 'primary',
+  /**
+   * Secondary button variant - used for secondary actions
+   */
+  Secondary: 'secondary',
+  /**
+   * Tertiary button variant - used for tertiary-like actions
+   */
+  Tertiary: 'tertiary',
+} as const;
+export type ButtonVariant = (typeof ButtonVariant)[keyof typeof ButtonVariant];
+
+/**
+ * Button component shared props (ADR-0004)
+ * Platform-independent properties shared across React and React Native
+ */
+export type ButtonPropsShared = {
+  /**
+   * Optional prop to control the variant of the Button
+   *
+   * @default ButtonVariant.Primary
+   */
+  variant?: ButtonVariant;
+};
diff --git a/packages/design-system-shared/src/types/Button/index.ts b/packages/design-system-shared/src/types/Button/index.ts
new file mode 100644
index 000000000..fd196331f
--- /dev/null
+++ b/packages/design-system-shared/src/types/Button/index.ts
@@ -0,0 +1 @@
+export { ButtonVariant, type ButtonPropsShared } from './Button.types';
diff --git a/packages/design-system-shared/src/types/ButtonBase/ButtonBase.types.ts b/packages/design-system-shared/src/types/ButtonBase/ButtonBase.types.ts
new file mode 100644
index 000000000..05ddb4ca1
--- /dev/null
+++ b/packages/design-system-shared/src/types/ButtonBase/ButtonBase.types.ts
@@ -0,0 +1,65 @@
+/**
+ * ButtonBase - size
+ * Convert from enum to const object (ADR-0003)
+ */
+export const ButtonBaseSize = {
+  /**
+   * Represents a small button size (32px).
+   */
+  Sm: 'sm',
+  /**
+   * Represents a medium button size (40px).
+   */
+  Md: 'md',
+  /**
+   * Represents a large button size (48px).
+   */
+  Lg: 'lg',
+} as const;
+export type ButtonBaseSize =
+  (typeof ButtonBaseSize)[keyof typeof ButtonBaseSize];
+
+export const ButtonSize = ButtonBaseSize;
+export type ButtonSize = ButtonBaseSize;
+
+export const ButtonHeroSize = ButtonBaseSize;
+export type ButtonHeroSize = ButtonBaseSize;
+
+/**
+ * ButtonBase component shared props (ADR-0004)
+ * Platform-independent properties shared across React and React Native
+ */
+export type ButtonBasePropsShared = {
+  /**
+   * Required prop for the content to be rendered within the ButtonBase
+   */
+  children: React.ReactNode;
+  /**
+   * Optional prop to control the size of the ButtonBase
+   *
+   * @default ButtonBaseSize.Lg
+   */
+  size?: ButtonBaseSize;
+  /**
+   * Optional prop that when true, shows a loading spinner
+   *
+   * @default false
+   */
+  isLoading?: boolean;
+  /**
+   * Optional prop for text to display when button is in loading state
+   */
+  loadingText?: string;
+  /**
+   * Optional prop that when true, disables the button
+   *
+   * @default false
+   */
+  isDisabled?: boolean;
+  /**
+   * Optional prop that when true, makes the button take up the full width of its container
+   *
+   * @default false
+   */
+  isFullWidth?: boolean;
+};
diff --git a/packages/design-system-shared/src/types/ButtonBase/index.ts b/packages/design-system-shared/src/types/ButtonBase/index.ts
new file mode 100644
index 000000000..883395feb
--- /dev/null
+++ b/packages/design-system-shared/src/types/ButtonBase/index.ts
@@ -0,0 +1,6 @@
+export {
+  ButtonBaseSize,
+  ButtonHeroSize,
+  ButtonSize,
+  type ButtonBasePropsShared,
+} from './ButtonBase.types';