diff --git a/packages/components/src/box-control/README.md b/packages/components/src/box-control/README.md
index 8bcb5a5dad8fc2..78b4280ffe36e7 100644
--- a/packages/components/src/box-control/README.md
+++ b/packages/components/src/box-control/README.md
@@ -124,3 +124,18 @@ The current values of the control, expressed as an object of `top`, `right`, `bo
 
  - Type: `BoxControlValue`
  - Required: No
+
+### `presets`
+
+The list of presets to pick from.
+
+ - Type: `Preset`
+ - Required: No
+
+### `presetKey`
+
+The key of the preset to apply. If you provide a list of presets, you must provide a preset key to use. The format of preset selected values is going to be `var:preset|${ presetKey }|${ presetSlug }`
+
+ - Type: `string`
+ - Required: No
+
diff --git a/packages/components/src/box-control/index.tsx b/packages/components/src/box-control/index.tsx
index 7b219a33332d90..e0d3d00c976998 100644
--- a/packages/components/src/box-control/index.tsx
+++ b/packages/components/src/box-control/index.tsx
@@ -21,7 +21,7 @@ import { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';
 import {
 	DEFAULT_VALUES,
 	getInitialSide,
-	isValuesMixed,
+	isValueMixed,
 	isValuesDefined,
 	ALL_SIDES,
 } from './utils';
@@ -83,6 +83,8 @@ function BoxControl( {
 	splitOnAxis = false,
 	allowReset = true,
 	resetValues = DEFAULT_VALUES,
+	presets,
+	presetKey,
 	onMouseOver,
 	onMouseOut,
 }: BoxControlProps ) {
@@ -95,7 +97,7 @@ function BoxControl( {
 
 	const [ isDirty, setIsDirty ] = useState( hasInitialValue );
 	const [ isLinked, setIsLinked ] = useState(
-		! hasInitialValue || ! isValuesMixed( inputValues ) || hasOneSide
+		! hasInitialValue || ! isValueMixed( inputValues ) || hasOneSide
 	);
 
 	const [ side, setSide ] = useState< BoxControlIconProps[ 'side' ] >(
@@ -153,6 +155,8 @@ function BoxControl( {
 		sides,
 		values: inputValues,
 		__next40pxDefaultSize,
+		presets,
+		presetKey,
 	};
 
 	maybeWarnDeprecated36pxSize( {
diff --git a/packages/components/src/box-control/input-control.tsx b/packages/components/src/box-control/input-control.tsx
index e0d0685e8e089f..ea0cacfeef43ec 100644
--- a/packages/components/src/box-control/input-control.tsx
+++ b/packages/components/src/box-control/input-control.tsx
@@ -3,6 +3,8 @@
  */
 import { useInstanceId } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
+import { useState } from '@wordpress/element';
+import { settings } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -12,9 +14,12 @@ import { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';
 import {
 	ALL_SIDES,
 	CUSTOM_VALUE_SETTINGS,
-	getAllValue,
+	getMergedValue,
+	getPresetIndexFromValue,
+	getPresetValueFromIndex,
+	isValuePreset,
 	isValuesDefined,
-	isValuesMixed,
+	isValueMixed,
 	LABELS,
 } from './utils';
 import {
@@ -24,6 +29,7 @@ import {
 	StyledUnitControl,
 } from './styles/box-control-styles';
 import type { BoxControlInputControlProps, BoxControlValue } from './types';
+import Button from '../button';
 
 const noop = () => {};
 
@@ -96,6 +102,8 @@ export default function BoxInputControl( {
 	setSelectedUnits,
 	sides,
 	side,
+	presets,
+	presetKey,
 	...props
 }: BoxControlInputControlProps ) {
 	const defaultValuesToModify = getSidesToModify( side, sides );
@@ -108,6 +116,15 @@ export default function BoxInputControl( {
 		onChange( nextValues );
 	};
 
+	const handleRewOnValueChange = ( next?: string ) => {
+		const nextValues = { ...values };
+		defaultValuesToModify.forEach( ( modifiedSide ) => {
+			nextValues[ modifiedSide ] = next;
+		} );
+
+		handleOnChange( nextValues );
+	};
+
 	const handleOnValueChange = (
 		next?: string,
 		extra?: { event: React.SyntheticEvent< Element, Event > }
@@ -143,15 +160,9 @@ export default function BoxInputControl( {
 		setSelectedUnits( newUnits );
 	};
 
-	const mergedValue = getAllValue(
-		values,
-		selectedUnits,
-		defaultValuesToModify
-	);
+	const mergedValue = getMergedValue( values, defaultValuesToModify );
 	const hasValues = isValuesDefined( values );
-	const isMixed =
-		hasValues &&
-		isValuesMixed( values, selectedUnits, defaultValuesToModify );
+	const isMixed = hasValues && isValueMixed( values, defaultValuesToModify );
 	const mixedPlaceholder = isMixed ? __( 'Mixed' ) : undefined;
 	const [ parsedQuantity, parsedUnit ] =
 		parseQuantityAndUnitFromRawValue( mergedValue );
@@ -160,52 +171,136 @@ export default function BoxInputControl( {
 		: selectedUnits[ defaultValuesToModify[ 0 ] ];
 	const generatedId = useInstanceId( BoxInputControl, 'box-control-input' );
 	const inputId = [ generatedId, side ].join( '-' );
+	const hasPresets = presets && presets.length > 0 && presetKey;
+	const hasPresetValue =
+		hasPresets &&
+		mergedValue !== undefined &&
+		! isMixed &&
+		isValuePreset( mergedValue, presetKey );
+	const [ showCustomValueControl, setShowCustomValueControl ] = useState(
+		! hasPresets ||
+			( ! hasPresetValue && ! isMixed && mergedValue !== undefined )
+	);
+	const showRangeControl = true;
+	const presetIndex = hasPresetValue
+		? getPresetIndexFromValue( mergedValue, presetKey, presets )
+		: undefined;
+	const marks = hasPresets
+		? [ { value: 0, label: __( 'None' ) } ].concat(
+				presets.map( ( preset, index ) => ( {
+					value: index + 1,
+					label: preset.name,
+				} ) )
+		  )
+		: [];
 
 	return (
 		<InputWrapper key={ `box-control-${ side }` } expanded>
 			<FlexedBoxControlIcon side={ side } sides={ sides } />
-			<Tooltip placement="top-end" text={ LABELS[ side ] }>
-				<StyledUnitControl
-					{ ...props }
-					__shouldNotWarnDeprecated36pxSize
-					__next40pxDefaultSize={ __next40pxDefaultSize }
-					className="component-box-control__unit-control"
-					id={ inputId }
-					isPressEnterToChange
-					value={ mergedValue }
-					onChange={ ( nextValue, extra ) =>
-						handleOnValueChange( nextValue, extra )
+			{ showCustomValueControl && (
+				<>
+					<Tooltip placement="top-end" text={ LABELS[ side ] }>
+						<StyledUnitControl
+							{ ...props }
+							__shouldNotWarnDeprecated36pxSize
+							__next40pxDefaultSize={ __next40pxDefaultSize }
+							className="component-box-control__unit-control"
+							id={ inputId }
+							isPressEnterToChange
+							value={ mergedValue }
+							onChange={ ( nextValue, extra ) =>
+								handleOnValueChange( nextValue, extra )
+							}
+							onUnitChange={ handleOnUnitChange }
+							onFocus={ handleOnFocus }
+							label={ LABELS[ side ] }
+							placeholder={ mixedPlaceholder }
+							hideLabelFromVision
+						/>
+					</Tooltip>
+
+					<FlexedRangeControl
+						__nextHasNoMarginBottom
+						__next40pxDefaultSize={ __next40pxDefaultSize }
+						__shouldNotWarnDeprecated36pxSize
+						aria-controls={ inputId }
+						label={ LABELS[ side ] }
+						hideLabelFromVision
+						onChange={ ( newValue ) => {
+							handleOnValueChange(
+								newValue !== undefined
+									? [ newValue, computedUnit ].join( '' )
+									: undefined
+							);
+						} }
+						min={ 0 }
+						max={
+							CUSTOM_VALUE_SETTINGS[ computedUnit ?? 'px' ]
+								?.max ?? 10
+						}
+						step={
+							CUSTOM_VALUE_SETTINGS[ computedUnit ?? 'px' ]
+								?.step ?? 0.1
+						}
+						value={ parsedQuantity ?? 0 }
+						withInputField={ false }
+					/>
+				</>
+			) }
+
+			{ hasPresets && ! showCustomValueControl && showRangeControl && (
+				<FlexedRangeControl
+					__next40pxDefaultSize
+					className="spacing-sizes-control__range-control"
+					value={ presetIndex !== undefined ? presetIndex + 1 : 0 }
+					onChange={ ( newIndex ) => {
+						const newValue =
+							newIndex === 0 || newIndex === undefined
+								? undefined
+								: getPresetValueFromIndex(
+										newIndex - 1,
+										presetKey,
+										presets
+								  );
+						handleRewOnValueChange( newValue );
+					} }
+					withInputField={ false }
+					aria-valuenow={
+						presetIndex !== undefined ? presetIndex + 1 : 0
+					}
+					aria-valuetext={
+						marks[ presetIndex !== undefined ? presetIndex + 1 : 0 ]
+							.label
 					}
-					onUnitChange={ handleOnUnitChange }
-					onFocus={ handleOnFocus }
+					renderTooltipContent={ ( index ) =>
+						marks[ ! index ? 0 : index ].label
+					}
+					min={ 0 }
+					max={ marks.length - 1 }
+					marks={ marks }
 					label={ LABELS[ side ] }
-					placeholder={ mixedPlaceholder }
 					hideLabelFromVision
+					__nextHasNoMarginBottom
+				/>
+			) }
+
+			{ hasPresets && (
+				<Button
+					label={
+						showCustomValueControl
+							? __( 'Use size preset' )
+							: __( 'Set custom size' )
+					}
+					icon={ settings }
+					onClick={ () => {
+						setShowCustomValueControl( ! showCustomValueControl );
+					} }
+					isPressed={ showCustomValueControl }
+					size="small"
+					className="spacing-sizes-control__custom-toggle"
+					iconSize={ 24 }
 				/>
-			</Tooltip>
-
-			<FlexedRangeControl
-				__nextHasNoMarginBottom
-				__next40pxDefaultSize={ __next40pxDefaultSize }
-				__shouldNotWarnDeprecated36pxSize
-				aria-controls={ inputId }
-				label={ LABELS[ side ] }
-				hideLabelFromVision
-				onChange={ ( newValue ) => {
-					handleOnValueChange(
-						newValue !== undefined
-							? [ newValue, computedUnit ].join( '' )
-							: undefined
-					);
-				} }
-				min={ 0 }
-				max={ CUSTOM_VALUE_SETTINGS[ computedUnit ?? 'px' ]?.max ?? 10 }
-				step={
-					CUSTOM_VALUE_SETTINGS[ computedUnit ?? 'px' ]?.step ?? 0.1
-				}
-				value={ parsedQuantity ?? 0 }
-				withInputField={ false }
-			/>
+			) }
 		</InputWrapper>
 	);
 }
diff --git a/packages/components/src/box-control/stories/index.story.tsx b/packages/components/src/box-control/stories/index.story.tsx
index aa94e8c4bf00b8..6f14dbe79e8ce9 100644
--- a/packages/components/src/box-control/stories/index.story.tsx
+++ b/packages/components/src/box-control/stories/index.story.tsx
@@ -81,3 +81,15 @@ AxialControlsWithSingleSide.args = {
 	sides: [ 'horizontal' ],
 	splitOnAxis: true,
 };
+
+export const ControlWithPresets = TemplateControlled.bind( {} );
+ControlWithPresets.args = {
+	...Default.args,
+	presets: [
+		{ name: 'Small', slug: 'small', value: '4px' },
+		{ name: 'Medium', slug: 'medium', value: '8px' },
+		{ name: 'Large', slug: 'large', value: '12px' },
+		{ name: 'Extra Large', slug: 'extra-large', value: '16px' },
+	],
+	presetKey: 'padding',
+};
diff --git a/packages/components/src/box-control/types.ts b/packages/components/src/box-control/types.ts
index 46e209d2a894d6..4b97536f9052dc 100644
--- a/packages/components/src/box-control/types.ts
+++ b/packages/components/src/box-control/types.ts
@@ -15,6 +15,12 @@ export type CustomValueUnits = {
 	[ key: string ]: { max: number; step: number };
 };
 
+export interface Preset {
+	name: string;
+	slug: string;
+	value: string;
+}
+
 type UnitControlPassthroughProps = Omit<
 	UnitControlProps,
 	'label' | 'onChange' | 'onFocus' | 'units'
@@ -94,6 +100,16 @@ export type BoxControlProps = Pick< UnitControlProps, 'units' > &
 		 * @default false
 		 */
 		__next40pxDefaultSize?: boolean;
+		/**
+		 * Available presets to pick from.
+		 */
+		presets?: Preset[];
+		/**
+		 * The key of the preset to apply.
+		 * If you provide a list of presets, you must provide a preset key to use.
+		 * The format of preset selected values is going to be `var:preset|${ presetKey }|${ presetSlug }`
+		 */
+		presetKey?: string;
 	};
 
 export type BoxControlInputControlProps = UnitControlPassthroughProps & {
@@ -113,6 +129,8 @@ export type BoxControlInputControlProps = UnitControlPassthroughProps & {
 	sides: BoxControlProps[ 'sides' ];
 	values: BoxControlValue;
 	side: keyof typeof LABELS;
+	presets?: Preset[];
+	presetKey?: string;
 };
 
 export type BoxControlIconProps = {
diff --git a/packages/components/src/box-control/utils.ts b/packages/components/src/box-control/utils.ts
index 6fcbaf932de3de..78432690930f4e 100644
--- a/packages/components/src/box-control/utils.ts
+++ b/packages/components/src/box-control/utils.ts
@@ -6,11 +6,11 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import { parseQuantityAndUnitFromRawValue } from '../unit-control/utils';
 import type {
 	BoxControlProps,
 	BoxControlValue,
 	CustomValueUnits,
+	Preset,
 } from './types';
 import deprecated from '@wordpress/deprecated';
 
@@ -82,56 +82,45 @@ function mode< T >( arr: T[] ) {
 }
 
 /**
- * Gets the 'all' input value and unit from values data.
+ * Gets the merged input value and unit from values data.
  *
  * @param values         Box values.
- * @param selectedUnits  Box units.
  * @param availableSides Available box sides to evaluate.
  *
  * @return A value + unit for the 'all' input.
  */
-export function getAllValue(
+export function getMergedValue(
 	values: BoxControlValue = {},
-	selectedUnits?: BoxControlValue,
 	availableSides: BoxControlProps[ 'sides' ] = ALL_SIDES
 ) {
 	const sides = normalizeSides( availableSides );
-	const parsedQuantitiesAndUnits = sides.map( ( side ) =>
-		parseQuantityAndUnitFromRawValue( values[ side ] )
-	);
-	const allParsedQuantities = parsedQuantitiesAndUnits.map(
-		( value ) => value[ 0 ] ?? ''
-	);
-	const allParsedUnits = parsedQuantitiesAndUnits.map(
-		( value ) => value[ 1 ]
-	);
-
-	const commonQuantity = allParsedQuantities.every(
-		( v ) => v === allParsedQuantities[ 0 ]
-	)
-		? allParsedQuantities[ 0 ]
-		: '';
-
-	/**
-	 * The typeof === 'number' check is important. On reset actions, the incoming value
-	 * may be null or an empty string.
-	 *
-	 * Also, the value may also be zero (0), which is considered a valid unit value.
-	 *
-	 * typeof === 'number' is more specific for these cases, rather than relying on a
-	 * simple truthy check.
-	 */
-	let commonUnit;
-	if ( typeof commonQuantity === 'number' ) {
-		commonUnit = mode( allParsedUnits );
-	} else {
-		// Set meaningful unit selection if no commonQuantity and user has previously
-		// selected units without assigning values while controls were unlinked.
-		commonUnit =
-			getAllUnitFallback( selectedUnits ) ?? mode( allParsedUnits );
+	if (
+		sides.every(
+			( side: keyof BoxControlValue ) =>
+				values[ side ] === values[ sides[ 0 ] ]
+		)
+	) {
+		return values[ sides[ 0 ] ];
 	}
 
-	return [ commonQuantity, commonUnit ].join( '' );
+	return undefined;
+}
+/**
+ * Checks if the values are mixed.
+ *
+ * @param values         Box values.
+ * @param availableSides Available box sides to evaluate.
+ * @return Whether the values are mixed.
+ */
+export function isValueMixed(
+	values: BoxControlValue = {},
+	availableSides: BoxControlProps[ 'sides' ] = ALL_SIDES
+) {
+	const sides = normalizeSides( availableSides );
+	return sides.some(
+		( side: keyof BoxControlValue ) =>
+			values[ side ] !== values[ sides[ 0 ] ]
+	);
 }
 
 /**
@@ -150,26 +139,6 @@ export function getAllUnitFallback( selectedUnits?: BoxControlValue ) {
 	return mode( filteredUnits );
 }
 
-/**
- * Checks to determine if values are mixed.
- *
- * @param values        Box values.
- * @param selectedUnits Box units.
- * @param sides         Available box sides to evaluate.
- *
- * @return Whether values are mixed.
- */
-export function isValuesMixed(
-	values: BoxControlValue = {},
-	selectedUnits?: BoxControlValue,
-	sides: BoxControlProps[ 'sides' ] = ALL_SIDES
-) {
-	const allValue = getAllValue( values, selectedUnits, sides );
-	const isMixed = isNaN( parseFloat( allValue ) );
-
-	return isMixed;
-}
-
 /**
  * Checks to determine if values are defined.
  *
@@ -275,3 +244,59 @@ export function applyValueToSides(
 
 	return newValues;
 }
+
+/**
+ * Checks if a value is a preset value.
+ *
+ * @param value     The value to check.
+ * @param presetKey The preset key to check against.
+ * @return Whether the value is a preset value.
+ */
+export function isValuePreset( value: string, presetKey: string ) {
+	return value.startsWith( `var:preset|${ presetKey }|` );
+}
+
+/**
+ * Returns the index of the preset value in the presets array.
+ *
+ * @param value     The value to check.
+ * @param presetKey The preset key to check against.
+ * @param presets   The array of presets to search.
+ * @return The index of the preset value in the presets array.
+ */
+export function getPresetIndexFromValue(
+	value: string,
+	presetKey: string,
+	presets: Preset[]
+) {
+	if ( ! isValuePreset( value, presetKey ) === undefined ) {
+		return undefined;
+	}
+
+	const match = value.match(
+		new RegExp( `^var:preset\\|${ presetKey }\\|(.+)$` )
+	);
+	const slug = match ? match[ 1 ] : undefined;
+	const index = presets.findIndex( ( preset ) => {
+		return preset.slug === slug;
+	} );
+
+	return index !== -1 ? index : undefined;
+}
+
+/**
+ * Returns the preset value from the index.
+ *
+ * @param index     The index of the preset value in the presets array.
+ * @param presetKey The preset key to check against.
+ * @param presets   The array of presets to search.
+ * @return The preset value from the index.
+ */
+export function getPresetValueFromIndex(
+	index: number,
+	presetKey: string,
+	presets: Preset[]
+) {
+	const preset = presets[ index ];
+	return `var:preset|${ presetKey }|${ preset.slug }`;
+}