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
new file mode 100644
--- /dev/null
+++ b/packages/design-system-react-native/src/components/ButtonHero/ButtonHero.stories.tsx
@@ -1,0 +1,119 @@
+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> = {
+  title: 'Components/ButtonHero',
+  component: ButtonHero,
+  argTypes: {
+    children: {
+      control: 'text',
+      description:
+        'Required prop for the content to be rendered within the ButtonHero',
+    },
+    size: {
+      control: 'select',
+      options: Object.keys(ButtonHeroSize),
+      mapping: ButtonHeroSize,
+      description: 'Optional prop to control the size of the ButtonHero',
+    },
+    isFullWidth: {
+      control: 'boolean',
+      description:
+        'Optional prop that when true, makes the button take up the full width of its container',
+    },
+    isLoading: {
+      control: 'boolean',
+      description: 'Optional prop that when true, shows a loading spinner',
+    },
+    loadingText: {
+      control: 'text',
+      description:
+        'Optional prop for text to display when button is in loading state',
+    },
+    startIconName: {
+      control: 'select',
+      options: Object.keys(IconName),
+      mapping: IconName,
+      description:
+        'Optional prop to specify an icon to show at the start of the button',
+    },
+    endIconName: {
+      control: 'select',
+      options: Object.keys(IconName),
+      mapping: IconName,
+      description:
+        'Optional prop to specify an icon to show at the end of the button',
+    },
+    isDisabled: {
+      control: 'boolean',
+      description: 'Optional prop that when true, disables the button',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ButtonHero>;
+
+export const Default: Story = {
+  args: {
+    children: 'Primary Action',
+  },
+};
+
+export const Size: Story = {
+  render: (args) => (
+    <View style={{ gap: 8 }}>
+      <ButtonHero {...args} size={ButtonHeroSize.Sm}>
+        Small
+      </ButtonHero>
+      <ButtonHero {...args} size={ButtonHeroSize.Md}>
+        Medium
+      </ButtonHero>
+      <ButtonHero {...args} size={ButtonHeroSize.Lg}>
+        Large
+      </ButtonHero>
+    </View>
+  ),
+};
+
+export const IsFullWidth: Story = {
+  args: {
+    children: 'Full Width',
+    isFullWidth: true,
+  },
+};
+
+export const StartIconName: Story = {
+  args: {
+    children: 'Start Icon',
+    startIconName: IconName.AddSquare,
+  },
+};
+
+export const EndIconName: Story = {
+  args: {
+    children: 'End Icon',
+    endIconName: IconName.AddSquare,
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    children: 'Disabled Button',
+    isDisabled: true,
+  },
+};
+
+export const Loading: Story = {
+  args: {
+    children: 'Submit this form',
+    isLoading: true,
+    loadingText: 'Submitting...',
+  },
+};

diff --git a/packages/design-system-react-native/src/components/ButtonHero/ButtonHero.test.tsx b/packages/design-system-react-native/src/components/ButtonHero/ButtonHero.test.tsx
new file mode 100644
--- /dev/null
+++ b/packages/design-system-react-native/src/components/ButtonHero/ButtonHero.test.tsx
@@ -1,0 +1,168 @@
+import { render, fireEvent } from '@testing-library/react-native';
+import React from 'react';
+
+import { ButtonHero } from './ButtonHero';
+
+describe('ButtonHero', () => {
+  it('renders children correctly', () => {
+    const { getByText } = render(<ButtonHero>Button Hero</ButtonHero>);
+    expect(getByText('Button Hero')).toBeDefined();
+  });
+
+  it('renders as a button with correct accessibility role', () => {
+    const { getByRole } = render(<ButtonHero>Click me</ButtonHero>);
+    const button = getByRole('button');
+    expect(button).toBeDefined();
+  });
+
+  it('handles press events', () => {
+    const handlePress = jest.fn();
+    const { getByRole } = render(
+      <ButtonHero onPress={handlePress}>Click me</ButtonHero>,
+    );
+
+    const button = getByRole('button');
+    fireEvent.press(button);
+
+    expect(handlePress).toHaveBeenCalledTimes(1);
+  });
+
+  it('handles disabled state correctly', () => {
+    const handlePress = jest.fn();
+    const { getByRole } = render(
+      <ButtonHero isDisabled onPress={handlePress}>
+        Disabled Button
+      </ButtonHero>,
+    );
+
+    const button = getByRole('button');
+    expect(button.props.accessibilityState).toMatchObject({ disabled: true });
+  });
+
+  it('handles loading state correctly', () => {
+    const { getByRole, getByTestId } = render(
+      <ButtonHero isLoading loadingText="Loading...">
+        Loading Button
+      </ButtonHero>,
+    );
+
+    const button = getByRole('button');
+    expect(button.props.accessibilityState).toMatchObject({
+      disabled: true,
+      busy: true,
+    });
+    expect(button.props.accessibilityLabel).toBe('Loading...');
+    expect(getByTestId('spinner-container')).toBeDefined();
+  });
+
+  it('displays loading text when provided', () => {
+    const { getByText } = render(
+      <ButtonHero isLoading loadingText="Please wait...">
+        Submit
+      </ButtonHero>,
+    );
+
+    expect(getByText('Please wait...')).toBeDefined();
+  });
+
+  it('uses light theme colors regardless of app theme', () => {
+    const { getByRole } = render(<ButtonHero>Hero Button</ButtonHero>);
+    const button = getByRole('button');
+    expect(button).toBeDefined();
+    // The ThemeProvider wraps the button with light theme
+    // Actual color values are applied via Tailwind classes
+  });
+
+  it('passes accessibility props correctly', () => {
+    const { getByTestId } = render(
+      <ButtonHero
+        testID="hero-btn"
+        accessibilityLabel="Primary action"
+        accessibilityHint="Performs the main action"
+      >
+        Hero
+      </ButtonHero>,
+    );
+
+    const btn = getByTestId('hero-btn');
+    expect(btn.props.accessibilityLabel).toBe('Primary action');
+    expect(btn.props.accessibilityHint).toBe('Performs the main action');
+    expect(btn.props.accessibilityRole).toBe('button');
+  });
+
+  it('supports isFullWidth prop', () => {
+    const { getByRole } = render(
+      <ButtonHero isFullWidth testID="full-width-btn">
+        Full Width
+      </ButtonHero>,
+    );
+
+    const button = getByRole('button');
+    expect(button).toBeDefined();
+  });
+
+  it('supports startIconName prop', () => {
+    const { getByRole } = render(
+      <ButtonHero startIconName="Add">With Start Icon</ButtonHero>,
+    );
+
+    const button = getByRole('button');
+    expect(button).toBeDefined();
+  });
+
+  it('supports endIconName prop', () => {
+    const { getByRole } = render(
+      <ButtonHero endIconName="ArrowRight">With End Icon</ButtonHero>,
+    );
+
+    const button = getByRole('button');
+    expect(button).toBeDefined();
+  });
+
+  it('applies pressed styles when interactive', () => {
+    const handlePress = jest.fn();
+    const { getByRole } = render(
+      <ButtonHero onPress={handlePress}>Press Me</ButtonHero>,
+    );
+
+    const button = getByRole('button');
+
+    // Simulate press in to trigger pressed state
+    fireEvent(button, 'pressIn');
+
+    // The component should render with pressed styles applied
+    expect(button).toBeDefined();
+  });
+
+  it('does not apply pressed styles when disabled', () => {
+    const handlePress = jest.fn();
+    const { getByRole } = render(
+      <ButtonHero isDisabled onPress={handlePress}>
+        Press Me
+      </ButtonHero>,
+    );
+
+    const button = getByRole('button');
+
+    // Simulate press in - should not trigger pressed styles when disabled
+    fireEvent(button, 'pressIn');
+
+    expect(button).toBeDefined();
+  });
+
+  it('does not apply pressed styles when loading', () => {
+    const handlePress = jest.fn();
+    const { getByRole } = render(
+      <ButtonHero isLoading loadingText="Loading..." onPress={handlePress}>
+        Press Me
+      </ButtonHero>,
+    );
+
+    const button = getByRole('button');
+
+    // Simulate press in - should not trigger pressed styles when loading
+    fireEvent(button, 'pressIn');
+
+    expect(button).toBeDefined();
+  });
+});

diff --git a/packages/design-system-react-native/src/components/ButtonHero/ButtonHero.tsx b/packages/design-system-react-native/src/components/ButtonHero/ButtonHero.tsx
new file mode 100644
--- /dev/null
+++ b/packages/design-system-react-native/src/components/ButtonHero/ButtonHero.tsx
@@ -1,0 +1,63 @@
+import { Theme, ThemeProvider } from '@metamask/design-system-twrnc-preset';
+import React from 'react';
+
+import { ButtonBase } from '../ButtonBase';
+
+import type { ButtonHeroProps } from './ButtonHero.types';
+
+/**
+ * Inner component that uses the locked light theme from ThemeProvider
+ *
+ * @param options0 - Component props
+ * @param options0.isDisabled - Whether the button is disabled
+ * @param options0.isLoading - Whether the button is in a loading state
+ * @returns ButtonBase component with locked light theme styles
+ */
+const ButtonHeroInner: React.FC<ButtonHeroProps> = (props) => {
+  const {
+    isDisabled,
+    isLoading,
+    // Exclude styling props from spread to avoid consumer overrides
+    twClassName = '',
+    textClassName: _ignoredTextClassName,
+    iconClassName: _ignoredIconClassName,
+    ...restProps
+  } = props;
+
+  const getContainerClassName = (pressed: boolean): string => {
+    const userClassName =
+      typeof twClassName === 'function' ? twClassName(pressed) : twClassName;
+
+    const baseClassName = `bg-primary-default ${
+      pressed && !isDisabled && !isLoading ? 'bg-primary-default-pressed' : ''
+    }`;
+
+    return `${baseClassName} ${userClassName}`.trim();
+  };
+
+  return (
+    <ButtonBase
+      twClassName={getContainerClassName}
+      textClassName={() => 'text-primary-inverse'}
+      iconClassName={() => 'text-primary-inverse'}
+      isDisabled={isDisabled}
+      isLoading={isLoading}
+      {...restProps}
+    />
+  );
+};
+
+/**
+ * ButtonHero component - Hero button with locked light theme
+ *
+ * Used for primary marketing and call-to-action use cases.
+ * The button is locked to light theme colors regardless of the app's theme setting.
+ *
+ * @param props - ButtonHero props extending ButtonBaseProps
+ * @returns ButtonHero component wrapped in light ThemeProvider
+ */
+export const ButtonHero: React.FC<ButtonHeroProps> = (props) => (
+  <ThemeProvider theme={Theme.Light}>
+    <ButtonHeroInner {...props} />
+  </ThemeProvider>
+);

diff --git a/packages/design-system-react-native/src/components/ButtonHero/ButtonHero.types.ts b/packages/design-system-react-native/src/components/ButtonHero/ButtonHero.types.ts
new file mode 100644
--- /dev/null
+++ b/packages/design-system-react-native/src/components/ButtonHero/ButtonHero.types.ts
@@ -1,0 +1,3 @@
+import type { ButtonBaseProps } from '../ButtonBase';
+
+export type ButtonHeroProps = ButtonBaseProps;

diff --git a/packages/design-system-react-native/src/components/ButtonHero/README.md b/packages/design-system-react-native/src/components/ButtonHero/README.md
new file mode 100644
--- /dev/null
+++ b/packages/design-system-react-native/src/components/ButtonHero/README.md
@@ -1,0 +1,214 @@
+# ButtonHero
+
+A branded, high-impact button reserved for the most important actions in Trade. Use sparingly for key user actions that require emphasis and visual prominence.
+
+Use for:
+
+- Swapping tokens
+- Claiming winnings (e.g., Polymarket bets)
+- Claiming rewards
+- Other critical, high-value actions
+
+## Usage
+
+```tsx
+import { ButtonHero } from '@metamask/design-system-react-native';
+
+<ButtonHero>Button Hero</ButtonHero>;
+```
+
+## Props
+
+### `children`
+
+**Required prop** for the content to be rendered within the ButtonHero.
+
+| TYPE              | REQUIRED | DEFAULT     |
+| ----------------- | -------- | ----------- |
+| `React.ReactNode` | Yes      | `undefined` |
+
+#### Example
+
+```tsx
+<ButtonHero>Primary Action</ButtonHero>
+```
+
+### `size`
+
+ButtonHero supports three sizes.
+
+Available sizes:
+
+- `ButtonHeroSize.Sm` (32px)
+- `ButtonHeroSize.Md` (40px)
+- `ButtonHeroSize.Lg` (48px)
+
+| TYPE             | REQUIRED | DEFAULT             |
+| ---------------- | -------- | ------------------- |
+| `ButtonHeroSize` | No       | `ButtonHeroSize.Lg` |
+
+#### Example
+
+```tsx
+import { ButtonHero, ButtonHeroSize } from '@metamask/design-system-react-native';
+
+<ButtonHero size={ButtonHeroSize.Sm}>Small</ButtonHero>
+<ButtonHero size={ButtonHeroSize.Md}>Medium</ButtonHero>
+<ButtonHero size={ButtonHeroSize.Lg}>Large</ButtonHero>
+```
+
+### `isFullWidth`
+
+ButtonHero can be set to take up the full width of its container.
+
+| TYPE      | REQUIRED | DEFAULT |
+| --------- | -------- | ------- |
+| `boolean` | No       | `false` |
+
+#### Example
+
+```tsx
+<ButtonHero isFullWidth>Full Width Button</ButtonHero>
+```
+
+### `startIconName`
+
+ButtonHero can display an icon at the start of the button.
+
+| TYPE       | REQUIRED | DEFAULT     |
+| ---------- | -------- | ----------- |
+| `IconName` | No       | `undefined` |
+
+#### Example
+
+```tsx
+import { ButtonHero, IconName } from '@metamask/design-system-react-native';
+
+<ButtonHero startIconName={IconName.AddSquare}>Start Icon</ButtonHero>;
+```
+
+### `endIconName`
+
+ButtonHero can display an icon at the end of the button.
+
+| TYPE       | REQUIRED | DEFAULT     |
+| ---------- | -------- | ----------- |
+| `IconName` | No       | `undefined` |
+
+#### Example
+
+```tsx
+import { ButtonHero, IconName } from '@metamask/design-system-react-native';
+
+<ButtonHero endIconName={IconName.ArrowRight}>End Icon</ButtonHero>;
+```
+
+### `isDisabled`
+
+Whether the button is disabled.
+
+| TYPE      | REQUIRED | DEFAULT |
+| --------- | -------- | ------- |
+| `boolean` | No       | `false` |
+
+#### Example
+
+```tsx
+<ButtonHero isDisabled>Disabled Button</ButtonHero>
+```
+
+### `isLoading`
+
+Whether the button is in a loading state.
+
+| TYPE      | REQUIRED | DEFAULT |
+| --------- | -------- | ------- |
+| `boolean` | No       | `false` |
+
+#### Example
+
+```tsx
+<ButtonHero isLoading loadingText="Loading...">
+  Loading Button
+</ButtonHero>
+```
+
+### `loadingText`
+
+Optional text to display when button is in loading state.
+
+| TYPE     | REQUIRED | DEFAULT     |
+| -------- | -------- | ----------- |
+| `string` | No       | `undefined` |
+
+#### Example
+
+```tsx
+<ButtonHero isLoading loadingText="Submitting...">
+  Submit Form
+</ButtonHero>
+```
+
+### `onPress`
+
+Callback function invoked when the button is pressed.
+
+| TYPE         | REQUIRED | DEFAULT     |
+| ------------ | -------- | ----------- |
+| `() => void` | No       | `undefined` |
+
+#### Example
+
+```tsx
+<ButtonHero onPress={() => console.log('Button pressed')}>Press Me</ButtonHero>
+```
+
+### `twClassName`
+
+Use the `twClassName` prop to add custom Tailwind classes to the component.
+
+| TYPE     | REQUIRED | DEFAULT     |
+| -------- | -------- | ----------- |
+| `string` | No       | `undefined` |
+
+#### Example
+
+```tsx
+<ButtonHero twClassName="mb-4">Custom Styled Button</ButtonHero>
+```
+
+## Accessibility
+
+ButtonHero includes built-in accessibility features:
+
+- **Role**: Automatically set to `button`
+- **Accessibility Label**: Auto-generated from children or `loadingText` when loading
+- **Accessibility State**: Reflects disabled and loading states
+- **Accessibility Hint**: Auto-generated for loading state
+
+### Custom Accessibility Props
+
+You can override the default accessibility behavior:
+
+```tsx
+<ButtonHero
+  accessibilityLabel="Primary action"
+  accessibilityHint="Performs the main action"
+>
+  Hero Button
+</ButtonHero>
+```
+
+## Theme
+
+ButtonHero is **locked to light theme** colors regardless of the app's theme setting. It uses:
+
+- Background: `bg-primary-default` (light theme)
+- Text: `text-primary-inverse` (light theme)
+- Pressed: `bg-primary-default-pressed` (light theme)
+
+This ensures consistent branding for high-impact actions across different theme modes.
+
+## References
+
+[MetaMask Design System Guides](https://www.notion.so/MetaMask-Design-System-Guides-Design-f86ecc914d6b4eb6873a122b83c12940)

diff --git a/packages/design-system-react-native/src/components/ButtonHero/index.ts b/packages/design-system-react-native/src/components/ButtonHero/index.ts
new file mode 100644
--- /dev/null
+++ b/packages/design-system-react-native/src/components/ButtonHero/index.ts
@@ -1,0 +1,3 @@
+export { ButtonHero } from './ButtonHero';
+export type { ButtonHeroProps } from './ButtonHero.types';
+export { ButtonHeroSize } from '../../types';

diff --git a/packages/design-system-react-native/src/components/index.ts b/packages/design-system-react-native/src/components/index.ts
--- a/packages/design-system-react-native/src/components/index.ts
+++ b/packages/design-system-react-native/src/components/index.ts
@@ -140,3 +140,6 @@
   ToastLinkButtonOptions,
   ToastCloseButtonOptions,
 } from './Toast';
+
+export { ButtonHero, ButtonHeroSize } from './ButtonHero';
+export type { ButtonHeroProps } from './ButtonHero';

diff --git a/packages/design-system-react-native/src/types/index.ts b/packages/design-system-react-native/src/types/index.ts
--- a/packages/design-system-react-native/src/types/index.ts
+++ b/packages/design-system-react-native/src/types/index.ts
@@ -322,6 +322,7 @@
 export { ButtonBaseSize as ButtonPrimarySize };
 export { ButtonBaseSize as ButtonSecondarySize };
 export { ButtonBaseSize as ButtonTertiarySize };
+export { ButtonBaseSize as ButtonHeroSize };
 
 /**
  * Button - variant