diff --git a/example/.rnstorybook/stories/Molecules/Button/Button.stories.tsx b/example/.rnstorybook/stories/Molecules/Button/Button.stories.tsx
new file mode 100644
index 0000000..838095c
--- /dev/null
+++ b/example/.rnstorybook/stories/Molecules/Button/Button.stories.tsx
@@ -0,0 +1,116 @@
+import type { Meta, StoryObj } from '@storybook/react-native';
+import React, { useState } from 'react';
+import { View } from 'react-native';
+import { Button } from 'rubber-duck-ui';
+import { styles } from './Button.styles';
+
+const meta = {
+  title: 'Molecules/Button',
+  component: Button,
+  args: {
+    label: 'Button',
+    variant: 'primary',
+    size: 'md',
+    disabled: false,
+    isLoading: false,
+    onPress: () => {},
+  },
+  argTypes: {
+    label: { control: 'text' },
+    variant: {
+      control: 'select',
+      options: ['primary', 'secondary', 'outline', 'ghost', 'destructive'],
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+    },
+    disabled: { control: 'boolean' },
+    isLoading: { control: 'boolean' },
+    leftIcon: {
+      control: 'select',
+      options: [undefined, 'ArrowLeft', 'Plus', 'Check', 'Trash2'],
+    },
+    rightIcon: {
+      control: 'select',
+      options: [undefined, 'ArrowRight', 'Plus', 'Check', 'Trash2'],
+    },
+  },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const Variants: Story = {
+  render: (args) => (
+    <View style={styles.container}>
+      <Button {...args} variant="primary" label="Primary" />
+      <Button {...args} variant="secondary" label="Secondary" />
+      <Button {...args} variant="outline" label="Outline" />
+      <Button {...args} variant="ghost" label="Ghost" />
+      <Button {...args} variant="destructive" label="Destructive" />
+    </View>
+  ),
+};
+
+export const Sizes: Story = {
+  render: (args) => (
+    <View style={styles.container}>
+      <Button {...args} size="sm" label="Small" />
+      <Button {...args} size="md" label="Medium" />
+      <Button {...args} size="lg" label="Large" />
+    </View>
+  ),
+};
+
+export const Loading: Story = {
+  args: {
+    isLoading: true,
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+  },
+};
+
+export const WithIcons: Story = {
+  render: (args) => (
+    <View style={styles.container}>
+      <Button {...args} leftIcon="ArrowLeft" label="Back" />
+      <Button {...args} rightIcon="ArrowRight" label="Next" />
+      <Button {...args} leftIcon="Plus" rightIcon="ArrowRight" label="Add item" />
+    </View>
+  ),
+};
+
+export const Inline: Story = {
+  render: (args) => (
+    <View style={styles.inline}>
+      <Button {...args} />
+    </View>
+  ),
+};
+
+const InteractiveButton = (args: React.ComponentProps<typeof Button>) => {
+  const [loading, setLoading] = useState(false);
+
+  return (
+    <Button
+      {...args}
+      isLoading={loading}
+      onPress={() => {
+        setLoading(true);
+        setTimeout(() => setLoading(false), 2000);
+      }}
+    />
+  );
+};
+
+export const Interactive: Story = {
+  render: (args) => <InteractiveButton {...args} />,
+};
diff --git a/example/.rnstorybook/stories/Molecules/Button/Button.styles.ts b/example/.rnstorybook/stories/Molecules/Button/Button.styles.ts
new file mode 100644
index 0000000..48d498c
--- /dev/null
+++ b/example/.rnstorybook/stories/Molecules/Button/Button.styles.ts
@@ -0,0 +1,11 @@
+import { StyleSheet } from 'react-native';
+
+export const styles = StyleSheet.create({
+  container: {
+    gap: 16,
+  },
+  
+  inline: {
+    alignSelf: 'flex-start',
+  },
+});
diff --git a/src/components/Molecules/Button/__tests__/Button.test.tsx b/src/components/Molecules/Button/__tests__/Button.test.tsx
new file mode 100644
index 0000000..92ab995
--- /dev/null
+++ b/src/components/Molecules/Button/__tests__/Button.test.tsx
@@ -0,0 +1,70 @@
+import { render, screen, fireEvent } from '@testing-library/react-native';
+import { Button } from '../index';
+
+jest.mock('lucide-react-native', () => {
+  const React = require('react');
+  const { View } = require('react-native');
+  const mockIcon = (name: string) => (props: object) =>
+    React.createElement(View, { testID: `icon-${name}`, ...props });
+  return new Proxy({}, { get: (_t: object, name: string) => mockIcon(name) });
+});
+
+const baseProps = {
+  label: 'Press me',
+  onPress: jest.fn(),
+};
+
+describe('Button', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('Label', () => {
+    it('renders the label', () => {
+      render(<Button {...baseProps} />);
+      expect(screen.getByText('Press me')).toBeTruthy();
+    });
+  });
+
+  describe('Press behavior', () => {
+    it('calls onPress when pressed', () => {
+      const onPress = jest.fn();
+      render(<Button label="Press me" onPress={onPress} />);
+      fireEvent.press(screen.getByText('Press me'));
+      expect(onPress).toHaveBeenCalledTimes(1);
+    });
+
+    it('does not call onPress when disabled', () => {
+      const onPress = jest.fn();
+      render(<Button label="Press me" onPress={onPress} disabled />);
+      fireEvent.press(screen.getByText('Press me'));
+      expect(onPress).not.toHaveBeenCalled();
+    });
+
+    it('does not call onPress when isLoading', () => {
+      const onPress = jest.fn();
+      render(<Button label="Press me" onPress={onPress} isLoading testID="btn" />);
+      fireEvent.press(screen.getByTestId('btn'));
+      expect(onPress).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('Loading state', () => {
+    it('hides the label when isLoading is true', () => {
+      render(<Button {...baseProps} isLoading />);
+      expect(screen.queryByText('Press me')).toBeNull();
+    });
+  });
+
+  describe('Icons', () => {
+    it('renders the leftIcon when provided', () => {
+      render(<Button {...baseProps} leftIcon="ArrowLeft" />);
+      expect(screen.getByTestId('icon-ArrowLeft')).toBeTruthy();
+    });
+
+    it('renders the rightIcon when provided', () => {
+      render(<Button {...baseProps} rightIcon="ArrowRight" />);
+      expect(screen.getByTestId('icon-ArrowRight')).toBeTruthy();
+    });
+  });
+});
diff --git a/src/components/Molecules/Button/hooks/index.ts b/src/components/Molecules/Button/hooks/index.ts
new file mode 100644
index 0000000..872add6
--- /dev/null
+++ b/src/components/Molecules/Button/hooks/index.ts
@@ -0,0 +1 @@
+export * from './useButtonViewModel';
diff --git a/src/components/Molecules/Button/hooks/useButtonViewModel/index.ts b/src/components/Molecules/Button/hooks/useButtonViewModel/index.ts
new file mode 100644
index 0000000..793e8d3
--- /dev/null
+++ b/src/components/Molecules/Button/hooks/useButtonViewModel/index.ts
@@ -0,0 +1,28 @@
+import type { IButtonProps } from '../../types';
+import { useRubberDuckStore } from '../../../../../store';
+import { buildSize, buildVariantColors } from '../../library';
+
+export const useButtonViewModel = (props: IButtonProps) => {
+  const {
+    onPress,
+    disabled,
+    isLoading,
+    variant = 'primary',
+    size = 'md',
+  } = props;
+
+  const colors = useRubberDuckStore((s) => s.colors);
+  const sizes = buildSize(size);
+  const variantColors = buildVariantColors(variant, colors);
+
+  function onPressButton() {
+    if (disabled || isLoading) return;
+    onPress();
+  }
+
+  return { 
+    onPressButton, 
+    sizes, 
+    variantColors,
+  };
+};
diff --git a/src/components/Molecules/Button/index.tsx b/src/components/Molecules/Button/index.tsx
new file mode 100644
index 0000000..0dd861c
--- /dev/null
+++ b/src/components/Molecules/Button/index.tsx
@@ -0,0 +1,68 @@
+import type { IButtonProps } from './types';
+import React from 'react';
+import { TouchableOpacity, View } from 'react-native';
+import { useStyles } from './styles';
+import { useButtonViewModel } from './hooks';
+import { Text } from '../../Atoms/Text';
+import { Icon } from '../../Atoms/Icon';
+import { Loading } from '../../Atoms/Loading';
+
+export const Button: React.FC<IButtonProps> = (props) => {
+  const {
+    label,
+    leftIcon,
+    rightIcon,
+    isLoading,
+    disabled,
+    testID,
+  } = props;
+
+  const { onPressButton, sizes, variantColors } = useButtonViewModel(props);
+  const styles = useStyles(props, sizes, variantColors);
+
+  return (
+    <TouchableOpacity
+      testID={testID}
+      activeOpacity={disabled ? 1 : 0.7}
+      disabled={disabled || isLoading}
+      onPress={onPressButton}
+      style={styles.button}>
+      {isLoading
+        ?
+        <Loading 
+          size={sizes.loadingSize} 
+          color={variantColors.iconColor} 
+        />
+        :
+        <View style={styles.content}>
+          {leftIcon
+            ?
+            <Icon
+              icon={leftIcon}
+              size={sizes.iconSize}
+              color={variantColors.iconColor}
+            />
+            : null
+          }
+
+          <Text
+            size={sizes.fontSize}
+            weight="semibold"
+            color={variantColors.text}>
+            {label}
+          </Text>
+
+          {rightIcon
+            ?
+            <Icon
+              icon={rightIcon}
+              size={sizes.iconSize}
+              color={variantColors.iconColor}
+            />
+            : null
+          }
+        </View>
+      }
+    </TouchableOpacity>
+  );
+};
diff --git a/src/components/Molecules/Button/library/buildSize.ts b/src/components/Molecules/Button/library/buildSize.ts
new file mode 100644
index 0000000..8eeb347
--- /dev/null
+++ b/src/components/Molecules/Button/library/buildSize.ts
@@ -0,0 +1,45 @@
+import type { IconSize } from '../../../Atoms/Icon/types';
+import type { LoadingSize } from '../../../Atoms/Loading/types';
+import type { FONT_SIZES } from '../../../../tokens/typography';
+import type { ButtonSize } from '../types';
+import { Tokens } from '../../../../tokens/Tokens.class';
+
+export type ButtonSizeConfig = {
+  height: number;
+  paddingHorizontal: number;
+  fontSize: keyof typeof FONT_SIZES;
+  iconSize: IconSize;
+  loadingSize: LoadingSize;
+};
+
+export const buildSize = (size: ButtonSize): ButtonSizeConfig => {
+  switch (size) {
+    case 'sm':
+      return {
+        height: 36,
+        paddingHorizontal: Tokens.spacer({ key: 'sm' }),
+        fontSize: 'sm',
+        iconSize: 'small_16',
+        loadingSize: 'tiny_48',
+      };
+
+    case 'md':
+      return {
+        height: 44,
+        paddingHorizontal: Tokens.spacer({ key: 'md' }),
+        fontSize: 'md',
+        iconSize: 'tiny_20',
+        loadingSize: 'small_64',
+      };
+
+    case 'lg':
+    default:
+      return {
+        height: 52,
+        paddingHorizontal: Tokens.spacer({ key: 'lg' }),
+        fontSize: 'lg',
+        iconSize: 'tiny_20',
+        loadingSize: 'small_64',
+      };
+  }
+};
diff --git a/src/components/Molecules/Button/library/buildVariantColors.ts b/src/components/Molecules/Button/library/buildVariantColors.ts
new file mode 100644
index 0000000..a283b41
--- /dev/null
+++ b/src/components/Molecules/Button/library/buildVariantColors.ts
@@ -0,0 +1,54 @@
+import type { IColors } from '../../../../tokens/colors';
+import type { ButtonVariant } from '../types';
+
+export type ButtonVariantColors = {
+  background: string;
+  border: string;
+  text: keyof IColors;
+  iconColor: keyof IColors;
+};
+
+export const buildVariantColors = (variant: ButtonVariant, colors: IColors): ButtonVariantColors => {
+  switch (variant) {
+    case 'primary':
+      return {
+        background: colors.accent,
+        border: colors.accent,
+        text: 'black',
+        iconColor: 'black',
+      };
+
+    case 'secondary':
+      return {
+        background: colors.surface,
+        border: colors.borderDefault,
+        text: 'textPrimary',
+        iconColor: 'textPrimary',
+      };
+
+    case 'outline':
+      return {
+        background: 'transparent',
+        border: colors.borderDefault,
+        text: 'textPrimary',
+        iconColor: 'textPrimary',
+      };
+
+    case 'ghost':
+      return {
+        background: 'transparent',
+        border: 'transparent',
+        text: 'textPrimary',
+        iconColor: 'textPrimary',
+      };
+
+    case 'destructive':
+    default:
+      return {
+        background: colors.error,
+        border: colors.error,
+        text: 'textInverse',
+        iconColor: 'textInverse',
+      };
+  }
+};
diff --git a/src/components/Molecules/Button/library/index.ts b/src/components/Molecules/Button/library/index.ts
new file mode 100644
index 0000000..203a95b
--- /dev/null
+++ b/src/components/Molecules/Button/library/index.ts
@@ -0,0 +1,2 @@
+export * from './buildSize';
+export * from './buildVariantColors';
diff --git a/src/components/Molecules/Button/styles.ts b/src/components/Molecules/Button/styles.ts
new file mode 100644
index 0000000..08527eb
--- /dev/null
+++ b/src/components/Molecules/Button/styles.ts
@@ -0,0 +1,33 @@
+import type { IButtonProps } from './types';
+import type { ButtonSizeConfig, ButtonVariantColors } from './library';
+import { StyleSheet } from 'react-native';
+import { Tokens } from '../../../tokens/Tokens.class';
+
+export const useStyles = (
+  props: IButtonProps,
+  sizes: ButtonSizeConfig,
+  variantColors: ButtonVariantColors,
+) => {
+  const { variant = 'primary', disabled } = props;
+
+  return StyleSheet.create({
+    button: {
+      height: sizes.height,
+      paddingHorizontal: sizes.paddingHorizontal,
+      borderRadius: Tokens.radii({ key: 'md' }),
+      backgroundColor: variantColors.background,
+      borderWidth: variant === 'outline' ? 1 : 0,
+      borderColor: variantColors.border,
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+      opacity: disabled ? 0.5 : 1,
+    },
+    
+    content: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: Tokens.spacer({ key: 'xs' }),
+    },
+  });
+};
diff --git a/src/components/Molecules/Button/types/ButtonSize.ts b/src/components/Molecules/Button/types/ButtonSize.ts
new file mode 100644
index 0000000..a052696
--- /dev/null
+++ b/src/components/Molecules/Button/types/ButtonSize.ts
@@ -0,0 +1 @@
+export type ButtonSize = 'sm' | 'md' | 'lg';
diff --git a/src/components/Molecules/Button/types/ButtonVariant.ts b/src/components/Molecules/Button/types/ButtonVariant.ts
new file mode 100644
index 0000000..b1dc08c
--- /dev/null
+++ b/src/components/Molecules/Button/types/ButtonVariant.ts
@@ -0,0 +1,6 @@
+export type ButtonVariant = 
+  | 'primary' 
+  | 'secondary' 
+  | 'outline' 
+  | 'ghost' 
+  | 'destructive';
diff --git a/src/components/Molecules/Button/types/IButtonProps.ts b/src/components/Molecules/Button/types/IButtonProps.ts
new file mode 100644
index 0000000..fa21d1e
--- /dev/null
+++ b/src/components/Molecules/Button/types/IButtonProps.ts
@@ -0,0 +1,15 @@
+import type { IconName } from '../../../Atoms/Icon/types';
+import type { ButtonVariant } from './ButtonVariant';
+import type { ButtonSize } from './ButtonSize';
+
+export interface IButtonProps {
+  label: string;
+  onPress: () => void;
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  disabled?: boolean;
+  isLoading?: boolean;
+  leftIcon?: IconName;
+  rightIcon?: IconName;
+  testID?: string;
+}
diff --git a/src/components/Molecules/Button/types/index.ts b/src/components/Molecules/Button/types/index.ts
new file mode 100644
index 0000000..1b72ae9
--- /dev/null
+++ b/src/components/Molecules/Button/types/index.ts
@@ -0,0 +1,3 @@
+export * from './ButtonSize';
+export * from './ButtonVariant';
+export * from './IButtonProps';
diff --git a/src/components/Molecules/index.ts b/src/components/Molecules/index.ts
index 68528a4..5e5613a 100644
--- a/src/components/Molecules/index.ts
+++ b/src/components/Molecules/index.ts
@@ -1,3 +1,4 @@
+export * from './Button';
 export * from './CheckBox';
 export * from './RadioButton';
 export * from './Avatar';