diff --git a/docs/contributors/code/coding-guidelines.md b/docs/contributors/code/coding-guidelines.md
index d8a5220c70ca24..d08f096ae9c414 100644
--- a/docs/contributors/code/coding-guidelines.md
+++ b/docs/contributors/code/coding-guidelines.md
@@ -25,6 +25,7 @@ export default function Notice( { children, onRemove } ) {
 		<div className="components-notice">
 			<div className="components-notice__content">{ children }</div>
 			<Button
+				__next40pxDefaultSize
 				className="components-notice__dismiss"
 				icon={ check }
 				label={ __( 'Dismiss this notice' ) }
diff --git a/docs/explanations/architecture/modularity.md b/docs/explanations/architecture/modularity.md
index ff619ccbfdf5b7..93360d3ab993fc 100644
--- a/docs/explanations/architecture/modularity.md
+++ b/docs/explanations/architecture/modularity.md
@@ -34,7 +34,7 @@ npm install @wordpress/components
 import { Button } from '@wordpress/components';
 
 function MyApp() {
-	return <Button>Nice looking button</Button>;
+	return <Button __next40pxDefaultSize>Nice looking button</Button>;
 }
 ```
 
@@ -51,7 +51,7 @@ wp_register_script( 'myscript', 'pathtomyscript.js', array ('wp-components', "re
 const { Button } = wp.components;
 
 function MyApp() {
-	return <Button>Nice looking button</Button>;
+	return <Button __next40pxDefaultSize>Nice looking button</Button>;
 }
 ```
 
diff --git a/docs/how-to-guides/data-basics/3-building-an-edit-form.md b/docs/how-to-guides/data-basics/3-building-an-edit-form.md
index 1e2b4453e59ee2..c7b828e2a57d29 100644
--- a/docs/how-to-guides/data-basics/3-building-an-edit-form.md
+++ b/docs/how-to-guides/data-basics/3-building-an-edit-form.md
@@ -13,7 +13,7 @@ import { Button } from '@wordpress/components';
 import { decodeEntities } from '@wordpress/html-entities';
 
 const PageEditButton = () => (
-	<Button variant="primary">
+	<Button variant="primary" __next40pxDefaultSize>
 		Edit
 	</Button>
 )
@@ -69,10 +69,10 @@ function EditPageForm( { pageId, onCancel, onSaveFinished } ) {
 				label='Page title:'
 			/>
 			<div className="form-buttons">
-				<Button onClick={ onSaveFinished } variant="primary">
+				<Button onClick={ onSaveFinished } variant="primary" __next40pxDefaultSize>
 					Save
 				</Button>
-				<Button onClick={ onCancel } variant="tertiary">
+				<Button onClick={ onCancel } variant="tertiary" __next40pxDefaultSize>
 					Cancel
 				</Button>
 			</div>
@@ -95,6 +95,7 @@ function PageEditButton({ pageId }) {
 			<Button
 				onClick={ openModal }
 				variant="primary"
+				__next40pxDefaultSize
 			>
 				Edit
 			</Button>
@@ -246,10 +247,10 @@ function EditPageForm( { pageId, onCancel, onSaveFinished } ) {
 				onChange={ handleChange }
 			/>
 			<div className="form-buttons">
-				<Button onClick={ onSaveFinished } variant="primary">
+				<Button onClick={ onSaveFinished } variant="primary" __next40pxDefaultSize>
 					Save
 				</Button>
-				<Button onClick={ onCancel } variant="tertiary">
+				<Button onClick={ onCancel } variant="tertiary" __next40pxDefaultSize>
 					Cancel
 				</Button>
 			</div>
@@ -298,7 +299,7 @@ function EditPageForm( { pageId, onCancel, onSaveFinished } ) {
 		<div className="my-gutenberg-form">
 			{/* ... */}
 			<div className="form-buttons">
-				<Button onClick={ handleSave } variant="primary">
+				<Button onClick={ handleSave } variant="primary" __next40pxDefaultSize>
 					Save
 				</Button>
 				{/* ... */}
@@ -426,7 +427,7 @@ function EditPageForm( { pageId, onSaveFinished } ) {
 	return (
 		// ...
 		<div className="form-buttons">
-			<Button onClick={ handleSave } variant="primary" disabled={ ! hasEdits || isSaving }>
+			<Button onClick={ handleSave } variant="primary" disabled={ ! hasEdits || isSaving } __next40pxDefaultSize>
 				{ isSaving ? (
 					<>
 						<Spinner/>
@@ -438,6 +439,7 @@ function EditPageForm( { pageId, onSaveFinished } ) {
 				onClick={ onCancel }
 				variant="tertiary"
 				disabled={ isSaving }
+				__next40pxDefaultSize
 			>
 				Cancel
 			</Button>
@@ -470,7 +472,7 @@ function PageEditButton( { pageId } ) {
 	const closeModal = () => setOpen( false );
 	return (
 		<>
-			<Button onClick={ openModal } variant="primary">
+			<Button onClick={ openModal } variant="primary" __next40pxDefaultSize>
 				Edit
 			</Button>
 			{ isOpen && (
@@ -525,6 +527,7 @@ function EditPageForm( { pageId, onCancel, onSaveFinished } ) {
 					onClick={ handleSave }
 					variant="primary"
 					disabled={ ! hasEdits || isSaving }
+					__next40pxDefaultSize
 				>
 					{ isSaving ? (
 						<>
@@ -537,6 +540,7 @@ function EditPageForm( { pageId, onCancel, onSaveFinished } ) {
 					onClick={ onCancel }
 					variant="tertiary"
 					disabled={ isSaving }
+					__next40pxDefaultSize
 				>
 					Cancel
 				</Button>
diff --git a/docs/how-to-guides/data-basics/4-building-a-create-page-form.md b/docs/how-to-guides/data-basics/4-building-a-create-page-form.md
index c880a1a3897488..bc3d625ac8ff42 100644
--- a/docs/how-to-guides/data-basics/4-building-a-create-page-form.md
+++ b/docs/how-to-guides/data-basics/4-building-a-create-page-form.md
@@ -18,7 +18,7 @@ function CreatePageButton() {
 	const closeModal = () => setOpen( false );
 	return (
 		<>
-			<Button onClick={ openModal } variant="primary">
+			<Button onClick={ openModal } variant="primary" __next40pxDefaultSize>
 				Create a new Page
 			</Button>
 			{ isOpen && (
@@ -103,6 +103,7 @@ function PageForm( { title, onChangeTitle, hasEdits, lastError, isSaving, onCanc
 					onClick={ onSave }
 					variant="primary"
 					disabled={ !hasEdits || isSaving }
+					__next40pxDefaultSize
 				>
 					{ isSaving ? (
 						<>
@@ -115,6 +116,7 @@ function PageForm( { title, onChangeTitle, hasEdits, lastError, isSaving, onCanc
 					onClick={ onCancel }
 					variant="tertiary"
 					disabled={ isSaving }
+					__next40pxDefaultSize
 				>
 					Cancel
 				</Button>
@@ -364,6 +366,7 @@ function PageForm( { title, onChangeTitle, hasEdits, lastError, isSaving, onCanc
 					onClick={ onSave }
 					variant="primary"
 					disabled={ !hasEdits || isSaving }
+					__next40pxDefaultSize
 				>
 					{ isSaving ? (
 						<>
@@ -376,6 +379,7 @@ function PageForm( { title, onChangeTitle, hasEdits, lastError, isSaving, onCanc
 					onClick={ onCancel }
 					variant="tertiary"
 					disabled={ isSaving }
+					__next40pxDefaultSize
 				>
 					Cancel
 				</Button>
diff --git a/docs/how-to-guides/data-basics/5-adding-a-delete-button.md b/docs/how-to-guides/data-basics/5-adding-a-delete-button.md
index e0a0b0d1e93370..27833b3213ca0b 100644
--- a/docs/how-to-guides/data-basics/5-adding-a-delete-button.md
+++ b/docs/how-to-guides/data-basics/5-adding-a-delete-button.md
@@ -16,7 +16,7 @@ import { Button } from '@wordpress/components';
 import { decodeEntities } from '@wordpress/html-entities';
 
 const DeletePageButton = () => (
-	<Button variant="primary">
+	<Button variant="primary" __next40pxDefaultSize>
 		Delete
 	</Button>
 )
@@ -85,7 +85,7 @@ const DeletePageButton = ({ pageId }) => {
 	const { deleteEntityRecord } = useDispatch( coreDataStore );
 	const handleDelete = () => deleteEntityRecord( 'postType', 'page', pageId );
 	return (
-		<Button variant="primary" onClick={ handleDelete }>
+		<Button variant="primary" onClick={ handleDelete } __next40pxDefaultSize>
 			Delete
 		</Button>
 	);
@@ -108,7 +108,7 @@ const DeletePageButton = ({ pageId }) => {
 		[ pageId ]
 	)
 	return (
-		<Button variant="primary" onClick={ handleDelete } disabled={ isDeleting }>
+		<Button variant="primary" onClick={ handleDelete } disabled={ isDeleting } __next40pxDefaultSize>
 			{ isDeleting ? (
 				<>
 					<Spinner />
@@ -431,7 +431,7 @@ function DeletePageButton( { pageId } ) {
 	);
 
 	return (
-		<Button variant="primary" onClick={ handleDelete } disabled={ isDeleting }>
+		<Button variant="primary" onClick={ handleDelete } disabled={ isDeleting } __next40pxDefaultSize>
 			{ isDeleting ? (
 				<>
 					<Spinner />
diff --git a/docs/how-to-guides/platform/README.md b/docs/how-to-guides/platform/README.md
index 731ae26a1ead58..64d4d2d2344432 100644
--- a/docs/how-to-guides/platform/README.md
+++ b/docs/how-to-guides/platform/README.md
@@ -20,7 +20,7 @@ Usage in React:
 import { Button } from '@wordpress/components';
 
 function MyApp() {
-	return <Button>Hello Button</Button>;
+	return <Button __next40pxDefaultSize>Hello Button</Button>;
 }
 ```
 
diff --git a/docs/reference-guides/data/data-core-customize-widgets.md b/docs/reference-guides/data/data-core-customize-widgets.md
index 8796f4cfea5ddf..2741d7c38bb8a6 100644
--- a/docs/reference-guides/data/data-core-customize-widgets.md
+++ b/docs/reference-guides/data/data-core-customize-widgets.md
@@ -66,6 +66,7 @@ const ExampleComponent = () => {
 				setIsInserterOpened( ! isOpen );
 				setIsOpen( ! isOpen );
 			} }
+			__next40pxDefaultSize
 		>
 			{ __( 'Open/close inserter' ) }
 		</Button>
diff --git a/docs/reference-guides/data/data-core-notices.md b/docs/reference-guides/data/data-core-notices.md
index d36098429811dd..ef7139bf0f98dd 100644
--- a/docs/reference-guides/data/data-core-notices.md
+++ b/docs/reference-guides/data/data-core-notices.md
@@ -71,6 +71,7 @@ const ExampleComponent = () => {
 					explicitDismiss: true,
 				} )
 			}
+			__next40pxDefaultSize
 		>
 			{ __(
 				'Generate an snackbar error notice with explicit dismiss button.'
@@ -114,6 +115,7 @@ const ExampleComponent = () => {
 					isDismissible: false,
 				} )
 			}
+			__next40pxDefaultSize
 		>
 			{ __( 'Generate a notice that cannot be dismissed.' ) }
 		</Button>
@@ -147,6 +149,7 @@ const ExampleComponent = () => {
 	return (
 		<Button
 			onClick={ () => createNotice( 'success', __( 'Notice message' ) ) }
+			__next40pxDefaultSize
 		>
 			{ __( 'Generate a success notice!' ) }
 		</Button>
@@ -199,6 +202,7 @@ const ExampleComponent = () => {
 					icon: '🔥',
 				} )
 			}
+			__next40pxDefaultSize
 		>
 			{ __( 'Generate a snackbar success notice!' ) }
 		</Button>
@@ -245,6 +249,7 @@ const ExampleComponent = () => {
 					},
 				} )
 			}
+			__next40pxDefaultSize
 		>
 			{ __( 'Generates a warning notice with onDismiss callback' ) }
 		</Button>
@@ -285,10 +290,10 @@ export const ExampleComponent = () => {
 					<li key={ notice.id }>{ notice.content }</li>
 				) ) }
 			</ul>
-			<Button onClick={ () => removeAllNotices() }>
+			<Button onClick={ () => removeAllNotices() } __next40pxDefaultSize>
 				{ __( 'Clear all notices', 'woo-gutenberg-products-block' ) }
 			</Button>
-			<Button onClick={ () => removeAllNotices( 'snackbar' ) }>
+			<Button onClick={ () => removeAllNotices( 'snackbar' ) } __next40pxDefaultSize>
 				{ __(
 					'Clear all snackbar notices',
 					'woo-gutenberg-products-block'
@@ -334,11 +339,12 @@ const ExampleComponent = () => {
 						isDismissible: false,
 					} )
 				}
+				__next40pxDefaultSize
 			>
 				{ __( 'Generate a notice' ) }
 			</Button>
 			{ notices.length > 0 && (
-				<Button onClick={ () => removeNotice( notices[ 0 ].id ) }>
+				<Button onClick={ () => removeNotice( notices[ 0 ].id ) } __next40pxDefaultSize>
 					{ __( 'Remove the notice' ) }
 				</Button>
 			) }
@@ -384,6 +390,7 @@ const ExampleComponent = () => {
 				onClick={ () =>
 					removeNotices( notices.map( ( { id } ) => id ) )
 				}
+				__next40pxDefaultSize
 			>
 				{ __( 'Clear all notices' ) }
 			</Button>
diff --git a/docs/reference-guides/slotfills/plugin-document-setting-panel.md b/docs/reference-guides/slotfills/plugin-document-setting-panel.md
index aa3e55abe2f7ee..e84762382184ea 100644
--- a/docs/reference-guides/slotfills/plugin-document-setting-panel.md
+++ b/docs/reference-guides/slotfills/plugin-document-setting-panel.md
@@ -65,6 +65,7 @@ const Example = () => {
 					'plugin-document-setting-panel-demo/custom-panel'
 				);
 			} }
+			__next40pxDefaultSize
 		>
 			Toggle Panels
 		</Button>
@@ -92,6 +93,7 @@ const Example = () => {
 					'plugin-document-setting-panel-demo/custom-panel'
 				);
 			} }
+			__next40pxDefaultSize
 		>
 			Toggle Panels
 		</Button>
diff --git a/docs/reference-guides/slotfills/plugin-sidebar-more-menu-item.md b/docs/reference-guides/slotfills/plugin-sidebar-more-menu-item.md
index 1a1b2540b258b9..e5cca7afdb2ed5 100644
--- a/docs/reference-guides/slotfills/plugin-sidebar-more-menu-item.md
+++ b/docs/reference-guides/slotfills/plugin-sidebar-more-menu-item.md
@@ -61,7 +61,7 @@ const PluginSidebarMoreMenuItemTest = () => {
 						] }
 						onChange={ ( newSelect ) => setSelect( newSelect ) }
 					/>
-					<Button variant="primary">
+					<Button variant="primary" __next40pxDefaultSize>
 						{ __( 'Primary Button' ) }{ ' ' }
 					</Button>
 				</PanelBody>
diff --git a/docs/reference-guides/slotfills/plugin-sidebar.md b/docs/reference-guides/slotfills/plugin-sidebar.md
index 7191b80e54e2d6..e1e085940f997d 100644
--- a/docs/reference-guides/slotfills/plugin-sidebar.md
+++ b/docs/reference-guides/slotfills/plugin-sidebar.md
@@ -54,7 +54,7 @@ const PluginSidebarExample = () => {
 					] }
 					onChange={ ( newSelect ) => setSelect( newSelect ) }
 				/>
-				<Button variant="primary">{ __( 'Primary Button' ) } </Button>
+				<Button variant="primary" __next40pxDefaultSize>{ __( 'Primary Button' ) } </Button>
 			</PanelBody>
 		</PluginSidebar>
 	);
diff --git a/packages/block-editor/src/components/global-styles/README.md b/packages/block-editor/src/components/global-styles/README.md
index 2ddb23cd01f704..4ac608cc123513 100644
--- a/packages/block-editor/src/components/global-styles/README.md
+++ b/packages/block-editor/src/components/global-styles/README.md
@@ -14,7 +14,7 @@ import { useGlobalStylesReset } from '@wordpress/block-editor';
 function MyComponent() {
 	const [ canReset, reset ] = useGlobalStylesReset();
 
-	return canReset ? <Button onClick={ () => reset() }>Reset</Button> : null;
+	return canReset ? <Button onClick={ () => reset() } __next40pxDefaultSize>Reset</Button> : null;
 }
 ```
 
diff --git a/packages/block-editor/src/components/inspector-popover-header/README.md b/packages/block-editor/src/components/inspector-popover-header/README.md
index 697bbed72d973e..ac1eab52d2bddf 100644
--- a/packages/block-editor/src/components/inspector-popover-header/README.md
+++ b/packages/block-editor/src/components/inspector-popover-header/README.md
@@ -15,6 +15,7 @@ const MyPostDatePopover = () => {
 				<Button
 					onClick={ onToggle }
 					aria-expanded={ isOpen }
+					__next40pxDefaultSize
 				>
 					Select post date
 				</Button>
diff --git a/packages/block-editor/src/components/link-control/README.md b/packages/block-editor/src/components/link-control/README.md
index 5c31c4c14371c9..fc06d9f2a635d9 100644
--- a/packages/block-editor/src/components/link-control/README.md
+++ b/packages/block-editor/src/components/link-control/README.md
@@ -281,6 +281,7 @@ If passed, children are rendered after the input.
 			label={ __( 'Submit' ) }
 			icon={ keyboardReturn }
 			className="block-editor-link-control__search-submit"
+			__next40pxDefaultSize
 		/>
 	</HStack>
 </LinkControlSearchInput>
diff --git a/packages/block-editor/src/components/media-upload/README.md b/packages/block-editor/src/components/media-upload/README.md
index 27bbc93d8a2b65..d117bd1f25857c 100644
--- a/packages/block-editor/src/components/media-upload/README.md
+++ b/packages/block-editor/src/components/media-upload/README.md
@@ -41,7 +41,7 @@ function MyMediaUploader() {
 				allowedTypes={ ALLOWED_MEDIA_TYPES }
 				value={ mediaId }
 				render={ ( { open } ) => (
-					<Button onClick={ open }>Open Media Library</Button>
+					<Button onClick={ open } __next40pxDefaultSize>Open Media Library</Button>
 				) }
 			/>
 		</MediaUploadCheck>
diff --git a/packages/block-editor/src/components/publish-date-time-picker/README.md b/packages/block-editor/src/components/publish-date-time-picker/README.md
index a7d92250c7cb0f..cda3ee7d908e9e 100644
--- a/packages/block-editor/src/components/publish-date-time-picker/README.md
+++ b/packages/block-editor/src/components/publish-date-time-picker/README.md
@@ -23,6 +23,7 @@ const MyDateTimePicker = () => {
 				<Button
 					onClick={ onToggle }
 					aria-expanded={ isOpen }
+					__next40pxDefaultSize
 				>
 					Select post date
 				</Button>
diff --git a/packages/block-editor/src/components/url-popover/README.md b/packages/block-editor/src/components/url-popover/README.md
index 08b738eb4ec795..9689a4f39b2744 100644
--- a/packages/block-editor/src/components/url-popover/README.md
+++ b/packages/block-editor/src/components/url-popover/README.md
@@ -58,7 +58,7 @@ class MyURLPopover extends Component {
 
 		return (
 			<>
-				<Button onClick={ this.openURLPopover }>Edit URL</Button>
+				<Button onClick={ this.openURLPopover } __next40pxDefaultSize>Edit URL</Button>
 				{ isVisible && (
 					<URLPopover
 						onClose={ this.closeURLPopover }
@@ -80,6 +80,7 @@ class MyURLPopover extends Component {
 								icon={ keyboardReturn }
 								label={ __( 'Apply' ) }
 								type="submit"
+								__next40pxDefaultSize
 							/>
 						</form>
 					</URLPopover>
diff --git a/packages/block-editor/src/components/warning/README.md b/packages/block-editor/src/components/warning/README.md
index 17505fd616e30d..e09e19c1cf534e 100644
--- a/packages/block-editor/src/components/warning/README.md
+++ b/packages/block-editor/src/components/warning/README.md
@@ -28,7 +28,7 @@ All of the following are optional.
 
 ```js
 <Warning
-	actions={ [ <Button onClick={ fixIssue }>{ __( 'Fix issue' ) }</Button> ] }
+	actions={ [ <Button onClick={ fixIssue } __next40pxDefaultSize>{ __( 'Fix issue' ) }</Button> ] }
 	secondaryActions={ [
 		{
 			title: __( 'Get help' ),
diff --git a/packages/blocks/README.md b/packages/blocks/README.md
index f4805e1c60b381..d9cb180a4a4f6a 100644
--- a/packages/blocks/README.md
+++ b/packages/blocks/README.md
@@ -606,6 +606,7 @@ const ExampleComponent = () => {
 					label: __( 'Fancy Quote' ),
 				} );
 			} }
+			__next40pxDefaultSize
 		>
 			{ __( 'Add a new block style for core/quote' ) }
 		</Button>
@@ -669,6 +670,7 @@ const ExampleComponent = () => {
 					attributes: { providerNameSlug: 'custom' },
 				} );
 			} }
+			__next40pxDefaultSize
 		>
 			__( 'Add a custom variation for core/embed' ) }
 		</Button>
@@ -742,6 +744,7 @@ const ExampleComponent = () => {
 					{ title: 'Custom Category', slug: 'custom-category' },
 				] );
 			} }
+			__next40pxDefaultSize
 		>
 			{ __( 'Add a new custom block category' ) }
 		</Button>
@@ -764,7 +767,7 @@ import { setDefaultBlockName } from '@wordpress/blocks';
 
 const ExampleComponent = () => {
 	return (
-		<Button onClick={ () => setDefaultBlockName( 'core/heading' ) }>
+		<Button onClick={ () => setDefaultBlockName( 'core/heading' ) } __next40pxDefaultSize>
 			{ __( 'Set the default block to Heading' ) }
 		</Button>
 	);
@@ -796,7 +799,7 @@ import { setGroupingBlockName } from '@wordpress/blocks';
 
 const ExampleComponent = () => {
 	return (
-		<Button onClick={ () => setGroupingBlockName( 'core/columns' ) }>
+		<Button onClick={ () => setGroupingBlockName( 'core/columns' ) } __next40pxDefaultSize>
 			{ __( 'Wrap in columns' ) }
 		</Button>
 	);
@@ -892,6 +895,7 @@ const ExampleComponent = () => {
 			onClick={ () => {
 				unregisterBlockStyle( 'core/quote', 'plain' );
 			} }
+			__next40pxDefaultSize
 		>
 			{ __( 'Remove the "Plain" block style for core/quote' ) }
 		</Button>
@@ -918,6 +922,7 @@ const ExampleComponent = () => {
 	return (
 		<Button
 			onClick={ () => unregisterBlockType( 'my-collection/block-name' ) }
+			__next40pxDefaultSize
 		>
 			{ __( 'Unregister my custom block.' ) }
 		</Button>
@@ -950,6 +955,7 @@ const ExampleComponent = () => {
 			onClick={ () => {
 				unregisterBlockVariation( 'core/embed', 'youtube' );
 			} }
+			__next40pxDefaultSize
 		>
 			{ __( 'Remove the YouTube variation from core/embed' ) }
 		</Button>
@@ -979,6 +985,7 @@ const ExampleComponent = () => {
 			onClick={ () => {
 				updateCategory( 'text', { title: __( 'Written Word' ) } );
 			} }
+			__next40pxDefaultSize
 		>
 			{ __( 'Update Text category title' ) }
 		</Button>
diff --git a/packages/components/README.md b/packages/components/README.md
index df92e8db57be42..4007d1372f1478 100644
--- a/packages/components/README.md
+++ b/packages/components/README.md
@@ -21,7 +21,7 @@ Within Gutenberg, these components can be accessed by importing from the `compon
 import { Button } from '@wordpress/components';
 
 export default function MyButton() {
-	return <Button>Click Me!</Button>;
+	return <Button __next40pxDefaultSize>Click Me!</Button>;
 }
 ```
 
diff --git a/packages/components/src/base-control/README.md b/packages/components/src/base-control/README.md
index 839464b41260b5..44a2506531779f 100644
--- a/packages/components/src/base-control/README.md
+++ b/packages/components/src/base-control/README.md
@@ -101,7 +101,7 @@ e.g., a button, but we want an additional visual label for that section equivale
 otherwise use if the `label` prop was passed.
 
 ```jsx
-import { BaseControl } from '@wordpress/components';
+import { BaseControl, Button } from '@wordpress/components';
 
 const MyBaseControl = () => (
 	<BaseControl
@@ -109,7 +109,7 @@ const MyBaseControl = () => (
 		help="This button is already accessibly labeled."
 	>
 		<BaseControl.VisualLabel>Author</BaseControl.VisualLabel>
-		<Button>Select an author</Button>
+		<Button __next40pxDefaultSize>Select an author</Button>
 	</BaseControl>
 );
 ```
diff --git a/packages/components/src/button-group/README.md b/packages/components/src/button-group/README.md
index 5c0179d6877af9..7469b3bb9e0aef 100644
--- a/packages/components/src/button-group/README.md
+++ b/packages/components/src/button-group/README.md
@@ -45,8 +45,8 @@ import { Button, ButtonGroup } from '@wordpress/components';
 
 const MyButtonGroup = () => (
 	<ButtonGroup>
-		<Button variant="primary">Button 1</Button>
-		<Button variant="primary">Button 2</Button>
+		<Button variant="primary" __next40pxDefaultSize>Button 1</Button>
+		<Button variant="primary" __next40pxDefaultSize>Button 2</Button>
 	</ButtonGroup>
 );
 ```
diff --git a/packages/components/src/button/README.md b/packages/components/src/button/README.md
index d458771494a338..30ef6f779450a0 100644
--- a/packages/components/src/button/README.md
+++ b/packages/components/src/button/README.md
@@ -106,7 +106,7 @@ Renders a button with default style.
 ```jsx
 import { Button } from '@wordpress/components';
 
-const MyButton = () => <Button variant="secondary">Click me!</Button>;
+const MyButton = () => <Button variant="secondary" __next40pxDefaultSize>Click me!</Button>;
 ```
 
 ### Props
diff --git a/packages/components/src/card/card-footer/README.md b/packages/components/src/card/card-footer/README.md
index e7f15d846b4fbd..d6f3faac0848cc 100644
--- a/packages/components/src/card/card-footer/README.md
+++ b/packages/components/src/card/card-footer/README.md
@@ -34,7 +34,7 @@ const Example = () => (
 		<CardFooter>
 			<FlexBlock>Content</FlexBlock>
 			<FlexItem>
-				<Button>Action</Button>
+				<Button __next40pxDefaultSize>Action</Button>
 			</FlexItem>
 		</CardFooter>
 	</Card>
diff --git a/packages/components/src/disabled/README.md b/packages/components/src/disabled/README.md
index e9eb6398554d9d..3dec7ae9bc2514 100644
--- a/packages/components/src/disabled/README.md
+++ b/packages/components/src/disabled/README.md
@@ -32,7 +32,7 @@ const MyDisabled = () => {
 	return (
 		<div>
 			{ input }
-			<Button variant="primary" onClick={ toggleDisabled }>
+			<Button variant="primary" onClick={ toggleDisabled } __next40pxDefaultSize>
 				Toggle Disabled
 			</Button>
 		</div>
diff --git a/packages/components/src/dropdown/README.md b/packages/components/src/dropdown/README.md
index 5bb3ec2c3b6e0e..44c2b79abc5ac1 100644
--- a/packages/components/src/dropdown/README.md
+++ b/packages/components/src/dropdown/README.md
@@ -19,6 +19,7 @@ const MyDropdown = () => (
 				variant="primary"
 				onClick={ onToggle }
 				aria-expanded={ isOpen }
+				__next40pxDefaultSize
 			>
 				Toggle Popover!
 			</Button>
diff --git a/packages/components/src/higher-order/with-constrained-tabbing/README.md b/packages/components/src/higher-order/with-constrained-tabbing/README.md
index 417ab7c133fea5..44603c9ad2e02b 100644
--- a/packages/components/src/higher-order/with-constrained-tabbing/README.md
+++ b/packages/components/src/higher-order/with-constrained-tabbing/README.md
@@ -47,7 +47,7 @@ const MyComponentWithConstrainedTabbing = () => {
 	return (
 		<div>
 			{ form }
-			<Button variant="secondary" onClick={ toggleConstrain }>
+			<Button variant="secondary" onClick={ toggleConstrain } __next40pxDefaultSize>
 				{ isConstrainedTabbing ? 'Disable' : 'Enable' } constrain
 				tabbing
 			</Button>
diff --git a/packages/components/src/higher-order/with-fallback-styles/README.md b/packages/components/src/higher-order/with-fallback-styles/README.md
index 1ac16ad7c72be5..f66080b4e17f78 100644
--- a/packages/components/src/higher-order/with-fallback-styles/README.md
+++ b/packages/components/src/higher-order/with-fallback-styles/README.md
@@ -18,7 +18,7 @@ const MyComponentWithFallbackStyles = withFallbackStyles(
 	}
 )( ( { fallbackTextColor, fallbackBackgroundColor } ) => (
 	<div>
-		<Button variant="primary">My button</Button>
+		<Button variant="primary" __next40pxDefaultSize>My button</Button>
 		<div>Text color: { fallbackTextColor }</div>
 		<div>Background color: { fallbackBackgroundColor }</div>
 	</div>
diff --git a/packages/components/src/higher-order/with-focus-return/README.md b/packages/components/src/higher-order/with-focus-return/README.md
index 81cecad4310f11..9a0ee04dd7a9d8 100644
--- a/packages/components/src/higher-order/with-focus-return/README.md
+++ b/packages/components/src/higher-order/with-focus-return/README.md
@@ -40,7 +40,7 @@ const MyComponentWithFocusReturn = () => {
 			/>
 			{ text && <EnhancedComponent /> }
 			{ text && (
-				<Button variant="secondary" onClick={ unmount }>
+				<Button variant="secondary" onClick={ unmount } __next40pxDefaultSize>
 					Unmount
 				</Button>
 			) }
diff --git a/packages/components/src/higher-order/with-notices/README.md b/packages/components/src/higher-order/with-notices/README.md
index 17e1b0e12113b9..c88a33e4bdb4fc 100644
--- a/packages/components/src/higher-order/with-notices/README.md
+++ b/packages/components/src/higher-order/with-notices/README.md
@@ -49,7 +49,7 @@ const MyComponentWithNotices = withNotices(
 		return (
 			<div>
 				{ noticeUI }
-				<Button variant="secondary" onClick={ addError }>
+				<Button variant="secondary" onClick={ addError } __next40pxDefaultSize>
 					Add error
 				</Button>
 			</div>
diff --git a/packages/components/src/higher-order/with-spoken-messages/README.md b/packages/components/src/higher-order/with-spoken-messages/README.md
index 6142b0438b08f3..77c72fce1a7972 100644
--- a/packages/components/src/higher-order/with-spoken-messages/README.md
+++ b/packages/components/src/higher-order/with-spoken-messages/README.md
@@ -11,12 +11,14 @@ const MyComponentWithSpokenMessages = withSpokenMessages(
 			<Button
 				variant="secondary"
 				onClick={ () => speak( 'Spoken message' ) }
+				__next40pxDefaultSize
 			>
 				Speak
 			</Button>
 			<Button
 				variant="secondary"
 				onClick={ () => debouncedSpeak( 'Delayed message' ) }
+				__next40pxDefaultSize
 			>
 				Debounced Speak
 			</Button>
diff --git a/packages/components/src/modal/README.md b/packages/components/src/modal/README.md
index c7c0c8ec6d6348..4603e94f2990ea 100644
--- a/packages/components/src/modal/README.md
+++ b/packages/components/src/modal/README.md
@@ -124,12 +124,12 @@ const MyModal = () => {
 
 	return (
 		<>
-			<Button variant="secondary" onClick={ openModal }>
+			<Button variant="secondary" onClick={ openModal } __next40pxDefaultSize>
 				Open Modal
 			</Button>
 			{ isOpen && (
 				<Modal title="This is my modal" onRequestClose={ closeModal }>
-					<Button variant="secondary" onClick={ closeModal }>
+					<Button variant="secondary" onClick={ closeModal } __next40pxDefaultSize>
 						My custom close button
 					</Button>
 				</Modal>
diff --git a/packages/components/src/navigable-container/README.md b/packages/components/src/navigable-container/README.md
index bbc1f16dcb8f6c..0ae955ad06dabc 100644
--- a/packages/components/src/navigable-container/README.md
+++ b/packages/components/src/navigable-container/README.md
@@ -62,7 +62,6 @@ A `TabbableContainer` will only be navigated using the `tab` key. Every intended
 import {
 	NavigableMenu,
 	TabbableContainer,
-	Button,
 } from '@wordpress/components';
 
 function onNavigate( index, target ) {
@@ -73,25 +72,25 @@ const MyNavigableContainer = () => (
 	<div>
 		<span>Navigable Menu:</span>
 		<NavigableMenu onNavigate={ onNavigate } orientation="horizontal">
-			<Button variant="secondary">Item 1</Button>
-			<Button variant="secondary">Item 2</Button>
-			<Button variant="secondary">Item 3</Button>
+			<button>Item 1</button>
+			<button>Item 2</button>
+			<button>Item 3</button>
 		</NavigableMenu>
 
 		<span>Tabbable Container:</span>
 		<TabbableContainer onNavigate={ onNavigate }>
-			<Button variant="secondary" tabIndex="0">
+			<button tabIndex="0">
 				Section 1
-			</Button>
-			<Button variant="secondary" tabIndex="0">
+			</button>
+			<button tabIndex="0">
 				Section 2
-			</Button>
-			<Button variant="secondary" tabIndex="0">
+			</button>
+			<button tabIndex="0">
 				Section 3
-			</Button>
-			<Button variant="secondary" tabIndex="0">
+			</button>
+			<button tabIndex="0">
 				Section 4
-			</Button>
+			</button>
 		</TabbableContainer>
 	</div>
 );
diff --git a/packages/components/src/popover/README.md b/packages/components/src/popover/README.md
index 32648aa67edf76..61ab8c5b8af5f9 100644
--- a/packages/components/src/popover/README.md
+++ b/packages/components/src/popover/README.md
@@ -21,7 +21,7 @@ const MyPopover = () => {
 	};
 
 	return (
-		<Button variant="secondary" onClick={ toggleVisible }>
+		<Button variant="secondary" onClick={ toggleVisible } __next40pxDefaultSize>
 			Toggle Popover!
 			{ isVisible && <Popover>Popover is toggled!</Popover> }
 		</Button>
@@ -46,7 +46,7 @@ const MyPopover = () => {
 
 	return (
 		<p ref={ setPopoverAnchor }>Popover s anchor</p>
-		<Button variant="secondary" onClick={ toggleVisible }>
+		<Button variant="secondary" onClick={ toggleVisible } __next40pxDefaultSize>
 			Toggle Popover!
 		</Button>
 		{ isVisible && (
diff --git a/packages/components/src/scroll-lock/README.md b/packages/components/src/scroll-lock/README.md
index 4b8542966c3660..7893448ce47a53 100644
--- a/packages/components/src/scroll-lock/README.md
+++ b/packages/components/src/scroll-lock/README.md
@@ -19,7 +19,7 @@ const MyScrollLock = () => {
 
 	return (
 		<div>
-			<Button variant="secondary" onClick={ toggleLock }>
+			<Button variant="secondary" onClick={ toggleLock } __next40pxDefaultSize>
 				Toggle scroll lock
 			</Button>
 			{ isScrollLocked && <ScrollLock /> }
diff --git a/packages/components/src/slot-fill/README.md b/packages/components/src/slot-fill/README.md
index 3f14b9ccde9eeb..230fc557847fd6 100644
--- a/packages/components/src/slot-fill/README.md
+++ b/packages/components/src/slot-fill/README.md
@@ -109,7 +109,7 @@ const { Fill, Slot } = createSlotFill( 'Toolbar' );
 const ToolbarItem = () => (
 	<Fill>
 		{ ( { hideToolbar } ) => {
-			<Button onClick={ hideToolbar }>Hide</Button>;
+			<button onClick={ hideToolbar } >Hide</button>;
 		} }
 	</Fill>
 );
diff --git a/packages/components/src/tree-grid/README.md b/packages/components/src/tree-grid/README.md
index d6e861a7b9b18b..ba3bc6b3a74b0c 100644
--- a/packages/components/src/tree-grid/README.md
+++ b/packages/components/src/tree-grid/README.md
@@ -27,36 +27,36 @@ function TreeMenu() {
 			<TreeGridRow level={ 1 } positionInSet={ 1 } setSize={ 2 }>
 				<TreeGridCell>
 					{ ( props ) => (
-						<Button onClick={ onSelect } { ...props }>Select</Button>
+						<button onClick={ onSelect } { ...props }>Select</button>
 					) }
 				</TreeGridCell>
 				<TreeGridCell>
 					{ ( props ) => (
-						<Button onClick={ onMove } { ...props }>Move</Button>
+						<button onClick={ onMove } { ...props }>Move</button>
 					) }
 				</TreeGridCell>
 			</TreeGridRow>
 			<TreeGridRow level={ 1 } positionInSet={ 2 } setSize={ 2 }>
 				<TreeGridCell>
 					{ ( props ) => (
-						<Button onClick={ onSelect } { ...props }>Select</Button>
+						<button onClick={ onSelect } { ...props }>Select</button>
 					) }
 				</TreeGridCell>
 				<TreeGridCell>
 					{ ( props ) => (
-						<Button onClick={ onMove } { ...props }>Move</Button>
+						<button onClick={ onMove } { ...props }>Move</button>
 					) }
 				</TreeGridCell>
 			</TreeGridRow>
 			<TreeGridRow level={ 2 } positionInSet={ 1 } setSize={ 1 }>
 				<TreeGridCell>
 					{ ( props ) => (
-						<Button onClick={ onSelect } { ...props }>Select</Button>
+						<button onClick={ onSelect } { ...props }>Select</button>
 					) }
 				</TreeGridCell>
 				<TreeGridCell>
 					{ ( props ) => (
-						<Button onClick={ onMove } { ...props }>Move</Button>
+						<button onClick={ onMove } { ...props }>Move</button>
 					) }
 				</TreeGridCell>
 			</TreeGridRow>
@@ -134,7 +134,7 @@ function TreeMenu() {
 			<TreeGridRow level={ 1 } positionInSet={ 1 } setSize={ 2 } isExpanded={ undefined } data-expanded={ false }>
 				<TreeGridCell>
 					{ ( props ) => (
-						<Button aria-expanded="false" onClick={ onSelect } { ...props }>Select</Button>
+						<button aria-expanded="false" onClick={ onSelect } { ...props }>Select</button>
 					) }
 				</TreeGridCell>
 			</TreeGridRow>
@@ -156,9 +156,9 @@ function TreeMenu() {
 ```jsx
 <TreeGridCell>
 	{ ( props ) => (
-		<Button onClick={ doSomething } { ...props }>
+		<button onClick={ doSomething } { ...props }>
 			Do something
-		</Button>
+		</button>
 	) }
 </TreeGridCell>
 ```
diff --git a/packages/compose/README.md b/packages/compose/README.md
index b4e20a79bab0cc..b1eb3a314eb448 100644
--- a/packages/compose/README.md
+++ b/packages/compose/README.md
@@ -201,8 +201,8 @@ const ConstrainedTabbingExample = () => {
 	const constrainedTabbingRef = useConstrainedTabbing();
 	return (
 		<div ref={ constrainedTabbingRef }>
-			<Button />
-			<Button />
+			<button />
+			<button />
 		</div>
 	);
 };
@@ -349,8 +349,8 @@ const WithFocusOnMount = () => {
 	const ref = useFocusOnMount();
 	return (
 		<div ref={ ref }>
-			<Button />
-			<Button />
+			<button />
+			<button />
 		</div>
 	);
 };
@@ -377,8 +377,8 @@ const WithFocusReturn = () => {
 	const ref = useFocusReturn();
 	return (
 		<div ref={ ref }>
-			<Button />
-			<Button />
+			<button />
+			<button />
 		</div>
 	);
 };
diff --git a/packages/compose/src/hooks/use-constrained-tabbing/README.md b/packages/compose/src/hooks/use-constrained-tabbing/README.md
index 112d3fda7d0f1c..d4248d161d44e0 100644
--- a/packages/compose/src/hooks/use-constrained-tabbing/README.md
+++ b/packages/compose/src/hooks/use-constrained-tabbing/README.md
@@ -19,8 +19,8 @@ const ConstrainedTabbingExample = () => {
 	const ref = useConstrainedTabbing();
 	return (
 		<div ref={ ref }>
-			<Button />
-			<Button />
+			<button />
+			<button />
 		</div>
 	);
 };
diff --git a/packages/compose/src/hooks/use-dialog/README.md b/packages/compose/src/hooks/use-dialog/README.md
index 4af2588505d6a8..69780f37767f5a 100644
--- a/packages/compose/src/hooks/use-dialog/README.md
+++ b/packages/compose/src/hooks/use-dialog/README.md
@@ -35,8 +35,8 @@ const MyDialog = () => {
 
 	return (
 		<div ref={ ref } { ...extraProps }>
-			<Button />
-			<Button />
+			<button />
+			<button />
 		</div>
 	);
 };
diff --git a/packages/compose/src/hooks/use-focus-on-mount/README.md b/packages/compose/src/hooks/use-focus-on-mount/README.md
index 79cc5282f90c95..c1d231d51b8d0c 100644
--- a/packages/compose/src/hooks/use-focus-on-mount/README.md
+++ b/packages/compose/src/hooks/use-focus-on-mount/README.md
@@ -19,8 +19,8 @@ const WithFocusOnMount = () => {
 	const ref = useFocusOnMount();
 	return (
 		<div ref={ ref }>
-			<Button />
-			<Button />
+			<button />
+			<button />
 		</div>
 	);
 };
diff --git a/packages/compose/src/hooks/use-focus-return/README.md b/packages/compose/src/hooks/use-focus-return/README.md
index 96a8191541ae87..0e3c3c286a1675 100644
--- a/packages/compose/src/hooks/use-focus-return/README.md
+++ b/packages/compose/src/hooks/use-focus-return/README.md
@@ -19,8 +19,8 @@ const WithFocusReturn = () => {
 	const ref = useFocusReturn();
 	return (
 		<div ref={ ref }>
-			<Button />
-			<Button />
+			<button />
+			<button />
 		</div>
 	);
 };
diff --git a/packages/dataviews/README.md b/packages/dataviews/README.md
index 04b8a40ff3fa7e..c6420b952dc830 100644
--- a/packages/dataviews/README.md
+++ b/packages/dataviews/README.md
@@ -335,6 +335,7 @@ const actions = [
 						onActionPerformed();
 						closeModal();
 					}}
+					__next40pxDefaultSize
 				>
 					Confirm Delete
 				</Button>
@@ -664,10 +665,10 @@ Component to render UI in a modal for the action.
 			<form onSubmit={ onSubmit }>
 				<p>Modal UI</p>
 				<HStack>
-					<Button variant="tertiary" onClick={ closeModal }>
+					<Button variant="tertiary" onClick={ closeModal } __next40pxDefaultSize>
 						Cancel
 					</Button>
-					<Button variant="primary" type="submit">
+					<Button variant="primary" type="submit" __next40pxDefaultSize>
 						Submit
 					</Button>
 				</HStack>