MetaMask · cursor · Apr 8, 2026
@@ -1,3 +1,5 @@
+import type { TextButtonPropsShared } from '@metamask/design-system-shared';
+
 import type { TextProps } from '../Text';
 
 /**
@@ -7,13 +9,10 @@ import type { TextProps } from '../Text';
 export type TextButtonProps = Omit<
   TextProps,
   'children' | 'color' | 'onPress'
-> & {
-  /**
-   * Content shown as the label.
-   */
-  children: React.ReactNode;
-  /**
-   * Called when the user presses the label. Primary interaction for this control.
-   */
-  onPress?: TextProps['onPress'];
-};
+> &
+  TextButtonPropsShared & {
+    /**
+     * Called when the user presses the label. Primary interaction for this control.
+     */
+    onPress?: TextProps['onPress'];
+  };
@@ -1,2 +1,3 @@
+export { TextButtonSize } from '@metamask/design-system-shared';
 export { TextButton } from './TextButton';
 export type { TextButtonProps } from './TextButton.types';
@@ -166,7 +166,7 @@ export type { SensitiveTextProps } from './SensitiveText';
 export { TabEmptyState } from './TabEmptyState';
 export type { TabEmptyStateProps } from './TabEmptyState';
 
-export { TextButton } from './TextButton';
+export { TextButton, TextButtonSize } from './TextButton';
 export type { TextButtonProps } from './TextButton';
 
 export {

@@ -1,4 +1,5 @@
-import { TextButtonSize } from '../../types';
+import { TextButtonSize } from '@metamask/design-system-shared';
+
 import { TextVariant } from '../Text';
 
 export const MAP_TEXTBUTTON_SIZE_TEXTVARIANT: Record<

@@ -1,7 +1,7 @@
+import { TextButtonSize } from '@metamask/design-system-shared';
 import type { Meta, StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { TextButtonSize } from '../../types';
 import { IconName } from '../Icon';
 import { Text, TextVariant } from '../Text';
 
@@ -114,7 +114,7 @@ export const AsChild: Story = {
 
 export const IsInverse: Story = {
   render: (args) => (
-    <div className="rounded bg-primary-default p-4">
+    <div className="bg-primary-default rounded p-4">
       <TextButton {...args} isInverse>
         Inverse Button
       </TextButton>

@@ -1,7 +1,7 @@
+import { TextButtonSize } from '@metamask/design-system-shared';
 import { render, screen } from '@testing-library/react';
 import React from 'react';
 
-import { TextButtonSize } from '../../types';
 import { IconName } from '../Icon';
 import { Text, TextVariant } from '../Text';
 

@@ -1,6 +1,6 @@
+import { TextButtonSize } from '@metamask/design-system-shared';
 import React, { forwardRef } from 'react';
 
-import { TextButtonSize } from '../../types';
 import { twMerge } from '../../utils/tw-merge';
 import { ButtonBase } from '../ButtonBase';
 
@@ -30,11 +30,11 @@ export const TextButton = forwardRef<HTMLButtonElement, TextButtonProps>(
       // Hover/Active states - only applied when interactive
       !isDisabled && [
         !isInverse && [
-          'hover:text-primary-default-hover hover:underline hover:decoration-primary-default-hover hover:decoration-2 hover:underline-offset-4',
+          'hover:text-primary-default-hover hover:decoration-primary-default-hover hover:underline hover:decoration-2 hover:underline-offset-4',
           'active:text-primary-default-pressed active:decoration-primary-default-pressed',
         ],
         isInverse && [
-          'hover:text-primary-inverse hover:underline hover:decoration-primary-inverse hover:decoration-2 hover:underline-offset-4',
+          'hover:text-primary-inverse hover:decoration-primary-inverse hover:underline hover:decoration-2 hover:underline-offset-4',
           'active:text-primary-inverse active:decoration-primary-inverse',
         ],
       ],

@@ -1,4 +1,8 @@
-import type { TextButtonSize } from '../../types';
+import type {
+  TextButtonPropsShared,
+  TextButtonSize,
+} from '@metamask/design-system-shared';
+
 import type { ButtonBaseProps } from '../ButtonBase';
 
 export type TextButtonProps = Omit<
@@ -11,32 +15,27 @@ export type TextButtonProps = Omit<
   | 'loadingTextProps'
   | 'style'
   | 'size'
-> & {
-  /**
-   * Optional prop for additional CSS classes to be applied to the TextButton component
-   */
-  className?: string;
-  /**
-   * Optional prop that when true, applies inverse styling to the button
-   *
-   * @default false
-   */
-  isInverse?: boolean;
-  /**
-   * Optional prop that when true, disables the button
-   *
-   * @default false
-   */
-  isDisabled?: boolean;
-  /**
-   * Optional prop to specify the size of the TextButton
-   *
-   * @default TextButtonSize.BodyMd
-   */
-  size?: TextButtonSize;
-  /**
-   * 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;
-};
+> &
+  TextButtonPropsShared & {
+    /**
+     * Optional prop for additional CSS classes to be applied to the TextButton component
+     */
+    className?: string;
+    /**
+     * Optional prop that when true, applies inverse styling to the button
+     *
+     * @default false
+     */
+    isInverse?: boolean;
+    /**
+     * Optional prop to specify the size of the TextButton
+     *
+     * @default TextButtonSize.BodyMd
+     */
+    size?: TextButtonSize;
+    /**
+     * 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;
+  };
@@ -1,3 +1,3 @@
-export { TextButtonSize } from '../../types';
+export { TextButtonSize } from '@metamask/design-system-shared';
 export { TextButton } from './TextButton';
 export type { TextButtonProps } from './TextButton.types';
@@ -430,16 +430,6 @@ export enum FontFamily {
   Hero = 'font-hero',
 }
 
-/**
- * TextButton - size
- */
-export enum TextButtonSize {
-  BodyLg = 'body-lg',
-  BodyMd = 'body-md',
-  BodySm = 'body-sm',
-  BodyXs = 'body-xs',
-}
-
 /**
  * Icon - size
  */

@@ -68,3 +68,6 @@ export {
   AvatarAccountVariant,
   type AvatarAccountPropsShared,
 } from './types/AvatarAccount';
+
+// TextButton types (ADR-0003 + ADR-0004)
+export { TextButtonSize, type TextButtonPropsShared } from './types/TextButton';
@@ -0,0 +1,43 @@
+import type { ReactNode } from 'react';
+
+/**
+ * TextButton - size
+ * Convert from enum to const object (ADR-0003)
+ */
+export const TextButtonSize = {
+  /**
+   * Large body text size
+   */
+  BodyLg: 'body-lg',
+  /**
+   * Medium body text size (default)
+   */
+  BodyMd: 'body-md',
+  /**
+   * Small body text size
+   */
+  BodySm: 'body-sm',
+  /**
+   * Extra small body text size
+   */
+  BodyXs: 'body-xs',
+} as const;
+export type TextButtonSize =
+  (typeof TextButtonSize)[keyof typeof TextButtonSize];
+
+/**
+ * TextButton component shared props (ADR-0004)
+ * Platform-independent properties shared across React and React Native
+ */
+export type TextButtonPropsShared = {
+  /**
+   * The content to be rendered within the TextButton.
+   */
+  children: ReactNode;
+  /**
+   * Optional prop that when true, disables the button.
+   *
+   * @default false
+   */
+  isDisabled?: boolean;
+};
@@ -0,0 +1 @@
+export { TextButtonSize, type TextButtonPropsShared } from './TextButton.types';
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { TextButtonSize, type TextButtonPropsShared } from './TextButton.types';