diff --git a/packages/button/lib/index.tsx b/packages/button/lib/index.tsx
index 38a4cbd..c6900b3 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",
@@ -69,10 +72,6 @@ const styles = stylex.create({
 		transition: "background-color var(--transition-speed, 0.2s) ease",
 	},
 
-	fullWidth: {
-		width: "100%",
-	},
-
 	disabled: {
 		opacity: "0.75",
 		cursor: "not-allowed",
@@ -160,12 +159,36 @@ const styles = stylex.create({
 		backgroundColor: "var(--cds-white, #FCFCFC)",
 		color: "var(--cds-white, #FCFCFC)",
 	},
+
+	[ButtonSizes.SMALL]: {
+		height: "1.5rem",
+		minWidth: "3rem",
+		fontSize: "0.75rem",
+	},
+
+	[ButtonSizes.MEDIUM]: {
+		height: "2rem",
+		minWidth: "4rem",
+		fontSize: "1rem",
+	},
+
+	[ButtonSizes.LARGE]: {
+		height: "3rem",
+		minWidth: "6rem",
+		fontSize: "1.5rem",
+	},
+
+	[ButtonSizes.XLARGE]: {
+		height: "4rem",
+		minWidth: "8rem",
+		fontSize: "2rem",
+	},
 });
 
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
 	// size?: any;
 	variant?: ButtonVariants;
-	fullWidth?: boolean;
+	size?: ButtonSizes;
 	loading?: boolean;
 	disabled?: boolean;
 	asChild?: boolean;
@@ -195,11 +218,11 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps & ExtendProps>(({
 	extend,
 	variant = ButtonVariants.CREATE,
 	// TODO: add size variants,
-	fullWidth,
 	loading = false,
 	disabled,
 	asChild = false,
 	children,
+	size = ButtonSizes.MEDIUM,
 	...props
 }, ref,) => {
 	const Comp = asChild ? Slot : "button";
@@ -210,9 +233,9 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps & ExtendProps>(({
 				styles.base,
 				// TODO: ({ size})
 				styles[variant],
-				fullWidth && styles.fullWidth,
 				disabled && styles.disabled,
 				extend,
+				styles[size]
 			)}
 			disabled={disabled}
 			{...props}
@@ -225,4 +248,4 @@ const Button = forwardRef<HTMLButtonElement, ButtonProps & ExtendProps>(({
 );
 Button.displayName = "Button";
 
-export { Button, ButtonVariants };
+export { Button, ButtonVariants, ButtonSizes };
diff --git a/packages/checkbox/lib/index.tsx b/packages/checkbox/lib/index.tsx
index dd71a89..0c14f92 100644
--- a/packages/checkbox/lib/index.tsx
+++ b/packages/checkbox/lib/index.tsx
@@ -5,7 +5,17 @@ import * as stylex from "@stylexjs/stylex";
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 // import { CheckIcon } from "@radix-ui/react-icons";
 
-type ExtendProps = { extend?: stylex.StyleXStyles };
+type ExtendProps = { 
+	extend?: stylex.StyleXStyles;
+	size?: CheckBoxSizes;
+};
+
+enum CheckBoxSizes {
+	XSMALL = "xsmall",
+	SMALL = "small",
+	MEDIUM = "medium",
+	LARGE = "large",
+}
 
 const styles = stylex.create({
 	root: {
@@ -59,35 +69,34 @@ const styles = stylex.create({
 		color: "currentColor",
 	},
 
-	// TODO: size variants
-	// xsmall {
-	//     height: "0.25rem",
-	//     width: "0.25rem",
-	//   }
-
-	//   small {
-	//     height: "0.5rem",
-	//     width: "0.5rem",
-	//   }
-
-	//   medium {
-	//     height: "0.75rem",
-	//     width: "0.75rem",
-	//   }
-
-	//   large {
-	//     height: "1rem",
-	//     width: "1rem",
-	//   }
+	[CheckBoxSizes.XSMALL]: {
+		height: "0.75rem",
+		width: "0.75rem",
+	},
+
+	[CheckBoxSizes.SMALL]: {
+		height: "1rem",
+		width: "1rem",
+	},
+
+	[CheckBoxSizes.MEDIUM]: {
+		height: "1.25rem",
+		width: "1.25rem",
+	},
+
+	[CheckBoxSizes.LARGE]: {
+		height: "1.5rem",
+		width: "1.5rem",
+	},
 });
 
 const Checkbox = forwardRef<
 	ElementRef<typeof CheckboxPrimitive.Root>,
 	ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> & ExtendProps
->(({ extend, ...props }, ref) => (
+>(({ extend, size = CheckBoxSizes.MEDIUM, ...props }, ref) => (
 	<CheckboxPrimitive.Root
 		ref={ref}
-		{...stylex.props(styles.root, props.disabled && styles.disabled, extend)}
+		{...stylex.props(styles.root, props.disabled && styles.disabled, styles[size], extend)}
 		{...props}
 	>
 		<CheckboxPrimitive.Indicator {...stylex.props(styles.indicator)}>
@@ -112,4 +121,4 @@ const Checkbox = forwardRef<
 ));
 Checkbox.displayName = CheckboxPrimitive.Root.displayName;
 
-export { Checkbox };
+export { Checkbox, CheckBoxSizes };