diff --git a/packages/components/src/navigator/README.md b/packages/components/src/navigator/README.md
index b56a82e0524eef..91d2f6f8937f28 100644
--- a/packages/components/src/navigator/README.md
+++ b/packages/components/src/navigator/README.md
@@ -11,13 +11,15 @@ const MyNavigation = () => (
 	<Navigator initialPath="/">
 		<Navigator.Screen path="/">
 			<p>This is the home screen.</p>
-			<Navigator.Button path="/child">
+			<Navigator.Button path="/child" __next40pxDefaultSize>
 				Navigate to child screen.
 			</Navigator.Button>
 		</Navigator.Screen>
 		<Navigator.Screen path="/child">
 			<p>This is the child screen.</p>
-			<Navigator.BackButton>Go back</Navigator.BackButton>
+			<Navigator.BackButton __next40pxDefaultSize>
+				Go back
+			</Navigator.BackButton>
 		</Navigator.Screen>
 	</Navigator>
 );
diff --git a/packages/components/src/navigator/index.tsx b/packages/components/src/navigator/index.tsx
index 1d9ae95441e01a..a427284d9f5fee 100644
--- a/packages/components/src/navigator/index.tsx
+++ b/packages/components/src/navigator/index.tsx
@@ -19,14 +19,14 @@ export { useNavigator } from './use-navigator';
  *   <Navigator initialPath="/">
  *     <Navigator.Screen path="/">
  *       <p>This is the home screen.</p>
- *        <Navigator.Button path="/child">
+ *        <Navigator.Button path="/child" __next40pxDefaultSize>
  *          Navigate to child screen.
  *       </Navigator.Button>
  *     </Navigator.Screen>
  *
  *     <Navigator.Screen path="/child">
  *       <p>This is the child screen.</p>
- *       <Navigator.BackButton>
+ *       <Navigator.BackButton __next40pxDefaultSize>
  *         Go back
  *       </Navigator.BackButton>
  *     </Navigator.Screen>
@@ -48,14 +48,14 @@ export const Navigator = Object.assign( TopLevelNavigator, {
 	 *   <Navigator initialPath="/">
 	 *     <Navigator.Screen path="/">
 	 *       <p>This is the home screen.</p>
-	 *        <Navigator.Button path="/child">
+	 *        <Navigator.Button path="/child" __next40pxDefaultSize>
 	 *          Navigate to child screen.
 	 *       </Navigator.Button>
 	 *     </Navigator.Screen>
 	 *
 	 *     <Navigator.Screen path="/child">
 	 *       <p>This is the child screen.</p>
-	 *       <Navigator.BackButton>
+	 *       <Navigator.BackButton __next40pxDefaultSize>
 	 *         Go back
 	 *       </Navigator.BackButton>
 	 *     </Navigator.Screen>
@@ -79,14 +79,14 @@ export const Navigator = Object.assign( TopLevelNavigator, {
 	 *   <Navigator initialPath="/">
 	 *     <Navigator.Screen path="/">
 	 *       <p>This is the home screen.</p>
-	 *        <Navigator.Button path="/child">
+	 *        <Navigator.Button path="/child" __next40pxDefaultSize>
 	 *          Navigate to child screen.
 	 *       </Navigator.Button>
 	 *     </Navigator.Screen>
 	 *
 	 *     <Navigator.Screen path="/child">
 	 *       <p>This is the child screen.</p>
-	 *       <Navigator.BackButton>
+	 *       <Navigator.BackButton __next40pxDefaultSize>
 	 *         Go back
 	 *       </Navigator.BackButton>
 	 *     </Navigator.Screen>
@@ -110,14 +110,14 @@ export const Navigator = Object.assign( TopLevelNavigator, {
 	 *   <Navigator initialPath="/">
 	 *     <Navigator.Screen path="/">
 	 *       <p>This is the home screen.</p>
-	 *        <Navigator.Button path="/child">
+	 *        <Navigator.Button path="/child" __next40pxDefaultSize>
 	 *          Navigate to child screen.
 	 *       </Navigator.Button>
 	 *     </Navigator.Screen>
 	 *
 	 *     <Navigator.Screen path="/child">
 	 *       <p>This is the child screen.</p>
-	 *       <Navigator.BackButton>
+	 *       <Navigator.BackButton __next40pxDefaultSize>
 	 *         Go back
 	 *       </Navigator.BackButton>
 	 *     </Navigator.Screen>