diff --git a/packages/components/src/custom-select-control/index.js b/packages/components/src/custom-select-control/index.js
index b6570ec4ae7b91..370ea443230e90 100644
--- a/packages/components/src/custom-select-control/index.js
+++ b/packages/components/src/custom-select-control/index.js
@@ -29,9 +29,9 @@ const stateReducer = (
 			return {
 				selectedItem:
 					items[
-						selectedItem ?
-							Math.min( items.indexOf( selectedItem ) + 1, items.length - 1 ) :
-							0
+						selectedItem
+							? Math.min( items.indexOf( selectedItem ) + 1, items.length - 1 )
+							: 0
 					],
 			};
 		case useSelect.stateChangeTypes.ToggleButtonKeyDownArrowUp:
@@ -40,9 +40,9 @@ const stateReducer = (
 			return {
 				selectedItem:
 					items[
-						selectedItem ?
-							Math.max( items.indexOf( selectedItem ) - 1, 0 ) :
-							items.length - 1
+						selectedItem
+							? Math.max( items.indexOf( selectedItem ) - 1, 0 )
+							: items.length - 1
 					],
 			};
 		default:
@@ -73,6 +73,7 @@ export default function CustomSelectControl( {
 		selectedItem: _selectedItem,
 		stateReducer,
 	} );
+
 	const menuProps = getMenuProps( {
 		className: 'components-custom-select-control__menu',
 	} );
@@ -103,6 +104,7 @@ export default function CustomSelectControl( {
 					'aria-label': label,
 					'aria-labelledby': undefined,
 					className: 'components-custom-select-control__button',
+					isSmall: true,
 				} ) }
 			>
 				{ itemToString( selectedItem ) }
diff --git a/storybook/test/__snapshots__/index.js.snap b/storybook/test/__snapshots__/index.js.snap
index 4444eef5539679..c5e1e1ac918fc1 100644
--- a/storybook/test/__snapshots__/index.js.snap
+++ b/storybook/test/__snapshots__/index.js.snap
@@ -2554,7 +2554,7 @@ exports[`Storyshots Components/CustomSelectControl Default 1`] = `
     aria-expanded={false}
     aria-haspopup="listbox"
     aria-label="Font Size"
-    className="components-button components-custom-select-control__button"
+    className="components-button components-custom-select-control__button is-small"
     id="downshift-null-toggle-button"
     onClick={[Function]}
     onKeyDown={[Function]}
@@ -3092,7 +3092,7 @@ exports[`Storyshots Components/FontSizePicker Default 1`] = `
         aria-expanded={false}
         aria-haspopup="listbox"
         aria-label="Preset Size"
-        className="components-button components-custom-select-control__button"
+        className="components-button components-custom-select-control__button is-small"
         id="downshift-null-toggle-button"
         onClick={[Function]}
         onKeyDown={[Function]}
@@ -3180,7 +3180,7 @@ exports[`Storyshots Components/FontSizePicker With Slider 1`] = `
         aria-expanded={false}
         aria-haspopup="listbox"
         aria-label="Preset Size"
-        className="components-button components-custom-select-control__button"
+        className="components-button components-custom-select-control__button is-small"
         id="downshift-null-toggle-button"
         onClick={[Function]}
         onKeyDown={[Function]}
@@ -3312,7 +3312,7 @@ exports[`Storyshots Components/FontSizePicker Without Custom Sizes 1`] = `
         aria-expanded={false}
         aria-haspopup="listbox"
         aria-label="Preset Size"
-        className="components-button components-custom-select-control__button"
+        className="components-button components-custom-select-control__button is-small"
         id="downshift-null-toggle-button"
         onClick={[Function]}
         onKeyDown={[Function]}