diff --git a/.ondevice/storybook.requires.js b/.ondevice/storybook.requires.js
index 59b7e1d..d808394 100644
--- a/.ondevice/storybook.requires.js
+++ b/.ondevice/storybook.requires.js
@@ -48,7 +48,7 @@ try {
 const getStories = () => {
 	return {
 		'./storybook/stories/Avatar/Avatar.stories.js': require('../storybook/stories/Avatar/Avatar.stories.js'),
-		'./storybook/stories/BaseButton/BaseButton.stories.js': require('../storybook/stories/BaseButton/BaseButton.stories.js'),
+		'./storybook/stories/Button/Button.stories.js': require('../storybook/stories/Button/Button.stories.js'),
 		'./storybook/stories/Carousel/Carousel.stories.js': require('../storybook/stories/Carousel/Carousel.stories.js'),
 		'./storybook/stories/CheckBox/CheckBox.stories.js': require('../storybook/stories/CheckBox/CheckBox.stories.js'),
 		'./storybook/stories/DesignStystem/Colors.stories.js': require('../storybook/stories/DesignStystem/Colors.stories.js'),
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
index 2b28e9d..22ea202 100644
--- a/.storybook/preview-head.html
+++ b/.storybook/preview-head.html
@@ -15,6 +15,11 @@
      font-style: normal;
      font-weight: normal;
    }
+
+  #story--components-button--camera-button-props svg {
+    stroke: #2979FF;
+    overflow: visible;
+  }
 </style>
  
  
diff --git a/env.json b/env.json
index 4e60c2c..f1e5770 100644
--- a/env.json
+++ b/env.json
@@ -1 +1 @@
-{"LOAD_STORYBOOK": true, "WEB_MODE": false}
\ No newline at end of file
+{"LOAD_STORYBOOK": false, "WEB_MODE": false}
\ No newline at end of file
diff --git a/src/components/BaseButton/index.test.tsx b/src/components/BaseButton/index.test.tsx
index 0806874..565f4b5 100644
--- a/src/components/BaseButton/index.test.tsx
+++ b/src/components/BaseButton/index.test.tsx
@@ -1,19 +1,15 @@
 import React from 'react';
 import {create} from 'react-test-renderer';
-import {Text, View} from 'react-native';
-import {palette} from '../../theme/palette';
+import {View, Text} from 'react-native';
 import BaseButton from './';
 
 const validData = {
-	title: 'test title',
-	icon: 'plus_circle',
-	iconRight: true,
-	disabled: true,
 	borderRadius: 15,
-	pressedColor: palette.success.main,
-	style: {backgroundColor: palette.black.main},
-	iconStyle: {backgroundColor: palette.black.main},
-	textStyle: {color: palette.black.main},
+	children: (
+		<View>
+			<Text>Button</Text>
+		</View>
+	),
 };
 
 describe('BaseButton Component', () => {
@@ -24,56 +20,12 @@ describe('BaseButton Component', () => {
 		});
 	});
 
-	describe('render correctly when has minimum props needed, example', () => {
-		it('title', () => {
-			const {toJSON} = create(<BaseButton title={validData.title} />);
-			expect(toJSON()).toBeTruthy();
-		});
-
-		it('icon', () => {
-			const {toJSON} = create(<BaseButton icon={validData.icon} />);
-			expect(toJSON()).toBeTruthy();
-		});
-
-		it('children', () => {
-			const {toJSON} = create(
-				<BaseButton>
-					<View>
-						<Text>Valid Children</Text>
-					</View>
-				</BaseButton>
-			);
-			expect(toJSON()).toBeTruthy();
-		});
-	});
-
-	describe('Icon', () => {
-		it('is renders right icon when iconRight prop is true', () => {
-			const {toJSON} = create(
-				<BaseButton title={validData.title} icon={validData.icon} iconRight={validData.iconRight} />
-			);
-			expect(toJSON()).toBeTruthy();
-		});
-
-		it('is renders left icon when iconRight prop is not passed', () => {
-			const {toJSON} = create(<BaseButton title={validData.title} icon={validData.icon} />);
-			expect(toJSON()).toBeTruthy();
-		});
-	});
-
-	describe('pressedColor', () => {
-		it('it changes when pressedColor props is an string color format', () => {
-			const {toJSON} = create(
-				<BaseButton title={validData.title} pressedColor={validData.pressedColor} />
+	describe('render correctly when has minimum props needed', () => {
+		it('when hasnt minimum props needed', () => {
+			const {root} = create(
+				<BaseButton borderRadius={validData.borderRadius}>{validData.children}</BaseButton>
 			);
-			expect(toJSON()).toBeTruthy();
-		});
-	});
-
-	describe('is disabled', () => {
-		it('when disabled props is true', () => {
-			const {toJSON} = create(<BaseButton title={validData.title} disabled={validData.disabled} />);
-			expect(toJSON()).toBeTruthy();
+			expect(root).toBeTruthy();
 		});
 	});
 });
diff --git a/src/components/BaseButton/index.tsx b/src/components/BaseButton/index.tsx
index 8472ab5..9fdc1b3 100644
--- a/src/components/BaseButton/index.tsx
+++ b/src/components/BaseButton/index.tsx
@@ -1,98 +1,44 @@
-import React, {FC} from 'react';
-import {Pressable, PressableProps, ViewStyle, StyleSheet, TextStyle} from 'react-native';
-import {moderateScale, horizontalScale, scaledForDevice} from '../../scale';
-import {palette} from '../../theme/palette';
-import Text from '../Text';
-import Icon from '../Icon';
+import React, {FC, ReactNode} from 'react';
+import {Pressable, PressableProps, StyleSheet} from 'react-native';
+import {moderateScale, scaledForDevice} from '../../scale';
 
-interface PressableStyleProp {
-	pressed: boolean;
-}
-
-interface BaseButtonProps extends PressableProps {
-	title?: string | null;
-	icon?: string;
-	iconRight?: boolean;
-	disabled?: boolean;
+export interface BaseButtonProps extends PressableProps {
 	borderRadius?: number;
-	pressedColor?: string;
-	style?: ViewStyle;
-	iconStyle?: ViewStyle;
-	textStyle?: TextStyle;
-	children?: React.ReactNode;
+	children?: ReactNode | null;
+	pressedStyle?: ReactNode;
+	style?: any;
 }
 
 const BaseButton: FC<BaseButtonProps> = ({
-	title = null,
-	icon = null,
-	iconRight = false,
-	disabled = false,
 	borderRadius = 0,
-	pressedColor,
-	style,
-	iconStyle,
-	textStyle,
 	children = null,
+	style,
+	pressedStyle,
 	...props
 }) => {
-	if (!title && !icon && !children) {
+	if (!children) {
 		return null;
 	}
 
-	const bgColor = !disabled ? palette.primary.main : palette.grey[200];
-	const iconPaddingLeft = iconRight && title ? 8 : 0;
-	const iconPaddingRight = !iconRight && title ? 8 : 0;
-
-	const validatePaddingVertical = scaledForDevice(10, moderateScale);
-	const validatePaddingHorizontal = scaledForDevice(16, horizontalScale);
-	const validateFontSize = scaledForDevice(14, moderateScale);
 	const validateBorderRadius = scaledForDevice(borderRadius, moderateScale);
-	const validatePaddingRightIcon = scaledForDevice(iconPaddingRight, horizontalScale);
-	const validatePaddingLeftIcon = scaledForDevice(iconPaddingLeft, horizontalScale);
 
 	const styles = StyleSheet.create({
 		container: {
-			display: 'flex',
-			flexDirection: 'row',
 			alignItems: 'center',
 			justifyContent: 'center',
-			paddingHorizontal: validatePaddingHorizontal,
-			paddingVertical: validatePaddingVertical,
 			borderRadius: validateBorderRadius,
-			backgroundColor: bgColor,
-		},
-		icon: {
-			color: palette.base.white,
-			paddingRight: validatePaddingRightIcon,
-			paddingLeft: validatePaddingLeftIcon,
-		},
-		title: {
-			fontSize: validateFontSize,
-			fontWeight: '500',
-			textAlign: 'center',
-			color: palette.base.white,
 		},
 	});
 
-	const noChildren = () => (
-		<>
-			{icon && !iconRight && <Icon name={icon} style={[styles.icon, iconStyle]} size={24} />}
-			{title && <Text style={[styles.title, textStyle]}>{title}</Text>}
-			{icon && iconRight && <Icon name={icon} style={[styles.icon, iconStyle]} size={24} />}
-		</>
-	);
-
-	/* istanbul ignore next */
-	const PressableStyle = ({pressed}: PressableStyleProp) => {
-		const backgroundColor = pressedColor ?? palette.primary.dark;
-		const pressedBgColor = pressed ? [{backgroundColor}] : [];
-
-		return [styles.container, style, ...pressedBgColor];
-	};
-
 	return (
-		<Pressable style={PressableStyle} disabled={disabled} {...props}>
-			{children ?? noChildren}
+		<Pressable
+			style={({pressed}) => [
+				styles.container,
+				style,
+				pressed && /* istanbul ignore next */ pressedStyle,
+			]}
+			{...props}>
+			{children}
 		</Pressable>
 	);
 };
diff --git a/src/components/Button/index.test.tsx b/src/components/Button/index.test.tsx
new file mode 100644
index 0000000..281f056
--- /dev/null
+++ b/src/components/Button/index.test.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import {create} from 'react-test-renderer';
+import {Text} from 'react-native';
+import Icon from '../Icon';
+import Loading from '../Loading';
+import Button from './';
+
+const validData = {
+	isLoading: true,
+	value: 'Button Test',
+	icon: 'box',
+};
+
+jest.spyOn(React, 'useEffect').mockImplementation((f) => f());
+jest.mock('react-native/Libraries/Animated/NativeAnimatedHelper');
+
+describe('Button component', () => {
+	describe('it renders correctly', () => {
+		it('when it has valie as minimum prop', () => {
+			const {root} = create(<Button value={validData.value} />);
+			const TitleComp = root.findByType(Text);
+			const {children} = TitleComp.props;
+
+			expect(children).toEqual(validData.value);
+		});
+
+		it('when it has icon as minimum prop', () => {
+			const {root} = create(<Button icon={validData.icon} />);
+			const IconComp = root.findByType(Icon);
+			const {name} = IconComp.props;
+
+			expect(name).toEqual(validData.icon);
+		});
+
+		it('when isLoading is true, show an loading spinner', () => {
+			const {root} = create(<Button icon={validData.icon} isLoading={validData.isLoading} />);
+			const LoadingComp = root.findByType(Loading);
+			const {isLoading} = LoadingComp.props;
+
+			expect(isLoading).toEqual(validData.isLoading);
+		});
+	});
+});
diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
new file mode 100644
index 0000000..f27c0bc
--- /dev/null
+++ b/src/components/Button/index.tsx
@@ -0,0 +1,113 @@
+import React, {FC} from 'react';
+import {ViewStyle, StyleSheet, TextStyle, View} from 'react-native';
+import BaseButton, {BaseButtonProps} from '../BaseButton';
+import getButtonStyles from './utils/getButtonStyles';
+import Loading from '../Loading';
+import Text from '../Text';
+import Icon from '../Icon';
+
+export const types = {
+	main: 'main',
+	secondary: 'secondary',
+};
+
+export const variant = {
+	contained: 'contained',
+	outlined: 'outlined',
+	text: 'text',
+};
+
+export const color = {
+	primary: 'primary',
+	black: 'black',
+	success: 'success',
+	error: 'error',
+	warning: 'warning',
+	alert: 'alert',
+};
+
+export const iconPosition = {
+	top: 'top',
+	bottom: 'bottom',
+	left: 'left',
+	right: 'right',
+};
+
+export type buttonType = typeof types;
+export type keyType = keyof buttonType;
+
+export type buttonVariant = typeof variant;
+export type keyVariant = keyof buttonVariant;
+
+export type buttonColor = typeof color;
+export type keyColor = keyof buttonColor;
+
+export type buttonIconPosition = typeof iconPosition;
+export type keyIconPosition = keyof buttonIconPosition;
+
+interface ButtonProps extends BaseButtonProps {
+	type?: keyType;
+	variant?: keyVariant;
+	color?: keyColor;
+	isLoading?: boolean;
+	value?: string | null;
+	icon?: string;
+	iconPosition?: keyIconPosition;
+	disabled?: boolean;
+	style?: ViewStyle;
+	pressedStyle?: ViewStyle;
+	iconStyle?: TextStyle;
+	textStyle?: TextStyle;
+}
+
+const Button: FC<ButtonProps> = ({
+	type = 'main',
+	variant = 'contained',
+	color = 'primary',
+	iconPosition = 'left',
+	isLoading = false,
+	value = 'Button',
+	icon = null,
+	disabled = false,
+	style,
+	iconStyle,
+	textStyle,
+	...props
+}) => {
+	const validDisabled = disabled || isLoading;
+	const hasIconAndText = !!icon && !!value;
+	const borderRadius = variant === 'text' ? 6 : 50;
+
+	const buttonStyles = getButtonStyles({
+		type,
+		variant,
+		color,
+		iconPosition,
+		isLoading,
+		isDisabled: disabled,
+		hasIconAndText,
+	});
+	const styles = StyleSheet.create(buttonStyles);
+
+	const LoadingCompontent = <Loading isLoading={isLoading} color={styles.loadingColor} size={24} />;
+
+	const WrapperComponent = (
+		<View style={styles.direction}>
+			{icon && <Icon name={icon} style={[styles.icon, iconStyle]} size={24} />}
+			{value && <Text style={[styles.text, textStyle]}>{value}</Text>}
+		</View>
+	);
+
+	return (
+		<BaseButton
+			style={[styles.container, style]}
+			pressedStyle={!validDisabled && styles.pressed}
+			borderRadius={borderRadius}
+			disabled={validDisabled}
+			{...props}>
+			{isLoading ? LoadingCompontent : WrapperComponent}
+		</BaseButton>
+	);
+};
+
+export default Button;
diff --git a/src/components/Button/types/index.ts b/src/components/Button/types/index.ts
new file mode 100644
index 0000000..ad2aae2
--- /dev/null
+++ b/src/components/Button/types/index.ts
@@ -0,0 +1,53 @@
+import type {keyColor, keyIconPosition, keyType, keyVariant} from '../';
+
+export interface SelectedColor {
+	main: string;
+	dark: string;
+}
+
+export interface Params {
+	type: keyType;
+	variant: keyVariant;
+	color: keyColor;
+	iconPosition: keyIconPosition;
+	isLoading: Boolean;
+	isDisabled: Boolean;
+	hasIconAndText?: Boolean;
+}
+
+export interface ReturnStyles {
+	container: object;
+	direction: object;
+	pressed: object;
+	icon: object;
+	text: object;
+	loadingColor: any;
+}
+
+export interface ContainerStyle {
+	isDisabled: Boolean;
+	isLoading: Boolean;
+	color: keyColor;
+	variant: keyVariant;
+	type: keyType;
+	iconPosition: keyIconPosition;
+}
+
+export interface TextStyle {
+	type: keyType;
+	variant: keyVariant;
+	color: keyColor;
+	isDisabled: Boolean;
+	isLoading: Boolean;
+
+	hasIconAndText?: Boolean;
+	iconPosition: keyIconPosition;
+}
+
+export interface LoadingStyle {
+	color: keyColor;
+}
+
+export interface DirectionStyle {
+	iconPosition: keyIconPosition;
+}
diff --git a/src/components/Button/utils/getButtonStyles/index.test.ts b/src/components/Button/utils/getButtonStyles/index.test.ts
new file mode 100644
index 0000000..8f68645
--- /dev/null
+++ b/src/components/Button/utils/getButtonStyles/index.test.ts
@@ -0,0 +1,79 @@
+import getButtonStyles from './';
+
+const validParams = {
+	type: 'secondary',
+	variant: 'outlined',
+	color: 'secondary',
+	iconPosition: 'top',
+	isLoading: true,
+	disabled: true,
+	hasIconAndText: true,
+};
+
+const failedParams = {
+	type: undefined,
+	variant: undefined,
+	color: undefined,
+	iconPosition: undefined,
+	isLoading: false,
+	disabled: false,
+	hasIconAndText: false,
+};
+
+describe('getMixedButtonStyles util', () => {
+	it('return styles when params are passed correclty', () => {
+		// @ts-ignore
+		const response = getButtonStyles(validParams);
+		expect(response).toEqual({
+			container: {
+				borderWidth: 1,
+				borderColor: '#C4C6CC',
+				backgroundColor: '#DDDFE2',
+				paddingHorizontal: 16.5,
+				paddingVertical: 21,
+			},
+			pressed: {borderColor: '#2979FF', backgroundColor: '#fff'},
+			direction: {
+				justifyContent: 'center',
+				alignItems: 'center',
+				flexDirection: 'column',
+			},
+			text: {
+				fontWeight: '500',
+				textAlign: 'center',
+				color: '#C4C6CC',
+				fontSize: 29,
+			},
+			icon: {fontWeight: '500', textAlign: 'center', color: '#C4C6CC'},
+			loadingColor: '#2979FF',
+		});
+	});
+
+	it('returns default styles when params is not correct or no exist', () => {
+		// @ts-ignore
+		const response = getButtonStyles(failedParams);
+		expect(response).toEqual({
+			container: {
+				borderWidth: 1,
+				borderColor: 'transparent',
+				backgroundColor: '#2979FF',
+				paddingHorizontal: 16.5,
+				height: 104,
+			},
+			pressed: {borderColor: 'transparent', backgroundColor: '#1759FF'},
+			direction: {
+				justifyContent: 'center',
+				alignItems: 'center',
+				flexDirection: 'row',
+			},
+			text: {
+				fontWeight: '500',
+				textAlign: 'center',
+				color: '#fff',
+				fontSize: 29,
+			},
+			icon: {fontWeight: '500', textAlign: 'center', color: '#fff'},
+			loadingColor: '#2979FF',
+		});
+	});
+});
diff --git a/src/components/Button/utils/getButtonStyles/index.ts b/src/components/Button/utils/getButtonStyles/index.ts
new file mode 100644
index 0000000..e383cf8
--- /dev/null
+++ b/src/components/Button/utils/getButtonStyles/index.ts
@@ -0,0 +1,123 @@
+import {moderateScale, scaledForDevice} from '../../../../scale';
+import {palette} from '../../../../theme/palette';
+import {colorConfig, styleConfig} from './utils/styleConfigs';
+import {validTypes, validVariants, validIconPositions, verticalHeights} from './utils/constants';
+import {
+	defaultColor,
+	defaultIconPosition,
+	defaultType,
+	defaultVariant,
+} from './utils/defaultValues';
+
+import type {ContainerStyle, DirectionStyle, Params, ReturnStyles, TextStyle} from '../../types';
+
+const containerStyle = ({
+	isDisabled,
+	isLoading,
+	color,
+	variant,
+	type,
+	iconPosition,
+}: ContainerStyle) => {
+	const selectedColor = palette[color] || palette[defaultColor];
+	const {main, disabled} = colorConfig(selectedColor);
+
+	const {container} = styleConfig;
+
+	const validType = validTypes.includes(type) ? type : defaultType;
+	const validVariant = validVariants.includes(variant) ? variant : defaultVariant;
+
+	const mainBgColor = main.background[validVariant];
+	const mainBorderColor = main.border[validVariant];
+
+	const disabledBgColor = disabled.background[validVariant];
+	const disabledBorderColor = disabled.border[validType][validVariant];
+
+	const containerHeight = container.height[validType];
+
+	// validation of height
+	const hasVerticalHeight = verticalHeights.includes(iconPosition);
+
+	return {
+		borderWidth: 1,
+		borderColor: isDisabled || isLoading ? disabledBorderColor : mainBorderColor,
+		backgroundColor: isDisabled || isLoading ? disabledBgColor : mainBgColor,
+		paddingHorizontal: scaledForDevice(type === 'main' ? 12 : 8, moderateScale),
+		...(hasVerticalHeight && {paddingVertical: scaledForDevice(10, moderateScale)}),
+		...(!hasVerticalHeight && {
+			height: variant !== 'text' ? containerHeight : scaledForDevice(35, moderateScale),
+		}),
+	};
+};
+
+const pressedStyle = ({variant, color}: ContainerStyle) => {
+	const selectedColor = palette[color] || palette[defaultColor];
+	const {pressed} = colorConfig(selectedColor);
+
+	const validVariant = validVariants.includes(variant) ? variant : defaultVariant;
+
+	return {
+		borderColor: pressed.border[validVariant],
+		backgroundColor: pressed.background[validVariant],
+	};
+};
+
+const directionWrapperStyle = ({iconPosition}: DirectionStyle) => {
+	const {directionWrapper} = styleConfig;
+
+	const flexCenter = directionWrapper.center;
+
+	const validIconPosition = validIconPositions.includes(iconPosition)
+		? iconPosition
+		: defaultIconPosition;
+	const flexDirection = directionWrapper.flexDirection[validIconPosition];
+
+	return {
+		...flexCenter,
+		flexDirection,
+	};
+};
+
+const baseTextStyle = ({isDisabled, type, variant, color, isLoading}: TextStyle) => {
+	const selectedColor = palette[color] || palette[defaultColor];
+	const {main, disabled} = colorConfig(selectedColor);
+
+	const {text: textStyle} = styleConfig;
+
+	const validType = validTypes.includes(type) ? type : defaultType;
+	const validVariant = validVariants.includes(variant) ? variant : defaultVariant;
+
+	const mainTextColor = main.text[validType][validVariant];
+	const disabledTextColor = disabled.text[validType][validVariant];
+
+	return {
+		...textStyle,
+		color: isDisabled || isLoading ? disabledTextColor : mainTextColor,
+	};
+};
+
+const textStyle = (params: TextStyle) => ({
+	...baseTextStyle(params),
+	fontSize: scaledForDevice(14, moderateScale),
+});
+
+const iconStyle = (params: TextStyle) => {
+	const {hasIconAndText, iconPosition} = params;
+	const {icon} = styleConfig;
+
+	return {
+		...baseTextStyle(params),
+		...((!!hasIconAndText && icon.margin[iconPosition]) || {}),
+	};
+};
+
+const getButtonStyles = (params: Params): ReturnStyles => ({
+	container: containerStyle(params),
+	pressed: pressedStyle(params),
+	direction: directionWrapperStyle(params),
+	text: textStyle(params),
+	icon: iconStyle(params),
+	loadingColor: palette.primary.main,
+});
+
+export default getButtonStyles;
diff --git a/src/components/Button/utils/getButtonStyles/utils/constants/index.ts b/src/components/Button/utils/getButtonStyles/utils/constants/index.ts
new file mode 100644
index 0000000..5c19923
--- /dev/null
+++ b/src/components/Button/utils/getButtonStyles/utils/constants/index.ts
@@ -0,0 +1,6 @@
+const verticalHeights = ['top', 'bottom'];
+const validTypes = ['main', 'secondary'];
+const validVariants = ['contained', 'outlined', 'text'];
+const validIconPositions = ['top', 'bottom', 'left', 'right'];
+
+export {verticalHeights, validTypes, validVariants, validIconPositions};
diff --git a/src/components/Button/utils/getButtonStyles/utils/defaultValues/index.ts b/src/components/Button/utils/getButtonStyles/utils/defaultValues/index.ts
new file mode 100644
index 0000000..b1aa416
--- /dev/null
+++ b/src/components/Button/utils/getButtonStyles/utils/defaultValues/index.ts
@@ -0,0 +1,6 @@
+const defaultColor = 'primary';
+const defaultType = 'main';
+const defaultVariant = 'contained';
+const defaultIconPosition = 'left';
+
+export {defaultColor, defaultType, defaultVariant, defaultIconPosition};
diff --git a/src/components/Button/utils/getButtonStyles/utils/styleConfigs/index.ts b/src/components/Button/utils/getButtonStyles/utils/styleConfigs/index.ts
new file mode 100644
index 0000000..9c51ffa
--- /dev/null
+++ b/src/components/Button/utils/getButtonStyles/utils/styleConfigs/index.ts
@@ -0,0 +1,124 @@
+import {moderateScale, scaledForDevice} from '../../../../../../scale';
+import {base, black, grey, white} from '../../../../../../theme/palette';
+import {SelectedColor} from '../../../../types';
+
+export const colorConfig = (selectedColor: SelectedColor) => {
+	return {
+		main: {
+			background: {
+				contained: selectedColor.main,
+				outlined: base.white,
+				text: 'transparent',
+			},
+			border: {
+				contained: 'transparent',
+				outlined: grey[300],
+				text: 'transparent',
+			},
+			text: {
+				main: {
+					contained: base.white,
+					outlined: black.main,
+					text: black.main,
+				},
+				secondary: {
+					contained: base.white,
+					outlined: selectedColor.main,
+					text: selectedColor.main,
+				},
+			},
+		},
+		pressed: {
+			background: {
+				contained: selectedColor.dark,
+				outlined: base.white,
+				text: white.main,
+			},
+			border: {
+				contained: 'transparent',
+				outlined: selectedColor.main,
+				text: 'transparent',
+			},
+			text: {
+				main: {
+					contained: base.white,
+					outlined: black.main,
+					text: black.main,
+				},
+				secondary: {
+					contained: base.white,
+					outlined: selectedColor.main,
+					text: selectedColor.dark,
+				},
+			},
+		},
+		disabled: {
+			background: {
+				contained: grey[200],
+				outlined: grey[100],
+				text: 'transparent',
+			},
+			border: {
+				main: {
+					contained: 'transparent',
+					outlined: 'transparent',
+					text: 'transparent',
+				},
+				secondary: {
+					contained: 'transparent',
+					outlined: grey[300],
+					text: 'transparent',
+				},
+			},
+			text: {
+				main: {
+					contained: grey[400],
+					outlined: grey[300],
+					text: grey[300],
+				},
+				secondary: {
+					contained: grey[400],
+					outlined: grey[300],
+					text: grey[300],
+				},
+			},
+		},
+	};
+};
+
+export const styleConfig = {
+	container: {
+		height: {
+			main: scaledForDevice(50, moderateScale),
+			secondary: scaledForDevice(42, moderateScale),
+		},
+	},
+	directionWrapper: {
+		center: {
+			justifyContent: 'center',
+			alignItems: 'center',
+		},
+		flexDirection: {
+			left: 'row',
+			right: 'row-reverse',
+			top: 'column',
+			bottom: 'column-reverse',
+		},
+	},
+	text: {
+		fontWeight: '500',
+		textAlign: 'center',
+	},
+	icon: {
+		margin: {
+			top: {},
+			bottom: {},
+			left: {
+				marginRight: scaledForDevice(8, moderateScale),
+			},
+			right: {
+				marginLeft: scaledForDevice(8, moderateScale),
+			},
+		},
+	},
+};
diff --git a/src/components/Select/Components/Modal/index.tsx b/src/components/Select/Components/Modal/index.tsx
index dee184a..0690e5a 100644
--- a/src/components/Select/Components/Modal/index.tsx
+++ b/src/components/Select/Components/Modal/index.tsx
@@ -1,9 +1,9 @@
 import React, {FC} from 'react';
 import {Modal as ModalComponent, StyleSheet, View} from 'react-native';
-import {base, primary, white} from '../../../../theme/palette';
-import BaseButton from '../../../BaseButton';
+import {base} from '../../../../theme/palette';
 import {DropdownProps} from '../Dropdown';
 import {moderateScale, scaledForDevice} from '../../../../scale';
+import Button from '../../../Button';
 
 interface ModalProps extends DropdownProps {
 	isMulti: boolean;
@@ -18,7 +18,6 @@ const Modal: FC<ModalProps> = ({show, setShow, isMulti, modalAcceptText, childre
 	const validPaddingHorizontal = scaledForDevice(20, moderateScale);
 	const validLeft = scaledForDevice(8, moderateScale);
 	const validTop = scaledForDevice(4, moderateScale);
-	const validFontSize = scaledForDevice(13, moderateScale);
 
 	const styles = StyleSheet.create({
 		background: {
@@ -49,12 +48,7 @@ const Modal: FC<ModalProps> = ({show, setShow, isMulti, modalAcceptText, childre
 			left: validLeft,
 			top: validTop,
 		},
-		button: {
-			backgroundColor: base.white,
-		},
 		buttonText: {
-			color: primary.main,
-			fontSize: validFontSize,
 			fontWeight: '700',
 			textTransform: 'uppercase',
 		},
@@ -67,11 +61,10 @@ const Modal: FC<ModalProps> = ({show, setShow, isMulti, modalAcceptText, childre
 					<View style={styles.containerModal}>{children}</View>
 					{isMulti && (
 						<View style={styles.buttonWrapper}>
-							<BaseButton
-								title={modalAcceptText}
-								iconRight={false}
-								pressedColor={white.main}
-								style={styles.button}
+							<Button
+								value={modalAcceptText}
+								variant={'text'}
+								type={'secondary'}
 								textStyle={styles.buttonText}
 								onPress={() => setShow(false)}
 							/>
diff --git a/src/index.ts b/src/index.ts
index b807275..3e11a15 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -21,6 +21,7 @@ import Carousel from './components/Carousel';
 import ProgressBar from './components/ProgressBar';
 import List from './components/List';
 import BaseButton from './components/BaseButton';
+import Button from './components/Button/index';
 import FullScreenMessage from './components/FullScreenMessage';
 import LayoutWithBottomButtons from './components/LayoutWithBottomButtons';
 import * as getScale from './scale';
@@ -47,6 +48,7 @@ export {
 	ProgressBar,
 	List,
 	BaseButton,
+	Button,
 	getScale,
 	LayoutWithBottomButtons,
 	FullScreenMessage,
diff --git a/storybook/stories/BaseButton/BaseButton.stories.js b/storybook/stories/BaseButton/BaseButton.stories.js
deleted file mode 100644
index a83b21b..0000000
--- a/storybook/stories/BaseButton/BaseButton.stories.js
+++ /dev/null
@@ -1,80 +0,0 @@
-import React, {useState} from 'react';
-import BaseButton from '../../../src/components/BaseButton';
-import CheckBox from '../../../src/components/CheckBox';
-import {StyleSheet, View, Text} from 'react-native';
-import {palette} from '../../../src/theme/palette';
-
-export default {
-	title: 'Components/BaseButton',
-	argTypes: {
-		icon: {
-			options: {None: null, 'Plus Circle': 'plus_circle'},
-			control: {type: 'select'},
-		},
-		borderRadius: {control: 'number', min: 0},
-	},
-};
-
-export const DefaultProps = (props) => <BaseButton {...props} />;
-
-DefaultProps.storyName = 'Default props';
-
-DefaultProps.args = {
-	title: 'Button',
-	icon: 'plus_circle',
-	disabled: false,
-	iconRight: false,
-	borderRadius: 25,
-};
-
-export const WithChildren = (props) => {
-	const [isChecked, setIsChecked] = useState(false);
-
-	const styles = StyleSheet.create({
-		container: {
-			display: 'flex',
-			flexDirection: 'row',
-			justifyContent: 'center',
-			alignItems: 'center',
-			marginVertical: 4,
-			borderRadius: 20,
-			padding: 5,
-			width: '100%',
-		},
-		text: {
-			color: isChecked ? palette.primary.dark : palette.grey[600],
-			paddingHorizontal: 10,
-			fontWeight: 'bold',
-			textAlign: 'center',
-		},
-	});
-
-	return (
-		<BaseButton
-			android_ripple={{color: palette.primary.main}}
-			onPress={() => setIsChecked(!isChecked)}
-			{...props}>
-			<View style={styles.container}>
-				<CheckBox style={styles.check} checked={isChecked} />
-				<Text style={styles.text}>Custom Children</Text>
-			</View>
-		</BaseButton>
-	);
-};
-
-WithChildren.storyName = 'With Children Components';
-
-WithChildren.args = {
-	title: '',
-	icon: null,
-	disabled: false,
-	iconRight: false,
-	borderRadius: 4,
-	style: {
-		width: 200,
-		backgroundColor: palette.white.main,
-		borderColor: palette.grey[400],
-		borderWidth: 1,
-	},
-	pressedColor: palette.white.dark,
-};
diff --git a/storybook/stories/Button/Button.stories.js b/storybook/stories/Button/Button.stories.js
new file mode 100644
index 0000000..0823cd9
--- /dev/null
+++ b/storybook/stories/Button/Button.stories.js
@@ -0,0 +1,116 @@
+import React from 'react';
+import Button from '../../../src/components/Button';
+
+export default {
+	title: 'Components/Button',
+	argTypes: {
+		icon: {
+			control: {type: 'select'},
+			options: {
+				None: null,
+				Box: 'box',
+				Check: 'check_bold',
+				Cross: 'cross_bold',
+				Keyboard: 'keyboard',
+			},
+		},
+		type: {
+			control: {type: 'select'},
+			options: {
+				Main: 'main',
+				Secondary: 'secondary',
+			},
+		},
+		variant: {
+			control: {type: 'select'},
+			options: {
+				Contained: 'contained',
+				Outlined: 'outlined',
+				Text: 'text',
+			},
+		},
+		iconPosition: {
+			control: {type: 'select'},
+			options: {
+				Top: 'top',
+				Bottom: 'bottom',
+				Left: 'left',
+				Right: 'right',
+			},
+		},
+		color: {
+			control: {type: 'select'},
+			options: {
+				Primary: 'primary',
+				Black: 'black',
+				Success: 'success',
+				Error: 'error',
+				Warning: 'warning',
+				Alert: 'alert',
+			},
+		},
+	},
+};
+
+export const PrimartButtonProps = (props) => <Button {...props} />;
+
+PrimartButtonProps.storyName = 'Primary Button';
+
+PrimartButtonProps.args = {
+	value: 'Main button press',
+	icon: 'box',
+	type: 'main',
+	variant: 'contained',
+	iconPosition: 'left',
+	color: 'primary',
+	isLoading: false,
+	disabled: false,
+	style: {flex: 1},
+};
+
+export const SecondaryButtonProps = (props) => <Button {...props} />;
+
+SecondaryButtonProps.storyName = 'Secondary Button';
+
+SecondaryButtonProps.args = {
+	value: 'Main button press',
+	icon: 'box',
+	type: 'secondary',
+	variant: 'contained',
+	iconPosition: 'left',
+	color: 'black',
+	isLoading: false,
+	disabled: false,
+	style: {flex: 1},
+};
+
+export const CameraButtonProps = (props) => <Button {...props} />;
+
+CameraButtonProps.storyName = 'Camera Button';
+
+CameraButtonProps.args = {
+	value: 'Manual Entry',
+	icon: 'keyboard',
+	type: 'main',
+	variant: 'contained',
+	iconPosition: 'left',
+	color: 'black',
+	isLoading: false,
+	disabled: false,
+	style: {flex: 1},
+};
+
+export const TextButtonProps = (props) => <Button {...props} />;
+
+TextButtonProps.storyName = 'Title Button';
+
+TextButtonProps.args = {
+	value: 'ACCEPT',
+	type: 'secondary',
+	variant: 'text',
+	iconPosition: 'left',
+	color: 'primary',
+	isLoading: false,
+	disabled: false,
+	textStyle: {fontWeight: '700'},
+};