diff --git a/packages/button/lib/index.tsx b/packages/button/lib/index.tsx
index 38a4cbd..0392b21 100644
--- a/packages/button/lib/index.tsx
+++ b/packages/button/lib/index.tsx
@@ -16,6 +16,12 @@ enum ButtonVariants {
 	LINK = "link",
 }
 
+enum ButtonSizes {
+	SMALL = "small",
+	MEDIUM = "medium",
+	LARGE = "large",
+	XLARGE = "xlarge",
+}
 const loadingFlash = stylex.keyframes({
 	"0%": { opacity: 1 },
 	"50%": { opacity: 0.5 },
@@ -57,9 +63,6 @@ const styles = stylex.create({
 
 		cursor: "pointer",
 
-		// height: "2rem",
-		// minWidth: "4rem",
-
 		display: "flex",
 		justifyContent: "center",
 		alignItems: "center",
@@ -160,12 +163,33 @@ const styles = stylex.create({
 		backgroundColor: "var(--cds-white, #FCFCFC)",
 		color: "var(--cds-white, #FCFCFC)",
 	},
+
+	[ButtonSizes.SMALL]: {
+		height: "1.5rem",
+		fontSize: "0.75rem",
+	},
+
+	[ButtonSizes.MEDIUM]: {
+		height: "2rem",
+		fontSize: "1rem",
+	},
+
+	[ButtonSizes.LARGE]: {
+		height: "3rem",
+		fontSize: "1.5rem",
+	},
+
+	[ButtonSizes.XLARGE]: {
+		height: "4rem",
+		fontSize: "2rem",
+	},
 });
 
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
 	// size?: any;
 	variant?: ButtonVariants;
 	fullWidth?: boolean;
+	size?: ButtonSizes;
 	loading?: boolean;
 	disabled?: boolean;
 	asChild?: boolean;
@@ -200,6 +224,7 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps & ExtendProps>(({
 	disabled,
 	asChild = false,
 	children,
+	size = ButtonSizes.MEDIUM,
 	...props
 }, ref,) => {
 	const Comp = asChild ? Slot : "button";
@@ -213,6 +238,7 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps & ExtendProps>(({
 				fullWidth && styles.fullWidth,
 				disabled && styles.disabled,
 				extend,
+				styles[size]
 			)}
 			disabled={disabled}
 			{...props}
@@ -225,4 +251,4 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps & ExtendProps>(({
 );
 Button.displayName = "Button";
 
-export { Button, ButtonVariants };
+export { Button, ButtonVariants, ButtonSizes };