diff --git a/versioned_docs/version-7.x/auth-flow.md b/versioned_docs/version-7.x/auth-flow.md
index 45a59f2f02..b36c427c51 100755
--- a/versioned_docs/version-7.x/auth-flow.md
+++ b/versioned_docs/version-7.x/auth-flow.md
@@ -457,9 +457,10 @@ import * as React from 'react';
 import * as SecureStore from 'expo-secure-store';
 
 // codeblock-focus-end
-import { Button, Text, TextInput, View } from 'react-native';
+import { Text, TextInput, View } from 'react-native';
 import { createStaticNavigation } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { Button } from '@react-navigation/elements';
 
 const AuthContext = React.createContext();
 
@@ -489,7 +490,7 @@ function HomeScreen() {
   return (
     <View>
       <Text>Signed in!</Text>
-      <Button title="Sign out" onPress={signOut} />
+      <Button onPress={signOut}>Sign out</Button>
     </View>
   );
 }
@@ -513,7 +514,7 @@ function SignInScreen() {
         onChangeText={setPassword}
         secureTextEntry
       />
-      <Button title="Sign in" onPress={() => signIn({ username, password })} />
+      <Button onPress={() => signIn({ username, password })}>Sign in</Button>
     </View>
   );
 }
@@ -644,9 +645,10 @@ import * as React from 'react';
 import * as SecureStore from 'expo-secure-store';
 
 // codeblock-focus-end
-import { Button, Text, TextInput, View } from 'react-native';
+import { Text, TextInput, View } from 'react-native';
 import { NavigationContainer } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { Button } from '@react-navigation/elements';
 
 const AuthContext = React.createContext();
 
@@ -664,7 +666,7 @@ function HomeScreen() {
   return (
     <View>
       <Text>Signed in!</Text>
-      <Button title="Sign out" onPress={signOut} />
+      <Button onPress={signOut}>Sign out</Button>
     </View>
   );
 }
@@ -688,7 +690,7 @@ function SignInScreen() {
         onChangeText={setPassword}
         secureTextEntry
       />
-      <Button title="Sign in" onPress={() => signIn({ username, password })} />
+      <Button onPress={() => signIn({ username, password })}>Sign in</Button>
     </View>
   );
 }
@@ -829,7 +831,7 @@ function SignInScreen() {
         onChangeText={setPassword}
         secureTextEntry
       />
-      <Button title="Sign in" onPress={() => signIn({ username, password })} />
+      <Button onPress={() => signIn({ username, password })}>Sign in</Button>
     </View>
   );
 }
diff --git a/versioned_docs/version-7.x/bottom-tab-navigator.md b/versioned_docs/version-7.x/bottom-tab-navigator.md
index 7586aefaca..41f0b61adb 100755
--- a/versioned_docs/version-7.x/bottom-tab-navigator.md
+++ b/versioned_docs/version-7.x/bottom-tab-navigator.md
@@ -27,11 +27,12 @@ To use this navigator, import it from `@react-navigation/bottom-tabs`:
 
 ```js name="Bottom Tab Navigator" snack version=7
 import * as React from 'react';
-import { Text, View, Button } from 'react-native';
+import { Text, View } from 'react-native';
 import {
   createStaticNavigation,
   useNavigation,
 } from '@react-navigation/native';
+import { Button } from '@react-navigation/elements';
 // codeblock-focus-start
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 
@@ -42,10 +43,9 @@ function HomeScreen() {
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Home Screen</Text>
-      <Button
-        title="Go to Profile"
-        onPress={() => navigation.navigate('Profile')}
-      />
+      <Button onPress={() => navigation.navigate('Profile')}>
+        Go to Profile
+      </Button>
     </View>
   );
 }
@@ -56,7 +56,7 @@ function ProfileScreen() {
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Profile Screen</Text>
-      <Button title="Go to Home" onPress={() => navigation.navigate('Home')} />
+      <Button onPress={() => navigation.navigate('Home')}>Go to Home</Button>
     </View>
   );
 }
@@ -82,8 +82,9 @@ export default function App() {
 
 ```js name="Bottom Tab Navigator" snack version=7
 import * as React from 'react';
-import { Text, View, Button } from 'react-native';
+import { Text, View } from 'react-native';
 import { NavigationContainer, useNavigation } from '@react-navigation/native';
+import { Button } from '@react-navigation/elements';
 // codeblock-focus-start
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 
@@ -105,10 +106,9 @@ function HomeScreen() {
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Home Screen</Text>
-      <Button
-        title="Go to Profile"
-        onPress={() => navigation.navigate('Profile')}
-      />
+      <Button onPress={() => navigation.navigate('Profile')}>
+        Go to Profile
+      </Button>
     </View>
   );
 }
@@ -119,7 +119,7 @@ function ProfileScreen() {
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Profile Screen</Text>
-      <Button title="Go to Home" onPress={() => navigation.navigate('Home')} />
+      <Button onPress={() => navigation.navigate('Home')}>Go to Home</Button>
     </View>
   );
 }
@@ -252,12 +252,13 @@ Note that you **cannot** use the `useNavigation` hook inside the `tabBar` since
 function MyTabBar({ navigation }) {
   return (
     <Button
-      title="Go somewhere"
       onPress={() => {
         // Navigate using the `navigation` prop that you received
         navigation.navigate('SomeScreen');
       }}
-    />
+    >
+      Go somewhere
+    </Button>
   );
 }
 ```
@@ -384,7 +385,7 @@ import { BlurView } from 'expo-blur';
 >
 ```
 
-When using `BlurView`, make sure to set `position: 'absolute'` in `tabBarStyle` as well. You'd also need to use [`useBottomTabBarHeight`](#usebottomtabbarheight) to add a bottom padding to your content.
+When using `BlurView`, make sure to set `position: 'absolute'` in `tabBarStyle` as well. You'd also need to use [`useBottomTabBarHeight`](#usebottomtabbarheight) to add bottom padding to your content.
 
 #### `tabBarPosition`
 
diff --git a/versioned_docs/version-7.x/custom-android-back-button-handling.md b/versioned_docs/version-7.x/custom-android-back-button-handling.md
index 8e7a96d75a..7ceeb2761b 100755
--- a/versioned_docs/version-7.x/custom-android-back-button-handling.md
+++ b/versioned_docs/version-7.x/custom-android-back-button-handling.md
@@ -20,17 +20,11 @@ Returning `true` from `onBackPress` denotes that we have handled the event, and
 
 ```js name="Custom android back button" snack version=7
 import * as React from 'react';
-import {
-  Pressable,
-  Text,
-  View,
-  Button,
-  BackHandler,
-  StyleSheet,
-} from 'react-native';
+import { Text, View, BackHandler, StyleSheet } from 'react-native';
 import { createStaticNavigation } from '@react-navigation/native';
 import { useFocusEffect } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { PlatformPressable, Button } from '@react-navigation/elements';
 
 const listData = [{ key: 'Apple' }, { key: 'Orange' }, { key: 'Carrot' }];
 
@@ -70,7 +64,7 @@ function ScreenWithCustomBackBehavior() {
       {listData.map((item) => (
         <>
           {isSelectionModeEnabled ? (
-            <Pressable
+            <PlatformPressable
               onPress={() => {
                 setSelected(item.key);
               }}
@@ -86,7 +80,7 @@ function ScreenWithCustomBackBehavior() {
               >
                 {item.key}
               </Text>
-            </Pressable>
+            </PlatformPressable>
           ) : (
             <Text style={styles.text}>
               {item.key === selected ? 'Selected: ' : ''}
@@ -96,9 +90,10 @@ function ScreenWithCustomBackBehavior() {
         </>
       ))}
       <Button
-        title="Toggle selection mode"
         onPress={() => setIsSelectionModeEnabled(!isSelectionModeEnabled)}
-      />
+      >
+        Toggle selection mode
+      </Button>
       <Text>Selection mode: {isSelectionModeEnabled ? 'ON' : 'OFF'}</Text>
     </View>
   );
@@ -138,17 +133,11 @@ const styles = StyleSheet.create({
 
 ```js name="Custom android back button" snack version=7
 import * as React from 'react';
-import {
-  Pressable,
-  Text,
-  View,
-  Button,
-  BackHandler,
-  StyleSheet,
-} from 'react-native';
+import { Text, View, BackHandler, StyleSheet } from 'react-native';
 import { NavigationContainer } from '@react-navigation/native';
 import { useFocusEffect } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { PlatformPressable, Button } from '@react-navigation/elements';
 
 const Stack = createNativeStackNavigator();
 
@@ -190,7 +179,7 @@ function ScreenWithCustomBackBehavior() {
       {listData.map((item) => (
         <>
           {isSelectionModeEnabled ? (
-            <Pressable
+            <PlatformPressable
               onPress={() => {
                 setSelected(item.key);
               }}
@@ -206,7 +195,7 @@ function ScreenWithCustomBackBehavior() {
               >
                 {item.key}
               </Text>
-            </Pressable>
+            </PlatformPressable>
           ) : (
             <Text style={styles.text}>
               {item.key === selected ? 'Selected: ' : ''}
@@ -216,9 +205,10 @@ function ScreenWithCustomBackBehavior() {
         </>
       ))}
       <Button
-        title="Toggle selection mode"
         onPress={() => setIsSelectionModeEnabled(!isSelectionModeEnabled)}
-      />
+      >
+        Toggle selection mode
+      </Button>
       <Text>Selection mode: {isSelectionModeEnabled ? 'ON' : 'OFF'}</Text>
     </View>
   );
diff --git a/versioned_docs/version-7.x/drawer-based-navigation.md b/versioned_docs/version-7.x/drawer-based-navigation.md
index 383796ea63..453eb57612 100755
--- a/versioned_docs/version-7.x/drawer-based-navigation.md
+++ b/versioned_docs/version-7.x/drawer-based-navigation.md
@@ -25,22 +25,22 @@ To use this drawer navigator, import it from `@react-navigation/drawer`:
 
 ```js name="Drawer navigation" snack version=7
 import * as React from 'react';
-import { Button, View } from 'react-native';
+import { View } from 'react-native';
 import { createDrawerNavigator } from '@react-navigation/drawer';
 import {
   createStaticNavigation,
   useNavigation,
 } from '@react-navigation/native';
+import { Button } from '@react-navigation/elements';
 
 function HomeScreen() {
   const navigation = useNavigation();
 
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
-      <Button
-        onPress={() => navigation.navigate('Notifications')}
-        title="Go to notifications"
-      />
+      <Button onPress={() => navigation.navigate('Notifications')}>
+        Go to notifications
+      </Button>
     </View>
   );
 }
@@ -50,7 +50,7 @@ function NotificationsScreen() {
 
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
-      <Button onPress={() => navigation.goBack()} title="Go back home" />
+      <Button onPress={() => navigation.goBack()}>Go back home</Button>
     </View>
   );
 }
@@ -74,19 +74,19 @@ export default function App() {
 
 ```js name="Drawer navigation" snack version=7
 import * as React from 'react';
-import { Button, View } from 'react-native';
+import { View } from 'react-native';
 import { createDrawerNavigator } from '@react-navigation/drawer';
 import { NavigationContainer, useNavigation } from '@react-navigation/native';
+import { Button } from '@react-navigation/elements';
 
 function HomeScreen() {
   const navigation = useNavigation();
 
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
-      <Button
-        onPress={() => navigation.navigate('Notifications')}
-        title="Go to notifications"
-      />
+      <Button onPress={() => navigation.navigate('Notifications')}>
+        Go to notifications
+      </Button>
     </View>
   );
 }
@@ -96,7 +96,7 @@ function NotificationsScreen() {
 
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
-      <Button onPress={() => navigation.goBack()} title="Go back home" />
+      <Button onPress={() => navigation.goBack()}>Go back home</Button>
     </View>
   );
 }
@@ -126,7 +126,7 @@ To open and close drawer, use the following helpers:
 
 ```js name="Drawer open and close" snack version=7
 import * as React from 'react';
-import { View, Text, Button } from 'react-native';
+import { View, Text } from 'react-native';
 import {
   useNavigation,
   createStaticNavigation,
@@ -137,6 +137,7 @@ import {
   DrawerItemList,
   DrawerItem,
 } from '@react-navigation/drawer';
+import { Button } from '@react-navigation/elements';
 
 function Feed() {
   const navigation = useNavigation();
@@ -145,9 +146,9 @@ function Feed() {
     <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
       <Text>Feed Screen</Text>
       // codeblock-focus-start
-      <Button title="Open drawer" onPress={() => navigation.openDrawer()} />
+      <Button onPress={() => navigation.openDrawer()}>Open drawer</Button>
       // codeblock-focus-end
-      <Button title="Toggle drawer" onPress={() => navigation.toggleDrawer()} />
+      <Button onPress={() => navigation.toggleDrawer()}>Toggle drawer</Button>
     </View>
   );
 }
@@ -204,7 +205,7 @@ export default function App() {
 
 ```js name="Drawer open and close" snack version=7
 import * as React from 'react';
-import { View, Text, Button } from 'react-native';
+import { View, Text } from 'react-native';
 import { NavigationContainer, useNavigation } from '@react-navigation/native';
 import {
   createDrawerNavigator,
@@ -212,6 +213,7 @@ import {
   DrawerItemList,
   DrawerItem,
 } from '@react-navigation/drawer';
+import { Button } from '@react-navigation/elements';
 
 function Feed() {
   const navigation = useNavigation();
@@ -220,9 +222,9 @@ function Feed() {
     <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
       <Text>Feed Screen</Text>
       // codeblock-focus-start
-      <Button title="Open drawer" onPress={() => navigation.openDrawer()} />
+      <Button onPress={() => navigation.openDrawer()}>Open drawer</Button>
       // codeblock-focus-end
-      <Button title="Toggle drawer" onPress={() => navigation.toggleDrawer()} />
+      <Button onPress={() => navigation.toggleDrawer()}>Toggle drawer</Button>
     </View>
   );
 }
@@ -292,7 +294,7 @@ If you would like to toggle the drawer you call the following:
 
 ```js name="Drawer toggle" snack version=7
 import * as React from 'react';
-import { View, Text, Button } from 'react-native';
+import { View, Text } from 'react-native';
 import {
   useNavigation,
   createStaticNavigation,
@@ -303,6 +305,7 @@ import {
   DrawerItemList,
   DrawerItem,
 } from '@react-navigation/drawer';
+import { Button } from '@react-navigation/elements';
 
 function Feed() {
   const navigation = useNavigation();
@@ -310,9 +313,9 @@ function Feed() {
   return (
     <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
       <Text>Feed Screen</Text>
-      <Button title="Open drawer" onPress={() => navigation.openDrawer()} />
+      <Button onPress={() => navigation.openDrawer()}>Open drawer</Button>
       // codeblock-focus-start
-      <Button title="Toggle drawer" onPress={() => navigation.toggleDrawer()} />
+      <Button onPress={() => navigation.toggleDrawer()}>Toggle drawer</Button>
       // codeblock-focus-end
     </View>
   );
@@ -362,7 +365,7 @@ export default function App() {
 
 ```js name="Drawer toggle" snack version=7
 import * as React from 'react';
-import { View, Text, Button } from 'react-native';
+import { View, Text } from 'react-native';
 import { NavigationContainer, useNavigation } from '@react-navigation/native';
 import {
   createDrawerNavigator,
@@ -370,6 +373,7 @@ import {
   DrawerItemList,
   DrawerItem,
 } from '@react-navigation/drawer';
+import { Button } from '@react-navigation/elements';
 
 function Feed() {
   const navigation = useNavigation();
@@ -377,9 +381,9 @@ function Feed() {
   return (
     <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
       <Text>Feed Screen</Text>
-      <Button title="Open drawer" onPress={() => navigation.openDrawer()} />
+      <Button onPress={() => navigation.openDrawer()}>Open drawer</Button>
       // codeblock-focus-start
-      <Button title="Toggle drawer" onPress={() => navigation.toggleDrawer()} />
+      <Button onPress={() => navigation.toggleDrawer()}>Toggle drawer</Button>
       // codeblock-focus-end
     </View>
   );
@@ -442,7 +446,7 @@ Each of these functions, behind the scenes, are simply dispatching actions:
 
 ```js name="Navigation dispatcher" snack version=7
 import * as React from 'react';
-import { View, Text, Button } from 'react-native';
+import { View, Text } from 'react-native';
 import {
   createStaticNavigation,
   useNavigation,
@@ -454,6 +458,7 @@ import {
   DrawerItemList,
   DrawerItem,
 } from '@react-navigation/drawer';
+import { Button } from '@react-navigation/elements';
 
 function Feed() {
   const navigation = useNavigation();
@@ -462,15 +467,13 @@ function Feed() {
     <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
       <Text>Feed Screen</Text>
       // codeblock-focus-start
-      <Button
-        title="Open drawer"
-        onPress={() => navigation.dispatch(DrawerActions.openDrawer())}
-      />
+      <Button onPress={() => navigation.dispatch(DrawerActions.openDrawer())}>
+        Open drawer
+      </Button>
       // codeblock-focus-end
-      <Button
-        title="Toggle drawer"
-        onPress={() => navigation.dispatch(DrawerActions.toggleDrawer())}
-      />
+      <Button onPress={() => navigation.dispatch(DrawerActions.toggleDrawer())}>
+        Toggle drawer
+      </Button>
     </View>
   );
 }
@@ -527,7 +530,7 @@ export default function App() {
 
 ```js name="Navigation dispatcher" snack version=7
 import * as React from 'react';
-import { View, Text, Button } from 'react-native';
+import { View, Text } from 'react-native';
 import {
   NavigationContainer,
   useNavigation,
@@ -539,6 +542,7 @@ import {
   DrawerItemList,
   DrawerItem,
 } from '@react-navigation/drawer';
+import { Button } from '@react-navigation/elements';
 
 function Feed() {
   const navigation = useNavigation();
@@ -547,15 +551,13 @@ function Feed() {
     <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
       <Text>Feed Screen</Text>
       // codeblock-focus-start
-      <Button
-        title="Open drawer"
-        onPress={() => navigation.dispatch(DrawerActions.openDrawer())}
-      />
+      <Button onPress={() => navigation.dispatch(DrawerActions.openDrawer())}>
+        Open drawer
+      </Button>
       // codeblock-focus-end
-      <Button
-        title="Toggle drawer"
-        onPress={() => navigation.dispatch(DrawerActions.toggleDrawer())}
-      />
+      <Button onPress={() => navigation.dispatch(DrawerActions.toggleDrawer())}>
+        Toggle drawer
+      </Button>
     </View>
   );
 }
diff --git a/versioned_docs/version-7.x/drawer-layout.md b/versioned_docs/version-7.x/drawer-layout.md
index 0c7e5b1c5d..3ca6e1a4de 100644
--- a/versioned_docs/version-7.x/drawer-layout.md
+++ b/versioned_docs/version-7.x/drawer-layout.md
@@ -62,8 +62,9 @@ We're done! Now you can build and run the app on your device/simulator.
 
 ```js
 import * as React from 'react';
-import { Button, Text } from 'react-native';
+import { Text } from 'react-native';
 import { Drawer } from 'react-native-drawer-layout';
+import { Button } from '@react-navigation/elements';
 
 export default function DrawerExample() {
   const [open, setOpen] = React.useState(false);
diff --git a/versioned_docs/version-7.x/drawer-navigator.md b/versioned_docs/version-7.x/drawer-navigator.md
index 8f6e7cd3a5..dced01f3d5 100644
--- a/versioned_docs/version-7.x/drawer-navigator.md
+++ b/versioned_docs/version-7.x/drawer-navigator.md
@@ -65,11 +65,12 @@ To use this navigator, import it from `@react-navigation/drawer`:
 
 ```js name="Drawer Navigator" snack version=7
 import * as React from 'react';
-import { Text, View, Button } from 'react-native';
+import { Text, View } from 'react-native';
 import {
   createStaticNavigation,
   useNavigation,
 } from '@react-navigation/native';
+import { Button } from '@react-navigation/elements';
 // codeblock-focus-start
 import { createDrawerNavigator } from '@react-navigation/drawer';
 
@@ -80,10 +81,9 @@ function HomeScreen() {
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Home Screen</Text>
-      <Button
-        title="Go to Profile"
-        onPress={() => navigation.navigate('Profile')}
-      />
+      <Button onPress={() => navigation.navigate('Profile')}>
+        Go to Profile
+      </Button>
     </View>
   );
 }
@@ -94,7 +94,7 @@ function ProfileScreen() {
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Profile Screen</Text>
-      <Button title="Go to Home" onPress={() => navigation.navigate('Home')} />
+      <Button onPress={() => navigation.navigate('Home')}>Go to Home</Button>
     </View>
   );
 }
@@ -120,8 +120,9 @@ export default function App() {
 
 ```js name="Drawer Navigator" snack version=7
 import * as React from 'react';
-import { Text, View, Button } from 'react-native';
+import { Text, View } from 'react-native';
 import { NavigationContainer, useNavigation } from '@react-navigation/native';
+import { Button } from '@react-navigation/elements';
 // codeblock-focus-start
 import { createDrawerNavigator } from '@react-navigation/drawer';
 
@@ -143,10 +144,9 @@ function HomeScreen() {
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Home Screen</Text>
-      <Button
-        title="Go to Profile"
-        onPress={() => navigation.navigate('Profile')}
-      />
+      <Button onPress={() => navigation.navigate('Profile')}>
+        Go to Profile
+      </Button>
     </View>
   );
 }
@@ -157,7 +157,7 @@ function ProfileScreen() {
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Profile Screen</Text>
-      <Button title="Go to Home" onPress={() => navigation.navigate('Home')} />
+      <Button onPress={() => navigation.navigate('Home')}>Go to Home</Button>
     </View>
   );
 }
@@ -276,12 +276,13 @@ Note that you **cannot** use the `useNavigation` hook inside the `drawerContent`
 function CustomDrawerContent({ navigation }) {
   return (
     <Button
-      title="Go somewhere"
       onPress={() => {
         // Navigate using the `navigation` prop that you received
         navigation.navigate('SomeScreen');
       }}
-    />
+    >
+      Go somewhere
+    </Button>
   );
 }
 ```
@@ -638,8 +639,9 @@ The `progress` object is a `SharedValue` that represents the animated position o
 
 ```js name="Drawer animation progress" snack version=7
 import * as React from 'react';
-import { Text, View, Button } from 'react-native';
+import { Text, View } from 'react-native';
 import { createStaticNavigation } from '@react-navigation/native';
+import { Button } from '@react-navigation/elements';
 // codeblock-focus-start
 import {
   createDrawerNavigator,
@@ -690,8 +692,9 @@ export default function App() {
 
 ```js name="Drawer animation progress" snack version=7
 import * as React from 'react';
-import { Text, View, Button } from 'react-native';
+import { Text, View } from 'react-native';
 import { NavigationContainer } from '@react-navigation/native';
+import { Button } from '@react-navigation/elements';
 // codeblock-focus-start
 import {
   createDrawerNavigator,
diff --git a/versioned_docs/version-7.x/elements.md b/versioned_docs/version-7.x/elements.md
index 39c26fdcbe..44e987fd0c 100644
--- a/versioned_docs/version-7.x/elements.md
+++ b/versioned_docs/version-7.x/elements.md
@@ -401,12 +401,13 @@ For example, you can use this with `headerTransparent` to render a blur view to
 
 ```js name="Header blur" snack version=7 dependencies=expo-blur
 import * as React from 'react';
-import { Button, View, StyleSheet } from 'react-native';
+import { View, StyleSheet } from 'react-native';
 import {
   createStaticNavigation,
   useNavigation,
 } from '@react-navigation/native';
 import { createStackNavigator } from '@react-navigation/stack';
+import { Button } from '@react-navigation/elements';
 import { BlurView } from 'expo-blur';
 
 function HomeScreen() {
@@ -414,10 +415,9 @@ function HomeScreen() {
 
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
-      <Button
-        title="Go to Profile"
-        onPress={() => navigation.navigate('Profile')}
-      />
+      <Button onPress={() => navigation.navigate('Profile')}>
+        Go to Profile
+      </Button>
     </View>
   );
 }
@@ -427,7 +427,7 @@ function ProfileScreen() {
 
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
-      <Button title="Go back" onPress={() => navigation.goBack()} />
+      <Button onPress={() => navigation.goBack()}>Go back</Button>
     </View>
   );
 }
@@ -468,9 +468,10 @@ export default App;
 
 ```js name="Header blur" snack version=7 dependencies=expo-blur
 import * as React from 'react';
-import { Button, View, StyleSheet } from 'react-native';
+import { View, StyleSheet } from 'react-native';
 import { NavigationContainer, useNavigation } from '@react-navigation/native';
 import { createStackNavigator } from '@react-navigation/stack';
+import { Button } from '@react-navigation/elements';
 // codeblock-focus-start
 import { BlurView } from 'expo-blur';
 
@@ -481,10 +482,9 @@ function HomeScreen() {
 
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
-      <Button
-        title="Go to Profile"
-        onPress={() => navigation.navigate('Profile')}
-      />
+      <Button onPress={() => navigation.navigate('Profile')}>
+        Go to Profile
+      </Button>
     </View>
   );
 }
@@ -494,7 +494,7 @@ function ProfileScreen() {
 
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
-      <Button title="Go back" onPress={() => navigation.goBack()} />
+      <Button onPress={() => navigation.goBack()}>Go back</Button>
     </View>
   );
 }
@@ -648,13 +648,15 @@ In addition, the button integrates with React Navigation and accepts the same pr
 It can be used to navigate between screens by specifying a screen name and params:
 
 ```js
-<Button title="Go to Profile" screen="Profile" params={{ userId: 'jane' }} />
+<Button screen="Profile" params={{ userId: 'jane' }}>
+  Go to Profile
+</Button>
 ```
 
 Or as a regular button:
 
 ```js
-<Button title="Press me" onPress={() => console.log('button pressed')} />
+<Button onPress={() => console.log('button pressed')}>Press me</Button>
 ```
 
 ### `Label`
diff --git a/versioned_docs/version-7.x/header-buttons.md b/versioned_docs/version-7.x/header-buttons.md
index 0e349a403e..41b88af88a 100755
--- a/versioned_docs/version-7.x/header-buttons.md
+++ b/versioned_docs/version-7.x/header-buttons.md
@@ -18,9 +18,10 @@ The most common way to interact with a header is by tapping on a button either t
 
 ```js name="Header button" snack version=7
 import * as React from 'react';
-import { Text, View, Button } from 'react-native';
+import { Text, View } from 'react-native';
 import { createStaticNavigation } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { Button } from '@react-navigation/elements';
 
 function HomeScreen() {
   return (
@@ -38,7 +39,7 @@ const MyStack = createNativeStackNavigator({
       options: {
         // highlight-start
         headerRight: () => (
-          <Button onPress={() => alert('This is a button!')} title="Info" />
+          <Button onPress={() => alert('This is a button!')}>Info</Button>
         ),
         // highlight-end
       },
@@ -59,9 +60,10 @@ export default function App() {
 
 ```js name="Header button" snack version=7
 import * as React from 'react';
-import { Text, View, Button } from 'react-native';
+import { Text, View } from 'react-native';
 import { NavigationContainer } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { Button } from '@react-navigation/elements';
 
 function HomeScreen() {
   return (
@@ -83,7 +85,7 @@ function MyStack() {
         options={{
           // highlight-start
           headerRight: () => (
-            <Button onPress={() => alert('This is a button!')} title="Info" />
+            <Button onPress={() => alert('This is a button!')}>Info</Button>
           ),
           // highlight-end
         }}
@@ -124,12 +126,13 @@ In some cases, components in the header need to interact with the screen compone
 
 ```js name="Header button" snack version=7
 import * as React from 'react';
-import { Text, View, Button } from 'react-native';
+import { Text, View } from 'react-native';
 import {
   createStaticNavigation,
   useNavigation,
 } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { Button } from '@react-navigation/elements';
 
 // codeblock-focus-start
 function HomeScreen() {
@@ -142,7 +145,7 @@ function HomeScreen() {
     // highlight-start
     navigation.setOptions({
       headerRight: () => (
-        <Button onPress={() => setCount((c) => c + 1)} title="Update count" />
+        <Button onPress={() => setCount((c) => c + 1)}>Update count</Button>
       ),
     });
     // highlight-end
@@ -158,7 +161,7 @@ const MyStack = createNativeStackNavigator({
       options: {
         // Add a placeholder button without the `onPress` to avoid flicker
         // highlight-next-line
-        headerRight: () => <Button title="Update count" />,
+        headerRight: () => <Button>Update count</Button>,
       },
     },
   },
@@ -177,9 +180,10 @@ export default function App() {
 
 ```js name="Header button" snack version=7
 import * as React from 'react';
-import { Text, View, Button } from 'react-native';
+import { Text, View } from 'react-native';
 import { NavigationContainer, useNavigation } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { Button } from '@react-navigation/elements';
 
 const Stack = createNativeStackNavigator();
 
@@ -194,7 +198,7 @@ function HomeScreen() {
     // highlight-start
     navigation.setOptions({
       headerRight: () => (
-        <Button onPress={() => setCount((c) => c + 1)} title="Update count" />
+        <Button onPress={() => setCount((c) => c + 1)}>Update count</Button>
       ),
     });
     // highlight-end
@@ -212,7 +216,7 @@ function MyStack() {
         options={{
           // Add a placeholder button without the `onPress` to avoid flicker
           // highlight-next-line
-          headerRight: () => <Button title="Update count" />,
+          headerRight: () => <Button>Update count</Button>,
         }}
       />
     </Stack.Navigator>
diff --git a/versioned_docs/version-7.x/headers.md b/versioned_docs/version-7.x/headers.md
index 41d585de09..38d332e2b9 100755
--- a/versioned_docs/version-7.x/headers.md
+++ b/versioned_docs/version-7.x/headers.md
@@ -112,12 +112,13 @@ In order to use params in the title, we need to make `options` for the screen a
 
 ```js name="Using params in the title" snack version=7
 import * as React from 'react';
-import { Text, View, Button } from 'react-native';
+import { Text, View } from 'react-native';
 import {
   createStaticNavigation,
   useNavigation,
 } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { Button } from '@react-navigation/elements';
 
 function HomeScreen() {
   const navigation = useNavigation();
@@ -125,13 +126,14 @@ function HomeScreen() {
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Button
-        title="Go to Profile"
         onPress={() =>
           navigation.navigate('Profile', {
             name: 'Jane',
           })
         }
-      />
+      >
+        Go to Profile
+      </Button>
     </View>
   );
 }
@@ -177,9 +179,10 @@ export default function App() {
 
 ```js name="Using params in the title" snack version=7
 import * as React from 'react';
-import { Text, View, Button } from 'react-native';
+import { Text, View } from 'react-native';
 import { NavigationContainer, useNavigation } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { Button } from '@react-navigation/elements';
 
 function HomeScreen() {
   const navigation = useNavigation();
@@ -187,13 +190,14 @@ function HomeScreen() {
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Button
-        title="Go to Profile"
         onPress={() =>
           navigation.navigate('Profile', {
             name: 'Jane',
           })
         }
-      />
+      >
+        Go to Profile
+      </Button>
     </View>
   );
 }
@@ -256,12 +260,13 @@ It's often necessary to update the `options` configuration for the active screen
 
 ```js name="Updating options" snack version=7
 import * as React from 'react';
-import { Text, View, Button } from 'react-native';
+import { Text, View } from 'react-native';
 import {
   createStaticNavigation,
   useNavigation,
 } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { Button } from '@react-navigation/elements';
 
 function HomeScreen() {
   const navigation = useNavigation();
@@ -271,12 +276,13 @@ function HomeScreen() {
       <Text>Home Screen</Text>
       // codeblock-focus-start
       <Button
-        title="Update the title"
         onPress={() =>
           // highlight-next-line
           navigation.setOptions({ title: 'Updated!' })
         }
-      />
+      >
+        Update the title
+      </Button>
       // codeblock-focus-end
     </View>
   );
@@ -359,7 +365,7 @@ export default function App() {
 
 ```js name="Header styles" snack version=7
 import * as React from 'react';
-import { Text, View, Button } from 'react-native';
+import { Text, View } from 'react-native';
 import { NavigationContainer } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 
@@ -426,12 +432,13 @@ It is common to want to configure the header in a similar way across many screen
 
 ```js name="Common screen options" snack version=7
 import * as React from 'react';
-import { Text, View, Button } from 'react-native';
+import { Text, View } from 'react-native';
 import {
   createStaticNavigation,
   useNavigation,
 } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { Button } from '@react-navigation/elements';
 
 function HomeScreen() {
   const navigation = useNavigation();
@@ -439,10 +446,9 @@ function HomeScreen() {
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Home Screen</Text>
-      <Button
-        title="Go to Details"
-        onPress={() => navigation.navigate('Details')}
-      />
+      <Button onPress={() => navigation.navigate('Details')}>
+        Go to Details
+      </Button>
     </View>
   );
 }
@@ -491,9 +497,10 @@ export default function App() {
 
 ```js name="Common screen options" snack version=7
 import * as React from 'react';
-import { Text, View, Button } from 'react-native';
+import { Text, View } from 'react-native';
 import { NavigationContainer, useNavigation } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { Button } from '@react-navigation/elements';
 
 function HomeScreen() {
   const navigation = useNavigation();
@@ -501,10 +508,9 @@ function HomeScreen() {
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Home Screen</Text>
-      <Button
-        title="Go to Details"
-        onPress={() => navigation.navigate('Details')}
-      />
+      <Button onPress={() => navigation.navigate('Details')}>
+        Go to Details
+      </Button>
     </View>
   );
 }
diff --git a/versioned_docs/version-7.x/hiding-tabbar-in-screens.md b/versioned_docs/version-7.x/hiding-tabbar-in-screens.md
index cd3cbb10c6..23712816fc 100644
--- a/versioned_docs/version-7.x/hiding-tabbar-in-screens.md
+++ b/versioned_docs/version-7.x/hiding-tabbar-in-screens.md
@@ -75,13 +75,14 @@ But if we want to show the tab bar only on the `Home`, `Feed` and `Notifications
 
 ```js name="Hiding tabbar" snack version=7
 import * as React from 'react';
-import { Text, View, Button } from 'react-native';
+import { Text, View } from 'react-native';
 import {
   createStaticNavigation,
   useNavigation,
 } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { Button } from '@react-navigation/elements';
 
 function EmptyScreen() {
   return <View />;
@@ -93,14 +94,12 @@ function Home() {
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Home Screen</Text>
-      <Button
-        title="Go to Profile"
-        onPress={() => navigation.navigate('Profile')}
-      />
-      <Button
-        title="Go to Settings"
-        onPress={() => navigation.navigate('Settings')}
-      />
+      <Button onPress={() => navigation.navigate('Profile')}>
+        Go to Profile
+      </Button>
+      <Button onPress={() => navigation.navigate('Settings')}>
+        Go to Settings
+      </Button>
     </View>
   );
 }
@@ -136,10 +135,11 @@ export default function App() {
 
 ```js name="Hiding tabbar" snack version=7
 import * as React from 'react';
-import { Text, View, Button } from 'react-native';
+import { Text, View } from 'react-native';
 import { NavigationContainer, useNavigation } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { Button } from '@react-navigation/elements';
 
 const Tab = createBottomTabNavigator();
 const Stack = createNativeStackNavigator();
@@ -154,14 +154,12 @@ function Home() {
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Home Screen</Text>
-      <Button
-        title="Go to Profile"
-        onPress={() => navigation.navigate('Profile')}
-      />
-      <Button
-        title="Go to Settings"
-        onPress={() => navigation.navigate('Settings')}
-      />
+      <Button onPress={() => navigation.navigate('Profile')}>
+        Go to Profile
+      </Button>
+      <Button onPress={() => navigation.navigate('Settings')}>
+        Go to Settings
+      </Button>
     </View>
   );
 }
diff --git a/versioned_docs/version-7.x/material-top-tab-navigator.md b/versioned_docs/version-7.x/material-top-tab-navigator.md
index 3ac362ca6d..ff9fc56264 100755
--- a/versioned_docs/version-7.x/material-top-tab-navigator.md
+++ b/versioned_docs/version-7.x/material-top-tab-navigator.md
@@ -49,11 +49,12 @@ To use this navigator, import it from `@react-navigation/material-top-tabs`:
 
 ```js name="Material Top Tab Navigator" snack version=7
 import * as React from 'react';
-import { Text, View, Button } from 'react-native';
+import { Text, View } from 'react-native';
 import {
   createStaticNavigation,
   useNavigation,
 } from '@react-navigation/native';
+import { Button } from '@react-navigation/elements';
 // codeblock-focus-start
 import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
 
@@ -64,10 +65,9 @@ function HomeScreen() {
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Home Screen</Text>
-      <Button
-        title="Go to Profile"
-        onPress={() => navigation.navigate('Profile')}
-      />
+      <Button onPress={() => navigation.navigate('Profile')}>
+        Go to Profile
+      </Button>
     </View>
   );
 }
@@ -78,7 +78,7 @@ function ProfileScreen() {
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Profile Screen</Text>
-      <Button title="Go to Home" onPress={() => navigation.navigate('Home')} />
+      <Button onPress={() => navigation.navigate('Home')}>Go to Home</Button>
     </View>
   );
 }
@@ -104,8 +104,9 @@ export default function App() {
 
 ```js name="Material Top Tab Navigator" snack version=7
 import * as React from 'react';
-import { Text, View, Button } from 'react-native';
+import { Text, View } from 'react-native';
 import { NavigationContainer, useNavigation } from '@react-navigation/native';
+import { Button } from '@react-navigation/elements';
 // codeblock-focus-start
 import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
 
@@ -127,10 +128,9 @@ function HomeScreen() {
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Home Screen</Text>
-      <Button
-        title="Go to Profile"
-        onPress={() => navigation.navigate('Profile')}
-      />
+      <Button onPress={() => navigation.navigate('Profile')}>
+        Go to Profile
+      </Button>
     </View>
   );
 }
@@ -141,7 +141,7 @@ function ProfileScreen() {
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Profile Screen</Text>
-      <Button title="Go to Home" onPress={() => navigation.navigate('Home')} />
+      <Button onPress={() => navigation.navigate('Home')}>Go to Home</Button>
     </View>
   );
 }
@@ -296,12 +296,14 @@ Note that you **cannot** use the `useNavigation` hook inside the `tabBar` since
 function MyTabBar({ navigation }) {
   return (
     <Button
-      title="Go somewhere"
       onPress={() => {
         // Navigate using the `navigation` prop that you received
+        // highlight-next-line
         navigation.navigate('SomeScreen');
       }}
-    />
+    >
+      Go somewhere
+    </Button>
   );
 }
 ```
diff --git a/versioned_docs/version-7.x/modal.md b/versioned_docs/version-7.x/modal.md
index c5d8da9c1f..a2117440a9 100755
--- a/versioned_docs/version-7.x/modal.md
+++ b/versioned_docs/version-7.x/modal.md
@@ -20,12 +20,13 @@ A modal is like a popup &mdash; it usually has a different transition animation,
 
 ```js name="Modal" snack version=7
 import * as React from 'react';
-import { View, Text, Button } from 'react-native';
+import { View, Text } from 'react-native';
 import {
   createStaticNavigation,
   useNavigation,
 } from '@react-navigation/native';
 import { createStackNavigator } from '@react-navigation/stack';
+import { Button } from '@react-navigation/elements';
 
 // codeblock-focus-start
 function HomeScreen() {
@@ -34,10 +35,7 @@ function HomeScreen() {
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text style={{ fontSize: 30 }}>This is the home screen!</Text>
-      <Button
-        onPress={() => navigation.navigate('MyModal')}
-        title="Open Modal"
-      />
+      <Button onPress={() => navigation.navigate('MyModal')}>Open Modal</Button>
     </View>
   );
 }
@@ -48,7 +46,7 @@ function ModalScreen() {
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text style={{ fontSize: 30 }}>This is a modal!</Text>
-      <Button onPress={() => navigation.goBack()} title="Dismiss" />
+      <Button onPress={() => navigation.goBack()}>Dismiss</Button>
     </View>
   );
 }
@@ -114,9 +112,10 @@ export default function App() {
 
 ```js name="Modal" snack version=7
 import * as React from 'react';
-import { View, Text, Button } from 'react-native';
+import { View, Text } from 'react-native';
 import { NavigationContainer, useNavigation } from '@react-navigation/native';
 import { createStackNavigator } from '@react-navigation/stack';
+import { Button } from '@react-navigation/elements';
 
 // codeblock-focus-start
 function HomeScreen() {
@@ -125,10 +124,7 @@ function HomeScreen() {
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text style={{ fontSize: 30 }}>This is the home screen!</Text>
-      <Button
-        onPress={() => navigation.navigate('MyModal')}
-        title="Open Modal"
-      />
+      <Button onPress={() => navigation.navigate('MyModal')}>Open Modal</Button>
     </View>
   );
 }
@@ -139,7 +135,7 @@ function ModalScreen() {
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text style={{ fontSize: 30 }}>This is a modal!</Text>
-      <Button onPress={() => navigation.goBack()} title="Dismiss" />
+      <Button onPress={() => navigation.goBack()}>Dismiss</Button>
     </View>
   );
 }
diff --git a/versioned_docs/version-7.x/multiple-drawers.md b/versioned_docs/version-7.x/multiple-drawers.md
index 7cfd5bfb89..c28f98dd1d 100644
--- a/versioned_docs/version-7.x/multiple-drawers.md
+++ b/versioned_docs/version-7.x/multiple-drawers.md
@@ -23,20 +23,21 @@ In such cases, we can use [`react-native-drawer-layout`](drawer-layout.md) direc
 
 ```js
 import * as React from 'react';
-import { Button, View } from 'react-native';
+import { View } from 'react-native';
 import { Drawer } from 'react-native-drawer-layout';
 import { createDrawerNavigator } from '@react-navigation/drawer';
 import {
   createStaticNavigation,
   useNavigation,
 } from '@react-navigation/native';
+import { Button } from '@react-navigation/elements';
 
 function HomeScreen() {
   const navigation = useNavigation();
 
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
-      <Button onPress={() => navigation.openDrawer()} title="Open drawer" />
+      <Button onPress={() => navigation.openDrawer()}>Open drawer</Button>
     </View>
   );
 }
@@ -78,17 +79,18 @@ export default function App() {
 
 ```js
 import * as React from 'react';
-import { Button, View } from 'react-native';
+import { View } from 'react-native';
 import { Drawer } from 'react-native-drawer-layout';
 import { useNavigation } from '@react-navigation/native';
 import { createDrawerNavigator } from '@react-navigation/drawer';
+import { Button } from '@react-navigation/elements';
 
 function HomeScreen() {
   const navigation = useNavigation();
 
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
-      <Button onPress={() => navigation.openDrawer()} title="Open drawer" />
+      <Button onPress={() => navigation.openDrawer()}>Open drawer</Button>
     </View>
   );
 }
@@ -140,13 +142,14 @@ To solve this, we need to use context API to pass down a function to control the
 
 ```js
 import * as React from 'react';
-import { Button, View } from 'react-native';
+import { View } from 'react-native';
 import { Drawer } from 'react-native-drawer-layout';
 import { createDrawerNavigator } from '@react-navigation/drawer';
 import {
   useNavigation,
   createStaticNavigation,
 } from '@react-navigation/native';
+import { Button } from '@react-navigation/elements';
 
 const RightDrawerContext = React.createContext();
 
@@ -156,11 +159,8 @@ function HomeScreen() {
 
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
-      <Button
-        onPress={() => navigation.openDrawer()}
-        title="Open left drawer"
-      />
-      <Button onPress={() => openRightDrawer()} title="Open right drawer" />
+      <Button onPress={() => navigation.openDrawer()}>Open left drawer</Button>
+      <Button onPress={() => openRightDrawer()}>Open right drawer</Button>
     </View>
   );
 }
@@ -212,10 +212,11 @@ export default function App() {
 
 ```js
 import * as React from 'react';
-import { Button, View } from 'react-native';
+import { View } from 'react-native';
 import { Drawer } from 'react-native-drawer-layout';
 import { useNavigation } from '@react-navigation/native';
 import { createDrawerNavigator } from '@react-navigation/drawer';
+import { Button } from '@react-navigation/elements';
 
 const RightDrawerContext = React.createContext();
 
@@ -225,11 +226,8 @@ function HomeScreen() {
 
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
-      <Button
-        onPress={() => navigation.openDrawer()}
-        title="Open left drawer"
-      />
-      <Button onPress={() => openRightDrawer()} title="Open right drawer" />
+      <Button onPress={() => navigation.openDrawer()}>Open left drawer</Button>
+      <Button onPress={() => openRightDrawer()}>Open right drawer</Button>
     </View>
   );
 }
@@ -295,19 +293,20 @@ Here we have 2 drawer navigators nested inside each other, one is positioned on
 
 ```js name="Multiple drawers" snack version=7
 import * as React from 'react';
-import { Button, View } from 'react-native';
+import { View } from 'react-native';
 import { createDrawerNavigator } from '@react-navigation/drawer';
 import {
   createStaticNavigation,
   useNavigation,
 } from '@react-navigation/native';
+import { Button } from '@react-navigation/elements';
 
 function HomeScreen() {
   const navigation = useNavigation();
 
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
-      <Button onPress={() => navigation.openDrawer()} title="Open drawer" />
+      <Button onPress={() => navigation.openDrawer()}>Open drawer</Button>
     </View>
   );
 }
@@ -343,16 +342,17 @@ export default function App() {
 
 ```js name="Multiple drawers" snack version=7
 import * as React from 'react';
-import { Button, View } from 'react-native';
+import { View } from 'react-native';
 import { createDrawerNavigator } from '@react-navigation/drawer';
 import { NavigationContainer, useNavigation } from '@react-navigation/native';
+import { Button } from '@react-navigation/elements';
 
 function HomeScreen() {
   const navigation = useNavigation();
 
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
-      <Button onPress={() => navigation.openDrawer()} title="Open drawer" />
+      <Button onPress={() => navigation.openDrawer()}>Open drawer</Button>
     </View>
   );
 }
@@ -400,8 +400,8 @@ But there is one problem. When we call `navigation.openDrawer()` in our `HomeScr
 To solve this, we need to use [`navigation.getParent`](navigation-object.md#getparent) to refer to the right drawer which is the parent of the left drawer. So our code would look like:
 
 ```js
-<Button onPress={() => navigation.openDrawer()} title="Open left drawer" />
-<Button onPress={() => navigation.getParent().openDrawer()} title="Open right drawer" />
+<Button onPress={() => navigation.openDrawer()} >Open left drawer</Button>
+<Button onPress={() => navigation.getParent().openDrawer()}>Open right drawer</Button>
 ```
 
 However, this means that our button needs to know about the parent navigators, which isn't ideal. If our button is further nested inside other navigators, it'd need multiple `getParent()` calls. To address this, we can use the [`id` prop](drawer-navigator.md#id) to identify the parent navigator.
@@ -415,26 +415,25 @@ The final code would look like this:
 
 ```js name="Multiple drawers navigators" snack version=7
 import * as React from 'react';
-import { Button, Text, View } from 'react-native';
+import { Text, View } from 'react-native';
 import { createDrawerNavigator } from '@react-navigation/drawer';
 import {
   createStaticNavigation,
   useNavigation,
 } from '@react-navigation/native';
+import { Button } from '@react-navigation/elements';
 
 function HomeScreen() {
   const navigation = useNavigation();
 
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
-      <Button
-        onPress={() => navigation.getParent('LeftDrawer').openDrawer()}
-        title="Open left drawer"
-      />
-      <Button
-        onPress={() => navigation.getParent('RightDrawer').openDrawer()}
-        title="Open right drawer"
-      />
+      <Button onPress={() => navigation.getParent('LeftDrawer').openDrawer()}>
+        Open left drawer
+      </Button>
+      <Button onPress={() => navigation.getParent('RightDrawer').openDrawer()}>
+        Open right drawer
+      </Button>
     </View>
   );
 }
@@ -481,23 +480,22 @@ export default function App() {
 
 ```js name="Multiple drawers navigators" snack version=7
 import * as React from 'react';
-import { Button, Text, View } from 'react-native';
+import { Text, View } from 'react-native';
 import { createDrawerNavigator } from '@react-navigation/drawer';
 import { NavigationContainer, useNavigation } from '@react-navigation/native';
+import { Button } from '@react-navigation/elements';
 
 function HomeScreen() {
   const navigation = useNavigation();
 
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
-      <Button
-        onPress={() => navigation.getParent('LeftDrawer').openDrawer()}
-        title="Open left drawer"
-      />
-      <Button
-        onPress={() => navigation.getParent('RightDrawer').openDrawer()}
-        title="Open right drawer"
-      />
+      <Button onPress={() => navigation.getParent('LeftDrawer').openDrawer()}>
+        Open left drawer
+      </Button>
+      <Button onPress={() => navigation.getParent('RightDrawer').openDrawer()}>
+        Open right drawer
+      </Button>
     </View>
   );
 }
diff --git a/versioned_docs/version-7.x/native-stack-navigator.md b/versioned_docs/version-7.x/native-stack-navigator.md
index a7a1ce585b..61125f06e1 100755
--- a/versioned_docs/version-7.x/native-stack-navigator.md
+++ b/versioned_docs/version-7.x/native-stack-navigator.md
@@ -35,11 +35,12 @@ To use this navigator, import it from `@react-navigation/native-stack`:
 
 ```js name="Native Stack Navigator" snack version=7
 import * as React from 'react';
-import { Text, View, Button } from 'react-native';
+import { Text, View } from 'react-native';
 import {
   createStaticNavigation,
   useNavigation,
 } from '@react-navigation/native';
+import { Button } from '@react-navigation/elements';
 // codeblock-focus-start
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 
@@ -50,10 +51,9 @@ function HomeScreen() {
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Home Screen</Text>
-      <Button
-        title="Go to Profile"
-        onPress={() => navigation.navigate('Profile')}
-      />
+      <Button onPress={() => navigation.navigate('Profile')}>
+        Go to Profile
+      </Button>
     </View>
   );
 }
@@ -87,8 +87,9 @@ export default function App() {
 
 ```js name="Native Stack Navigator" snack version=7
 import * as React from 'react';
-import { Text, View, Button } from 'react-native';
+import { Text, View } from 'react-native';
 import { NavigationContainer, useNavigation } from '@react-navigation/native';
+import { Button } from '@react-navigation/elements';
 // codeblock-focus-start
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 
@@ -110,10 +111,9 @@ function HomeScreen() {
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Home Screen</Text>
-      <Button
-        title="Go to Profile"
-        onPress={() => navigation.navigate('Profile')}
-      />
+      <Button onPress={() => navigation.navigate('Profile')}>
+        Go to Profile
+      </Button>
     </View>
   );
 }
@@ -741,7 +741,7 @@ React.useEffect(() => {
 
 ### Helpers
 
-The nativestack navigator adds the following methods to the navigation object:
+The native stack navigator adds the following methods to the navigation object:
 
 #### `replace`
 
diff --git a/versioned_docs/version-7.x/navigating-without-navigation-prop.md b/versioned_docs/version-7.x/navigating-without-navigation-prop.md
index 88bcff29f4..c6f1608925 100755
--- a/versioned_docs/version-7.x/navigating-without-navigation-prop.md
+++ b/versioned_docs/version-7.x/navigating-without-navigation-prop.md
@@ -83,12 +83,13 @@ Then, in any of your javascript modules, import the `RootNavigation` and call fu
 
 ```js name="Using navigate in any js module" snack version=7
 import * as React from 'react';
-import { View, Button, Text } from 'react-native';
+import { View, Text } from 'react-native';
 import {
   createStaticNavigation,
   createNavigationContainerRef,
 } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { Button } from '@react-navigation/elements';
 
 const navigationRef = createNavigationContainerRef();
 
@@ -109,10 +110,9 @@ function navigate(name, params) {
 function Home() {
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
-      <Button
-        title="Go to Settings"
-        onPress={() => navigate('Settings', { userName: 'Lucy' })}
-      />
+      <Button onPress={() => navigate('Settings', { userName: 'Lucy' })}>
+        Go to Settings
+      </Button>
     </View>
   );
 }
@@ -122,7 +122,7 @@ function Settings({ route }) {
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Hello {route.params.userName}</Text>
-      <Button title="Go to Home" onPress={() => navigate('Home')} />
+      <Button onPress={() => navigate('Home')}>Go to Home</Button>
     </View>
   );
 }
@@ -146,12 +146,13 @@ export default function App() {
 
 ```js name="Using navigate in any js module" snack version=7
 import * as React from 'react';
-import { View, Button, Text } from 'react-native';
+import { View, Text } from 'react-native';
 import {
   NavigationContainer,
   createNavigationContainerRef,
 } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { Button } from '@react-navigation/elements';
 
 const navigationRef = createNavigationContainerRef();
 
@@ -172,10 +173,9 @@ function navigate(name, params) {
 function Home() {
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
-      <Button
-        title="Go to Settings"
-        onPress={() => navigate('Settings', { userName: 'Lucy' })}
-      />
+      <Button onPress={() => navigate('Settings', { userName: 'Lucy' })}>
+        Go to Settings
+      </Button>
     </View>
   );
 }
@@ -185,7 +185,7 @@ function Settings({ route }) {
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Hello {route.params.userName}</Text>
-      <Button title="Go to Home" onPress={() => navigate('Home')} />
+      <Button onPress={() => navigate('Home')}>Go to Home</Button>
     </View>
   );
 }
@@ -243,12 +243,13 @@ To avoid this, you can use the `isReady()` method available on the ref as shown
 
 ```js name="Handling navigation init" snack version=7
 import * as React from 'react';
-import { Text, View, Button } from 'react-native';
+import { Text, View } from 'react-native';
 import {
   createStaticNavigation,
   createNavigationContainerRef,
 } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { Button } from '@react-navigation/elements';
 
 // codeblock-focus-start
 const navigationRef = createNavigationContainerRef();
@@ -268,7 +269,7 @@ function Home() {
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Home</Text>
-      <Button title="Go to Profile" onPress={() => navigate('Profile')} />
+      <Button onPress={() => navigate('Profile')}>Go to Profile</Button>
     </View>
   );
 }
@@ -300,12 +301,13 @@ export default function App() {
 
 ```js name="Handling navigation init" snack version=7
 import * as React from 'react';
-import { Text, View, Button } from 'react-native';
+import { Text, View } from 'react-native';
 import {
   NavigationContainer,
   createNavigationContainerRef,
 } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { Button } from '@react-navigation/elements';
 
 const Stack = createNativeStackNavigator();
 // codeblock-focus-start
@@ -326,7 +328,7 @@ function Home() {
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Home</Text>
-      <Button title="Go to Profile" onPress={() => navigate('Profile')} />
+      <Button onPress={() => navigate('Profile')}>Go to Profile</Button>
     </View>
   );
 }
diff --git a/versioned_docs/version-7.x/navigating.md b/versioned_docs/version-7.x/navigating.md
index 75d00c7a25..d989bd04b2 100755
--- a/versioned_docs/version-7.x/navigating.md
+++ b/versioned_docs/version-7.x/navigating.md
@@ -31,12 +31,13 @@ We'll do something similar to the latter, but rather than using a `window.locati
 ```js name="Navigating to a new screen" snack version=7
 // codeblock-focus-start
 import * as React from 'react';
-import { Button, View, Text } from 'react-native';
+import { View, Text } from 'react-native';
 import {
   createStaticNavigation,
   useNavigation,
 } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { Button } from '@react-navigation/elements';
 
 function HomeScreen() {
   const navigation = useNavigation();
@@ -44,10 +45,9 @@ function HomeScreen() {
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Home Screen</Text>
-      <Button
-        title="Go to Details"
-        onPress={() => navigation.navigate('Details')}
-      />
+      <Button onPress={() => navigation.navigate('Details')}>
+        Go to Details
+      </Button>
     </View>
   );
 }
@@ -99,12 +99,13 @@ So we now have a stack with two routes: 1) the `Home` route 2) the `Details` rou
 
 ```js name="Navigate to a screen multiple times" snack version=7
 import * as React from 'react';
-import { Button, View, Text } from 'react-native';
+import { View, Text } from 'react-native';
 import {
   createStaticNavigation,
   useNavigation,
 } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { Button } from '@react-navigation/elements';
 
 function HomeScreen() {
   const navigation = useNavigation();
@@ -112,10 +113,9 @@ function HomeScreen() {
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Home Screen</Text>
-      <Button
-        title="Go to Details"
-        onPress={() => navigation.navigate('Details')}
-      />
+      <Button onPress={() => navigation.navigate('Details')}>
+        Go to Details
+      </Button>
     </View>
   );
 }
@@ -127,10 +127,9 @@ function DetailsScreen() {
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Details Screen</Text>
-      <Button
-        title="Go to Details... again"
-        onPress={() => navigation.navigate('Details')}
-      />
+      <Button onPress={() => navigation.navigate('Details')}>
+        Go to Details... again
+      </Button>
     </View>
   );
 }
@@ -157,12 +156,13 @@ Let's suppose that we actually _want_ to add another details screen. This is pre
 
 ```js name="Navigate to a screen multiple times" snack version=7
 import * as React from 'react';
-import { Button, View, Text } from 'react-native';
+import { View, Text } from 'react-native';
 import {
   createStaticNavigation,
   useNavigation,
 } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { Button } from '@react-navigation/elements';
 
 function HomeScreen() {
   const navigation = useNavigation();
@@ -170,10 +170,9 @@ function HomeScreen() {
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Home Screen</Text>
-      <Button
-        title="Go to Details"
-        onPress={() => navigation.navigate('Details')}
-      />
+      <Button onPress={() => navigation.navigate('Details')}>
+        Go to Details
+      </Button>
     </View>
   );
 }
@@ -185,10 +184,9 @@ function DetailsScreen() {
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Details Screen</Text>
       // codeblock-focus-start
-      <Button
-        title="Go to Details... again"
-        onPress={() => navigation.push('Details')}
-      />
+      <Button onPress={() => navigation.push('Details')}>
+        Go to Details... again
+      </Button>
       // codeblock-focus-end
     </View>
   );
@@ -223,12 +221,13 @@ Sometimes you'll want to be able to programmatically trigger this behavior, and
 
 ```js name="Going back" snack version=7
 import * as React from 'react';
-import { Button, View, Text } from 'react-native';
+import { View, Text } from 'react-native';
 import {
   createStaticNavigation,
   useNavigation,
 } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { Button } from '@react-navigation/elements';
 
 function HomeScreen() {
   const navigation = useNavigation();
@@ -236,10 +235,9 @@ function HomeScreen() {
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Home Screen</Text>
-      <Button
-        title="Go to Details"
-        onPress={() => navigation.navigate('Details')}
-      />
+      <Button onPress={() => navigation.navigate('Details')}>
+        Go to Details
+      </Button>
     </View>
   );
 }
@@ -251,12 +249,11 @@ function DetailsScreen() {
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Details Screen</Text>
-      <Button
-        title="Go to Details... again"
-        onPress={() => navigation.push('Details')}
-      />
+      <Button onPress={() => navigation.push('Details')}>
+        Go to Details... again
+      </Button>
       // highlight-start
-      <Button title="Go back" onPress={() => navigation.goBack()} />
+      <Button onPress={() => navigation.goBack()}>Go back</Button>
       // highlight-end
     </View>
   );
@@ -292,12 +289,13 @@ Another common requirement is to be able to go back _multiple_ screens -- for ex
 
 ```js name="Going back to specific screen" snack version=7
 import * as React from 'react';
-import { Button, View, Text } from 'react-native';
+import { View, Text } from 'react-native';
 import {
   createStaticNavigation,
   useNavigation,
 } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { Button } from '@react-navigation/elements';
 
 function HomeScreen() {
   const navigation = useNavigation();
@@ -305,10 +303,9 @@ function HomeScreen() {
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Home Screen</Text>
-      <Button
-        title="Go to Details"
-        onPress={() => navigation.navigate('Details')}
-      />
+      <Button onPress={() => navigation.navigate('Details')}>
+        Go to Details
+      </Button>
     </View>
   );
 }
@@ -320,17 +317,15 @@ function DetailsScreen() {
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Details Screen</Text>
-      <Button
-        title="Go to Details... again"
-        onPress={() => navigation.push('Details')}
-      />
-      <Button title="Go back" onPress={() => navigation.goBack()} />
+      <Button onPress={() => navigation.push('Details')}>
+        Go to Details... again
+      </Button>
+      <Button onPress={() => navigation.goBack()}>Go back</Button>
       // highlight-start
-      <Button title="Go to Home" onPress={() => navigation.popTo('Home')} />
-      <Button
-        title="Go back to first screen in stack"
-        onPress={() => navigation.popToTop()}
-      />
+      <Button onPress={() => navigation.popTo('Home')}>Go to Home</Button>
+      <Button onPress={() => navigation.popToTop()}>
+        Go back to first screen in stack
+      </Button>
       // highlight-end
     </View>
   );
diff --git a/versioned_docs/version-7.x/navigation-lifecycle.md b/versioned_docs/version-7.x/navigation-lifecycle.md
index b595465758..0fd30bf096 100755
--- a/versioned_docs/version-7.x/navigation-lifecycle.md
+++ b/versioned_docs/version-7.x/navigation-lifecycle.md
@@ -26,13 +26,14 @@ Similar results can be observed (in combination) with other navigators as well.
 
 ```js name="Navigation lifecycle" snack version=7
 import * as React from 'react';
-import { Text, View, Button } from 'react-native';
+import { Text, View } from 'react-native';
 import {
   createStaticNavigation,
   useNavigation,
 } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { Button } from '@react-navigation/elements';
 
 function SettingsScreen() {
   const navigation = useNavigation();
@@ -46,10 +47,9 @@ function SettingsScreen() {
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Settings Screen</Text>
-      <Button
-        title="Go to Profile"
-        onPress={() => navigation.navigate('Profile')}
-      />
+      <Button onPress={() => navigation.navigate('Profile')}>
+        Go to Profile
+      </Button>
     </View>
   );
 }
@@ -66,10 +66,9 @@ function ProfileScreen() {
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Profile Screen</Text>
-      <Button
-        title="Go to Settings"
-        onPress={() => navigation.navigate('Settings')}
-      />
+      <Button onPress={() => navigation.navigate('Settings')}>
+        Go to Settings
+      </Button>
     </View>
   );
 }
@@ -86,10 +85,9 @@ function HomeScreen() {
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Home Screen</Text>
-      <Button
-        title="Go to Details"
-        onPress={() => navigation.navigate('Details')}
-      />
+      <Button onPress={() => navigation.navigate('Details')}>
+        Go to Details
+      </Button>
     </View>
   );
 }
@@ -106,10 +104,9 @@ function DetailsScreen() {
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Details Screen</Text>
-      <Button
-        title="Go to Details... again"
-        onPress={() => navigation.push('Details')}
-      />
+      <Button onPress={() => navigation.push('Details')}>
+        Go to Details... again
+      </Button>
     </View>
   );
 }
@@ -152,10 +149,11 @@ export default function App() {
 
 ```js name="Navigation lifecycle" snack version=7
 import * as React from 'react';
-import { Text, View, Button } from 'react-native';
+import { Text, View } from 'react-native';
 import { NavigationContainer, useNavigation } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { Button } from '@react-navigation/elements';
 
 function SettingsScreen() {
   const navigation = useNavigation();
@@ -169,10 +167,9 @@ function SettingsScreen() {
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Settings Screen</Text>
-      <Button
-        title="Go to Profile"
-        onPress={() => navigation.navigate('Profile')}
-      />
+      <Button onPress={() => navigation.navigate('Profile')}>
+        Go to Profile
+      </Button>
     </View>
   );
 }
@@ -189,10 +186,9 @@ function ProfileScreen() {
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Profile Screen</Text>
-      <Button
-        title="Go to Settings"
-        onPress={() => navigation.navigate('Settings')}
-      />
+      <Button onPress={() => navigation.navigate('Settings')}>
+        Go to Settings
+      </Button>
     </View>
   );
 }
@@ -209,10 +205,9 @@ function HomeScreen() {
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Home Screen</Text>
-      <Button
-        title="Go to Details"
-        onPress={() => navigation.navigate('Details')}
-      />
+      <Button onPress={() => navigation.navigate('Details')}>
+        Go to Details
+      </Button>
     </View>
   );
 }
@@ -229,10 +224,9 @@ function DetailsScreen() {
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Details Screen</Text>
-      <Button
-        title="Go to Details... again"
-        onPress={() => navigation.push('Details')}
-      />
+      <Button onPress={() => navigation.push('Details')}>
+        Go to Details... again
+      </Button>
     </View>
   );
 }
@@ -301,12 +295,13 @@ Example:
 
 ```js name="Focus and blur" snack version=7
 import * as React from 'react';
-import { Text, View, Button } from 'react-native';
+import { Text, View } from 'react-native';
 import {
   createStaticNavigation,
   useNavigation,
 } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { Button } from '@react-navigation/elements';
 
 // codeblock-focus-start
 function ProfileScreen() {
@@ -362,10 +357,9 @@ function HomeScreen() {
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Home Screen</Text>
-      <Button
-        title="Go to Profile"
-        onPress={() => navigation.navigate('Profile')}
-      />
+      <Button onPress={() => navigation.navigate('Profile')}>
+        Go to Profile
+      </Button>
     </View>
   );
 }
@@ -389,9 +383,10 @@ export default function App() {
 
 ```js name="Focus and blur" snack version=7
 import * as React from 'react';
-import { Text, View, Button } from 'react-native';
+import { Text, View } from 'react-native';
 import { NavigationContainer, useNavigation } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { Button } from '@react-navigation/elements';
 
 // codeblock-focus-start
 function ProfileScreen() {
@@ -447,10 +442,9 @@ function HomeScreen() {
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Home Screen</Text>
-      <Button
-        title="Go to Profile"
-        onPress={() => navigation.navigate('Profile')}
-      />
+      <Button onPress={() => navigation.navigate('Profile')}>
+        Go to Profile
+      </Button>
     </View>
   );
 }
@@ -489,12 +483,13 @@ Example:
 
 ```js name="Focus effect" snack version=7
 import * as React from 'react';
-import { Text, View, Button } from 'react-native';
+import { Text, View } from 'react-native';
 import {
   createStaticNavigation,
   useNavigation,
 } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { Button } from '@react-navigation/elements';
 // codeblock-focus-start
 import { useFocusEffect } from '@react-navigation/native';
 
@@ -528,10 +523,9 @@ function HomeScreen() {
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Home Screen</Text>
-      <Button
-        title="Go to Profile"
-        onPress={() => navigation.navigate('Profile')}
-      />
+      <Button onPress={() => navigation.navigate('Profile')}>
+        Go to Profile
+      </Button>
     </View>
   );
 }
@@ -555,9 +549,10 @@ export default function App() {
 
 ```js name="Focus effect" snack version=7
 import * as React from 'react';
-import { Text, View, Button } from 'react-native';
+import { Text, View } from 'react-native';
 import { NavigationContainer, useNavigation } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { Button } from '@react-navigation/elements';
 // codeblock-focus-start
 import { useFocusEffect } from '@react-navigation/native';
 
@@ -591,10 +586,9 @@ function HomeScreen() {
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Home Screen</Text>
-      <Button
-        title="Go to Profile"
-        onPress={() => navigation.navigate('Profile')}
-      />
+      <Button onPress={() => navigation.navigate('Profile')}>
+        Go to Profile
+      </Button>
     </View>
   );
 }
diff --git a/versioned_docs/version-7.x/nesting-navigators.md b/versioned_docs/version-7.x/nesting-navigators.md
index 72aa781b27..31f485a285 100755
--- a/versioned_docs/version-7.x/nesting-navigators.md
+++ b/versioned_docs/version-7.x/nesting-navigators.md
@@ -14,13 +14,14 @@ Nesting navigators means rendering a navigator inside a screen of another naviga
 
 ```js name="Nested navigators" snack version=7
 import * as React from 'react';
-import { Text, View, Button } from 'react-native';
+import { Text, View } from 'react-native';
 import {
   createStaticNavigation,
   useNavigation,
 } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { Button } from '@react-navigation/elements';
 
 function ProfileScreen() {
   return (
@@ -36,10 +37,9 @@ function FeedScreen() {
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Feed Screen</Text>
-      <Button
-        title="Go to Profile"
-        onPress={() => navigation.navigate('Profile')}
-      />
+      <Button onPress={() => navigation.navigate('Profile')}>
+        Go to Profile
+      </Button>
     </View>
   );
 }
@@ -86,10 +86,11 @@ export default function App() {
 
 ```js name="Nested navigators" snack version=7
 import * as React from 'react';
-import { Text, View, Button } from 'react-native';
+import { Text, View } from 'react-native';
 import { NavigationContainer, useNavigation } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { Button } from '@react-navigation/elements';
 
 function ProfileScreen() {
   return (
@@ -105,10 +106,9 @@ function FeedScreen() {
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Feed Screen</Text>
-      <Button
-        title="Go to Profile"
-        onPress={() => navigation.navigate('Profile')}
-      />
+      <Button onPress={() => navigation.navigate('Profile')}>
+        Go to Profile
+      </Button>
     </View>
   );
 }
@@ -218,13 +218,14 @@ To receive events from the parent navigator, you can explicitly listen to parent
 
 ```js name="Events from parent" snack version=7
 import * as React from 'react';
-import { Text, View, Button } from 'react-native';
+import { Text, View } from 'react-native';
 import {
   createStaticNavigation,
   useNavigation,
 } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { Button } from '@react-navigation/elements';
 
 function ProfileScreen() {
   return (
@@ -240,10 +241,9 @@ function FeedScreen() {
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Feed Screen</Text>
-      <Button
-        title="Go to Messages"
-        onPress={() => navigation.navigate('Messages')}
-      />
+      <Button onPress={() => navigation.navigate('Messages')}>
+        Go to Messages
+      </Button>
     </View>
   );
 }
@@ -303,10 +303,11 @@ export default function App() {
 
 ```js name="Events from parent" snack version=7
 import * as React from 'react';
-import { Text, View, Button } from 'react-native';
+import { Text, View } from 'react-native';
 import { NavigationContainer, useNavigation } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { Button } from '@react-navigation/elements';
 
 function ProfileScreen() {
   return (
@@ -322,10 +323,9 @@ function FeedScreen() {
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Feed Screen</Text>
-      <Button
-        title="Go to Messages"
-        onPress={() => navigation.navigate('Messages')}
-      />
+      <Button onPress={() => navigation.navigate('Messages')}>
+        Go to Messages
+      </Button>
     </View>
   );
 }
@@ -412,13 +412,14 @@ Consider the following example:
 
 ```js name="Navigating to nested screen" snack version=7
 import * as React from 'react';
-import { Text, View, Button } from 'react-native';
+import { Text, View } from 'react-native';
 import {
   createStaticNavigation,
   useNavigation,
 } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { Button } from '@react-navigation/elements';
 
 function HomeScreen() {
   const navigation = useNavigation();
@@ -426,11 +427,12 @@ function HomeScreen() {
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Home Screen</Text>
-      <Button title="Go to More" onPress={() => navigation.navigate('More')} />
+      <Button onPress={() => navigation.navigate('More')}>Go to More</Button>
       <Button
-        title="Go to Messages"
         onPress={() => navigation.navigate('More', { screen: 'Messages' })}
-      />
+      >
+        Go to Messages
+      </Button>
     </View>
   );
 }
@@ -441,7 +443,7 @@ function FeedScreen() {
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Feed Screen</Text>
-      <Button title="Go back" onPress={() => navigation.goBack()} />
+      <Button onPress={() => navigation.goBack()}>Go back</Button>
     </View>
   );
 }
@@ -452,7 +454,7 @@ function MessagesScreen() {
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Messages Screen</Text>
-      <Button title="Go back" onPress={() => navigation.goBack()} />
+      <Button onPress={() => navigation.goBack()}>Go back</Button>
     </View>
   );
 }
@@ -490,10 +492,11 @@ export default function App() {
 
 ```js name="Navigating to nested screen" snack version=7
 import * as React from 'react';
-import { Text, View, Button } from 'react-native';
+import { Text, View } from 'react-native';
 import { NavigationContainer, useNavigation } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { Button } from '@react-navigation/elements';
 
 function HomeScreen() {
   const navigation = useNavigation();
@@ -501,11 +504,12 @@ function HomeScreen() {
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Home Screen</Text>
-      <Button title="Go to More" onPress={() => navigation.navigate('More')} />
+      <Button onPress={() => navigation.navigate('More')}>Go to More</Button>
       <Button
-        title="Go to Messages"
         onPress={() => navigation.navigate('More', { screen: 'Messages' })}
-      />
+      >
+        Go to Messages
+      </Button>
     </View>
   );
 }
@@ -516,7 +520,7 @@ function FeedScreen() {
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Feed Screen</Text>
-      <Button title="Go back" onPress={() => navigation.goBack()} />
+      <Button onPress={() => navigation.goBack()}>Go back</Button>
     </View>
   );
 }
@@ -527,7 +531,7 @@ function MessagesScreen() {
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Messages Screen</Text>
-      <Button title="Go back" onPress={() => navigation.goBack()} />
+      <Button onPress={() => navigation.goBack()}>Go back</Button>
     </View>
   );
 }
@@ -594,13 +598,14 @@ You can also pass params by specifying a `params` key:
 
 ```js name="Navigating to nested screen" snack version=7
 import * as React from 'react';
-import { Text, View, Button } from 'react-native';
+import { Text, View } from 'react-native';
 import {
   createStaticNavigation,
   useNavigation,
 } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { Button } from '@react-navigation/elements';
 
 function HomeScreen() {
   const navigation = useNavigation();
@@ -609,7 +614,6 @@ function HomeScreen() {
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Home Screen</Text>
       <Button
-        title="Go to Messages"
         onPress={
           () =>
             // codeblock-focus-start
@@ -619,7 +623,9 @@ function HomeScreen() {
             })
           // codeblock-focus-end
         }
-      />
+      >
+        Go to Messages
+      </Button>
     </View>
   );
 }
@@ -630,7 +636,7 @@ function FeedScreen() {
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Feed Screen</Text>
-      <Button title="Go back" onPress={() => navigation.goBack()} />
+      <Button onPress={() => navigation.goBack()}>Go back</Button>
     </View>
   );
 }
@@ -642,7 +648,7 @@ function MessagesScreen({ route }) {
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Messages Screen</Text>
       <Text>User: {route.params.user}</Text>
-      <Button title="Go back" onPress={() => navigation.goBack()} />
+      <Button onPress={() => navigation.goBack()}>Go back</Button>
     </View>
   );
 }
@@ -678,10 +684,11 @@ export default function App() {
 
 ```js name="Navigating to nested screen" snack version=7
 import * as React from 'react';
-import { Text, View, Button } from 'react-native';
+import { Text, View } from 'react-native';
 import { NavigationContainer, useNavigation } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { Button } from '@react-navigation/elements';
 
 function HomeScreen() {
   const navigation = useNavigation();
@@ -690,7 +697,6 @@ function HomeScreen() {
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Home Screen</Text>
       <Button
-        title="Go to Messages"
         onPress={
           () =>
             // codeblock-focus-start
@@ -700,7 +706,9 @@ function HomeScreen() {
             })
           // codeblock-focus-end
         }
-      />
+      >
+        Go to Messages
+      </Button>
     </View>
   );
 }
@@ -711,7 +719,7 @@ function FeedScreen() {
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Feed Screen</Text>
-      <Button title="Go back" onPress={() => navigation.goBack()} />
+      <Button onPress={() => navigation.goBack()}>Go back</Button>
     </View>
   );
 }
@@ -723,7 +731,7 @@ function MessagesScreen({ route }) {
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Messages Screen</Text>
       <Text>User: {route.params.user}</Text>
-      <Button title="Go back" onPress={() => navigation.goBack()} />
+      <Button onPress={() => navigation.goBack()}>Go back</Button>
     </View>
   );
 }
@@ -811,13 +819,14 @@ For example:
 
 ```js name="Nested navigators" snack version=7
 import * as React from 'react';
-import { Text, View, Button } from 'react-native';
+import { Text, View } from 'react-native';
 import {
   createStaticNavigation,
   useNavigation,
 } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { Button } from '@react-navigation/elements';
 
 function ProfileScreen() {
   return (
@@ -833,10 +842,9 @@ function FeedScreen() {
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Feed Screen</Text>
-      <Button
-        title="Go to Profile"
-        onPress={() => navigation.navigate('Profile')}
-      />
+      <Button onPress={() => navigation.navigate('Profile')}>
+        Go to Profile
+      </Button>
     </View>
   );
 }
@@ -883,10 +891,11 @@ export default function App() {
 
 ```js name="Nested navigators" snack version=7
 import * as React from 'react';
-import { Text, View, Button } from 'react-native';
+import { Text, View } from 'react-native';
 import { NavigationContainer, useNavigation } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { Button } from '@react-navigation/elements';
 
 function ProfileScreen() {
   return (
@@ -902,10 +911,9 @@ function FeedScreen() {
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Feed Screen</Text>
-      <Button
-        title="Go to Profile"
-        onPress={() => navigation.navigate('Profile')}
-      />
+      <Button onPress={() => navigation.navigate('Profile')}>
+        Go to Profile
+      </Button>
     </View>
   );
 }
diff --git a/versioned_docs/version-7.x/params.md b/versioned_docs/version-7.x/params.md
index 4145e172e3..f024bd6114 100755
--- a/versioned_docs/version-7.x/params.md
+++ b/versioned_docs/version-7.x/params.md
@@ -24,12 +24,13 @@ We recommend that the params you pass are JSON-serializable. That way, you'll be
 
 ```js name="Passing params" snack version=7
 import * as React from 'react';
-import { Button, View, Text } from 'react-native';
+import { View, Text } from 'react-native';
 import {
   createStaticNavigation,
   useNavigation,
 } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { Button } from '@react-navigation/elements';
 
 // codeblock-focus-start
 function HomeScreen() {
@@ -39,7 +40,6 @@ function HomeScreen() {
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Home Screen</Text>
       <Button
-        title="Go to Details"
         onPress={() => {
           /* 1. Navigate to the Details route with params */
           // highlight-start
@@ -49,7 +49,9 @@ function HomeScreen() {
           });
           // highlight-end
         }}
-      />
+      >
+        Go to Details
+      </Button>
     </View>
   );
 }
@@ -67,7 +69,6 @@ function DetailsScreen({ route }) {
       <Text>itemId: {JSON.stringify(itemId)}</Text>
       <Text>otherParam: {JSON.stringify(otherParam)}</Text>
       <Button
-        title="Go to Details... again"
         onPress={
           () =>
             // highlight-start
@@ -76,9 +77,11 @@ function DetailsScreen({ route }) {
             })
           // highlight-end
         }
-      />
-      <Button title="Go to Home" onPress={() => navigation.navigate('Home')} />
-      <Button title="Go back" onPress={() => navigation.goBack()} />
+      >
+        Go to Details... again
+      </Button>
+      <Button onPress={() => navigation.navigate('Home')}>Go to Home</Button>
+      <Button onPress={() => navigation.goBack()}>Go back</Button>
     </View>
   );
 }
@@ -144,12 +147,13 @@ Basic usage:
 
 ```js name="Updating params" snack version=7
 import * as React from 'react';
-import { Text, View, Button } from 'react-native';
+import { Text, View } from 'react-native';
 import {
   createStaticNavigation,
   useNavigation,
 } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { Button } from '@react-navigation/elements';
 
 function HomeScreen({ route }) {
   const navigation = useNavigation();
@@ -160,7 +164,6 @@ function HomeScreen({ route }) {
       <Text>Home Screen</Text>
       <Text>itemId: {JSON.stringify(itemId)}</Text>
       <Button
-        title="Update param"
         onPress={
           () =>
             // codeblock-focus-start
@@ -169,7 +172,9 @@ function HomeScreen({ route }) {
             })
           // codeblock-focus-end
         }
-      />
+      >
+        Update param
+      </Button>
     </View>
   );
 }
@@ -204,12 +209,13 @@ To achieve this, you can use the `popTo` method to go back to the previous scree
 
 ```js name="Passing params back" snack version=7
 import * as React from 'react';
-import { Text, View, TextInput, Button } from 'react-native';
+import { Text, View, TextInput } from 'react-native';
 import {
   createStaticNavigation,
   useNavigation,
 } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { Button } from '@react-navigation/elements';
 
 // codeblock-focus-start
 function HomeScreen({ route }) {
@@ -228,10 +234,9 @@ function HomeScreen({ route }) {
 
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
-      <Button
-        title="Create post"
-        onPress={() => navigation.navigate('CreatePost')}
-      />
+      <Button onPress={() => navigation.navigate('CreatePost')}>
+        Create post
+      </Button>
       <Text style={{ margin: 10 }}>Post: {route.params?.post}</Text>
     </View>
   );
@@ -251,13 +256,14 @@ function CreatePostScreen({ route }) {
         onChangeText={setPostText}
       />
       <Button
-        title="Done"
         onPress={() => {
           // Pass params back to home screen
           // highlight-next-line
           navigation.popTo('Home', { post: postText });
         }}
-      />
+      >
+        Done
+      </Button>
     </>
   );
 }
@@ -289,13 +295,14 @@ If you have nested navigators, you need to pass params a bit differently. For ex
 
 ```js name="Passing params to nested screen" snack version=7
 import * as React from 'react';
-import { Text, View, TextInput, Button } from 'react-native';
+import { Text, View, TextInput } from 'react-native';
 import {
   createStaticNavigation,
   useNavigation,
 } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { Button } from '@react-navigation/elements';
 
 function SettingsScreen({ route }) {
   const navigation = useNavigation();
@@ -305,10 +312,9 @@ function SettingsScreen({ route }) {
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Settings Screen</Text>
       <Text>userParam: {JSON.stringify(user)}</Text>
-      <Button
-        title="Go to Profile"
-        onPress={() => navigation.navigate('Profile')}
-      />
+      <Button onPress={() => navigation.navigate('Profile')}>
+        Go to Profile
+      </Button>
     </View>
   );
 }
@@ -328,7 +334,6 @@ function HomeScreen() {
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Home Screen</Text>
       <Button
-        title="Go to Settings"
         onPress={
           () =>
             // codeblock-focus-start
@@ -338,7 +343,9 @@ function HomeScreen() {
             })
           // codeblock-focus-end
         }
-      />
+      >
+        Go to Settings
+      </Button>
     </View>
   );
 }
diff --git a/versioned_docs/version-7.x/screen-options-resolution.md b/versioned_docs/version-7.x/screen-options-resolution.md
index 65e12558c0..2a4d228103 100755
--- a/versioned_docs/version-7.x/screen-options-resolution.md
+++ b/versioned_docs/version-7.x/screen-options-resolution.md
@@ -263,23 +263,23 @@ Imagine the following configuration:
 
 ```js name="Parent options from a child" snack version=7
 import * as React from 'react';
-import { View, Button } from 'react-native';
+import { View } from 'react-native';
 import {
   createStaticNavigation,
   useNavigation,
 } from '@react-navigation/native';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { Button } from '@react-navigation/elements';
 
 function FeedScreen() {
   const navigation = useNavigation();
 
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
-      <Button
-        title="Go to Settings"
-        onPress={() => navigation.navigate('Settings')}
-      />
+      <Button onPress={() => navigation.navigate('Settings')}>
+        Go to Settings
+      </Button>
     </View>
   );
 }
@@ -325,20 +325,20 @@ export default function App() {
 
 ```js name="Parent options from a child" snack version=7
 import * as React from 'react';
-import { View, Button } from 'react-native';
+import { View } from 'react-native';
 import { NavigationContainer, useNavigation } from '@react-navigation/native';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { Button } from '@react-navigation/elements';
 
 function FeedScreen() {
   const navigation = useNavigation();
 
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
-      <Button
-        title="Go to Settings"
-        onPress={() => navigation.navigate('Settings')}
-      />
+      <Button onPress={() => navigation.navigate('Settings')}>
+        Go to Settings
+      </Button>
     </View>
   );
 }
@@ -418,7 +418,7 @@ Then we can use this function with the `options` prop on `Screen`:
 
 ```js name="Parent options from a child" snack version=7
 import * as React from 'react';
-import { View, Button } from 'react-native';
+import { View } from 'react-native';
 import { getFocusedRouteNameFromRoute } from '@react-navigation/native';
 import {
   createStaticNavigation,
@@ -426,6 +426,7 @@ import {
 } from '@react-navigation/native';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { Button } from '@react-navigation/elements';
 
 function getHeaderTitle(route) {
   // If the focused route is not found, we need to assume it's the initial screen
@@ -448,10 +449,9 @@ function FeedScreen() {
 
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
-      <Button
-        title="Go to Settings"
-        onPress={() => navigation.navigate('Settings')}
-      />
+      <Button onPress={() => navigation.navigate('Settings')}>
+        Go to Settings
+      </Button>
     </View>
   );
 }
@@ -505,7 +505,7 @@ export default function App() {
 
 ```js name="Parent options from a child" snack version=7
 import * as React from 'react';
-import { View, Button } from 'react-native';
+import { View } from 'react-native';
 import {
   NavigationContainer,
   useNavigation,
@@ -513,6 +513,7 @@ import {
 } from '@react-navigation/native';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { Button } from '@react-navigation/elements';
 
 function getHeaderTitle(route) {
   // If the focused route is not found, we need to assume it's the initial screen
@@ -535,10 +536,9 @@ function FeedScreen() {
 
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
-      <Button
-        title="Go to Settings"
-        onPress={() => navigation.navigate('Settings')}
-      />
+      <Button onPress={() => navigation.navigate('Settings')}>
+        Go to Settings
+      </Button>
     </View>
   );
 }
@@ -609,23 +609,23 @@ For example, for the above use case, instead of adding a tab navigator inside a
 
 ```js name="Reorganized navigators" snack version=7
 import * as React from 'react';
-import { View, Button } from 'react-native';
+import { View } from 'react-native';
 import {
   createStaticNavigation,
   useNavigation,
 } from '@react-navigation/native';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { Button } from '@react-navigation/elements';
 
 function FeedScreen() {
   const navigation = useNavigation();
 
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
-      <Button
-        title="Go to Settings"
-        onPress={() => navigation.navigate('Settings')}
-      />
+      <Button onPress={() => navigation.navigate('Settings')}>
+        Go to Settings
+      </Button>
     </View>
   );
 }
@@ -680,20 +680,20 @@ export default function App() {
 
 ```js name="Reorganized navigators" snack version=7
 import * as React from 'react';
-import { View, Button } from 'react-native';
+import { View } from 'react-native';
 import { NavigationContainer, useNavigation } from '@react-navigation/native';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { Button } from '@react-navigation/elements';
 
 function FeedScreen() {
   const navigation = useNavigation();
 
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
-      <Button
-        title="Go to Settings"
-        onPress={() => navigation.navigate('Settings')}
-      />
+      <Button onPress={() => navigation.navigate('Settings')}>
+        Go to Settings
+      </Button>
     </View>
   );
 }
diff --git a/versioned_docs/version-7.x/screen-options.md b/versioned_docs/version-7.x/screen-options.md
index 0a76fe2340..7289b60efb 100644
--- a/versioned_docs/version-7.x/screen-options.md
+++ b/versioned_docs/version-7.x/screen-options.md
@@ -496,8 +496,7 @@ export default function App() {
 The `navigation` object has a `setOptions` method that lets you update the options for a screen from within a component. See [navigation object's docs](navigation-object.md#setoptions) for more details.
 
 ```js
-<Button
-  title="Update options"
-  onPress={() => navigation.setOptions({ title: 'Updated!' })}
-/>
+<Button onPress={() => navigation.setOptions({ title: 'Updated!' })}>
+  Update options
+</Button>
 ```
diff --git a/versioned_docs/version-7.x/shared-element-transitions.md b/versioned_docs/version-7.x/shared-element-transitions.md
index ed91e9e855..b5b4164ffb 100644
--- a/versioned_docs/version-7.x/shared-element-transitions.md
+++ b/versioned_docs/version-7.x/shared-element-transitions.md
@@ -39,12 +39,13 @@ To create a shared transition:
 
 ```js name="Shared transition"
 import * as React from 'react';
-import { View, Button, StyleSheet } from 'react-native';
+import { View, StyleSheet } from 'react-native';
 import {
   useNavigation,
   createStaticNavigation,
 } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { Button } from '@react-navigation/elements';
 
 import Animated from 'react-native-reanimated';
 
@@ -53,10 +54,9 @@ function HomeScreen() {
 
   return (
     <View style={styles.container}>
-      <Button
-        title="Go to Details"
-        onPress={() => navigation.navigate('Details')}
-      />
+      <Button onPress={() => navigation.navigate('Details')}>
+        Go to Details
+      </Button>
       <Animated.Image
         source={{ uri: 'https://picsum.photos/id/39/200' }}
         style={{ width: 300, height: 300 }}
@@ -72,7 +72,7 @@ function DetailsScreen() {
 
   return (
     <View style={styles.container}>
-      <Button title="Go back" onPress={() => navigation.goBack()} />
+      <Button onPress={() => navigation.goBack()}>Go back</Button>
       <Animated.Image
         source={{ uri: 'https://picsum.photos/id/39/200' }}
         style={{ width: 100, height: 100 }}
@@ -111,9 +111,10 @@ const styles = StyleSheet.create({
 
 ```js name="Shared transition"
 import * as React from 'react';
-import { View, Button, StyleSheet } from 'react-native';
+import { View, StyleSheet } from 'react-native';
 import { NavigationContainer, useNavigation } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { Button } from '@react-navigation/elements';
 
 import Animated from 'react-native-reanimated';
 
@@ -125,10 +126,9 @@ function HomeScreen() {
 
   return (
     <View style={styles.container}>
-      <Button
-        title="Go to Details"
-        onPress={() => navigation.navigate('Details')}
-      />
+      <Button onPress={() => navigation.navigate('Details')}>
+        Go to Details
+      </Button>
       <Animated.Image
         source={{ uri: 'https://picsum.photos/id/39/200' }}
         style={{ width: 300, height: 300 }}
@@ -144,7 +144,7 @@ function DetailsScreen() {
 
   return (
     <View style={styles.container}>
-      <Button title="Go back" onPress={() => navigation.goBack()} />
+      <Button onPress={() => navigation.goBack()}>Go back</Button>
       <Animated.Image
         source={{ uri: 'https://picsum.photos/id/39/200' }}
         style={{ width: 100, height: 100 }}
diff --git a/versioned_docs/version-7.x/stack-navigator.md b/versioned_docs/version-7.x/stack-navigator.md
index 938b607b22..eebb9bfc77 100755
--- a/versioned_docs/version-7.x/stack-navigator.md
+++ b/versioned_docs/version-7.x/stack-navigator.md
@@ -83,11 +83,12 @@ To use this navigator, import it from `@react-navigation/stack`:
 
 ```js name="Stack Navigator" snack version=7
 import * as React from 'react';
-import { Text, View, Button } from 'react-native';
+import { Text, View } from 'react-native';
 import {
   createStaticNavigation,
   useNavigation,
 } from '@react-navigation/native';
+import { Button } from '@react-navigation/elements';
 // codeblock-focus-start
 import { createStackNavigator } from '@react-navigation/stack';
 
@@ -98,10 +99,9 @@ function HomeScreen() {
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Home Screen</Text>
-      <Button
-        title="Go to Profile"
-        onPress={() => navigation.navigate('Profile')}
-      />
+      <Button onPress={() => navigation.navigate('Profile')}>
+        Go to Profile
+      </Button>
     </View>
   );
 }
@@ -135,8 +135,9 @@ export default function App() {
 
 ```js name="Stack Navigator" snack version=7
 import * as React from 'react';
-import { Text, View, Button } from 'react-native';
+import { Text, View } from 'react-native';
 import { NavigationContainer, useNavigation } from '@react-navigation/native';
+import { Button } from '@react-navigation/elements';
 // codeblock-focus-start
 import { createStackNavigator } from '@react-navigation/stack';
 
@@ -158,10 +159,9 @@ function HomeScreen() {
   return (
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Home Screen</Text>
-      <Button
-        title="Go to Profile"
-        onPress={() => navigation.navigate('Profile')}
-      />
+      <Button onPress={() => navigation.navigate('Profile')}>
+        Go to Profile
+      </Button>
     </View>
   );
 }
@@ -613,7 +613,8 @@ Supported values for `animation` are:
 
 - `default` - Default animation based on the platform and OS version.
 - `fade` - Simple fade animation for dialogs.
-- `fade_from_bottom` - Standard Android-style fade in from the bottom for Android Oreo.
+- `fade_from_bottom` - Standard Android-style fade-in from the bottom for Android Oreo.
+- `fade_from_right` - Standard Android-style fade-in from the right for Android 14.
 - `reveal_from_bottom` - Standard Android-style reveal from the bottom for Android Pie.
 - `scale_from_center` - Scale animation from the center.
 - `slide_from_right` - Standard iOS-style slide in from the right.
@@ -1016,16 +1017,10 @@ If you want to further customize how the dialog animates, or want to close the s
 Example:
 
 ```js
-import {
-  Animated,
-  View,
-  Text,
-  Pressable,
-  Button,
-  StyleSheet,
-} from 'react-native';
+import { Animated, View, Text, Pressable, StyleSheet } from 'react-native';
 import { useTheme, useNavigation } from '@react-navigation/native';
 import { useCardAnimation } from '@react-navigation/stack';
+import { Button } from '@react-navigation/elements';
 
 function ModalScreen() {
   const navigation = useNavigation();
@@ -1077,11 +1072,12 @@ function ModalScreen() {
           pantry ten times.
         </Text>
         <Button
-          title="Okay"
           color={colors.primary}
           style={{ alignSelf: 'flex-end' }}
           onPress={navigation.goBack}
-        />
+        >
+          Okay
+        </Button>
       </Animated.View>
     </View>
   );
diff --git a/versioned_docs/version-7.x/status-bar.md b/versioned_docs/version-7.x/status-bar.md
index 2d058c478e..11ad9e6f36 100755
--- a/versioned_docs/version-7.x/status-bar.md
+++ b/versioned_docs/version-7.x/status-bar.md
@@ -18,12 +18,13 @@ This is a simple task when using a stack. You can render the `StatusBar` compone
 
 ```js name="Different status bar" snack version=7
 import * as React from 'react';
-import { View, Text, StatusBar, Button, StyleSheet } from 'react-native';
+import { View, Text, StatusBar, StyleSheet } from 'react-native';
 import {
   createStaticNavigation,
   useNavigation,
 } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { Button } from '@react-navigation/elements';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 function Screen1() {
@@ -47,10 +48,9 @@ function Screen1() {
       <StatusBar barStyle="light-content" backgroundColor="#6a51ae" />
       // highlight-end
       <Text style={{ color: '#fff' }}>Light Screen</Text>
-      <Button
-        title="Next screen"
-        onPress={() => navigation.navigate('Screen2')}
-      />
+      <Button onPress={() => navigation.navigate('Screen2')}>
+        Next screen
+      </Button>
     </View>
   );
 }
@@ -76,10 +76,9 @@ function Screen2() {
       <StatusBar barStyle="dark-content" backgroundColor="#ecf0f1" />
       // highlight-end
       <Text>Dark Screen</Text>
-      <Button
-        title="Next screen"
-        onPress={() => navigation.navigate('Screen1')}
-      />
+      <Button onPress={() => navigation.navigate('Screen1')}>
+        Next screen
+      </Button>
     </View>
   );
 }
@@ -111,9 +110,10 @@ const styles = StyleSheet.create({
 
 ```js name="Different status bar" snack version=7
 import * as React from 'react';
-import { View, Text, StatusBar, Button, StyleSheet } from 'react-native';
+import { View, Text, StatusBar, StyleSheet } from 'react-native';
 import { NavigationContainer, useNavigation } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { Button } from '@react-navigation/elements';
 import {
   SafeAreaProvider,
   useSafeAreaInsets,
@@ -140,10 +140,9 @@ function Screen1() {
       <StatusBar barStyle="light-content" backgroundColor="#6a51ae" />
       // highlight-end
       <Text style={{ color: '#fff' }}>Light Screen</Text>
-      <Button
-        title="Next screen"
-        onPress={() => navigation.navigate('Screen2')}
-      />
+      <Button onPress={() => navigation.navigate('Screen2')}>
+        Next screen
+      </Button>
     </View>
   );
 }
@@ -169,10 +168,9 @@ function Screen2() {
       <StatusBar barStyle="dark-content" backgroundColor="#ecf0f1" />
       // highlight-end
       <Text>Dark Screen</Text>
-      <Button
-        title="Next screen"
-        onPress={() => navigation.navigate('Screen1')}
-      />
+      <Button onPress={() => navigation.navigate('Screen1')}>
+        Next screen
+      </Button>
     </View>
   );
 }
@@ -239,13 +237,14 @@ Now, our screens (both `Screen1.js` and `Screen2.js`) will use the `FocusAwareSt
 
 ```js name="Different status bar based on tabs" snack version=7
 import * as React from 'react';
-import { View, Text, StatusBar, Button, StyleSheet } from 'react-native';
+import { View, Text, StatusBar, StyleSheet } from 'react-native';
 import { useIsFocused } from '@react-navigation/native';
 import {
   createStaticNavigation,
   useNavigation,
 } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { Button } from '@react-navigation/elements';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 function FocusAwareStatusBar(props) {
@@ -274,10 +273,9 @@ function Screen1() {
     >
       <FocusAwareStatusBar barStyle="light-content" backgroundColor="#6a51ae" />
       <Text style={{ color: '#fff' }}>Light Screen</Text>
-      <Button
-        title="Next screen"
-        onPress={() => navigation.navigate('Screen2')}
-      />
+      <Button onPress={() => navigation.navigate('Screen2')}>
+        Next screen
+      </Button>
     </View>
   );
 }
@@ -301,10 +299,9 @@ function Screen2() {
     >
       <FocusAwareStatusBar barStyle="dark-content" backgroundColor="#ecf0f1" />
       <Text>Dark Screen</Text>
-      <Button
-        title="Next screen"
-        onPress={() => navigation.navigate('Screen1')}
-      />
+      <Button onPress={() => navigation.navigate('Screen1')}>
+        Next screen
+      </Button>
     </View>
   );
 }
@@ -340,10 +337,11 @@ const styles = StyleSheet.create({
 
 ```js name="Different status bar based on tabs" snack version=7
 import * as React from 'react';
-import { View, Text, StatusBar, Button, StyleSheet } from 'react-native';
+import { View, Text, StatusBar, StyleSheet } from 'react-native';
 import { useIsFocused } from '@react-navigation/native';
 import { NavigationContainer, useNavigation } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { Button } from '@react-navigation/elements';
 import {
   SafeAreaProvider,
   useSafeAreaInsets,
@@ -375,10 +373,9 @@ function Screen1() {
     >
       <FocusAwareStatusBar barStyle="light-content" backgroundColor="#6a51ae" />
       <Text style={{ color: '#fff' }}>Light Screen</Text>
-      <Button
-        title="Next screen"
-        onPress={() => navigation.navigate('Screen2')}
-      />
+      <Button onPress={() => navigation.navigate('Screen2')}>
+        Next screen
+      </Button>
     </View>
   );
 }
@@ -402,10 +399,9 @@ function Screen2() {
     >
       <FocusAwareStatusBar barStyle="dark-content" backgroundColor="#ecf0f1" />
       <Text>Dark Screen</Text>
-      <Button
-        title="Next screen"
-        onPress={() => navigation.navigate('Screen1')}
-      />
+      <Button onPress={() => navigation.navigate('Screen1')}>
+        Next screen
+      </Button>
     </View>
   );
 }
diff --git a/versioned_docs/version-7.x/tab-based-navigation.md b/versioned_docs/version-7.x/tab-based-navigation.md
index 29f620beb0..3ca2ecc9ae 100755
--- a/versioned_docs/version-7.x/tab-based-navigation.md
+++ b/versioned_docs/version-7.x/tab-based-navigation.md
@@ -384,10 +384,9 @@ function HomeScreen() {
   return (
     <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
       <Text>Home!</Text>
-      <Button
-        title="Go to Settings"
-        onPress={() => navigation.navigate('Settings')}
-      />
+      <Button onPress={() => navigation.navigate('Settings')}>
+        Go to Settings
+      </Button>
     </View>
   );
 }
@@ -398,7 +397,7 @@ function SettingsScreen() {
   return (
     <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
       <Text>Settings!</Text>
-      <Button title="Go to Home" onPress={() => navigation.navigate('Home')} />
+      <Button onPress={() => navigation.navigate('Home')}>Go to Home</Button>
     </View>
   );
 }
@@ -416,10 +415,11 @@ Often tabs don't just display one screen &mdash; for example, on your Twitter fe
 
 ```js
 import * as React from 'react';
-import { Button, Text, View } from 'react-native';
+import { Text, View } from 'react-native';
 import { NavigationContainer, useNavigation } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { Button } from '@react-navigation/elements';
 
 function DetailsScreen() {
   return (
@@ -435,10 +435,9 @@ function HomeScreen() {
   return (
     <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
       <Text>Home screen</Text>
-      <Button
-        title="Go to Details"
-        onPress={() => navigation.navigate('Details')}
-      />
+      <Button onPress={() => navigation.navigate('Details')}>
+        Go to Details
+      </Button>
     </View>
   );
 }
@@ -449,10 +448,9 @@ function SettingsScreen() {
   return (
     <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
       <Text>Settings screen</Text>
-      <Button
-        title="Go to Details"
-        onPress={() => navigation.navigate('Details')}
-      />
+      <Button onPress={() => navigation.navigate('Details')}>
+        Go to Details
+      </Button>
     </View>
   );
 }
diff --git a/versioned_docs/version-7.x/themes.md b/versioned_docs/version-7.x/themes.md
index 9c10a92b94..3653ee6847 100755
--- a/versioned_docs/version-7.x/themes.md
+++ b/versioned_docs/version-7.x/themes.md
@@ -28,9 +28,10 @@ import {
   DefaultTheme,
 } from '@react-navigation/native';
 // codeblock-focus-end
-import { Button, View, Text } from 'react-native';
+import { View, Text } from 'react-native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import { createDrawerNavigator } from '@react-navigation/drawer';
+import { Button } from '@react-navigation/elements';
 
 // codeblock-focus-start
 
@@ -51,10 +52,9 @@ function SettingsScreen({ route }) {
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Settings Screen</Text>
       <Text>userParam: {JSON.stringify(user)}</Text>
-      <Button
-        title="Go to Profile"
-        onPress={() => navigation.navigate('Profile')}
-      />
+      <Button onPress={() => navigation.navigate('Profile')}>
+        Go to Profile
+      </Button>
     </View>
   );
 }
@@ -74,14 +74,15 @@ function HomeScreen() {
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Home Screen</Text>
       <Button
-        title="Go to Settings"
         onPress={() =>
           navigation.navigate('Panel', {
             screen: 'Settings',
             params: { user: 'jane' },
           })
         }
-      />
+      >
+        Go to Settings
+      </Button>
     </View>
   );
 }
@@ -124,9 +125,10 @@ import {
   useNavigation,
 } from '@react-navigation/native';
 // codeblock-focus-end
-import { Button, View, Text } from 'react-native';
+import { View, Text } from 'react-native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import { createDrawerNavigator } from '@react-navigation/drawer';
+import { Button } from '@react-navigation/elements';
 
 // codeblock-focus-start
 
@@ -148,10 +150,9 @@ function SettingsScreen({ route }) {
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Settings Screen</Text>
       <Text>userParam: {JSON.stringify(user)}</Text>
-      <Button
-        title="Go to Profile"
-        onPress={() => navigation.navigate('Profile')}
-      />
+      <Button onPress={() => navigation.navigate('Profile')}>
+        Go to Profile
+      </Button>
     </View>
   );
 }
@@ -173,14 +174,15 @@ function HomeScreen() {
     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Home Screen</Text>
       <Button
-        title="Go to Settings"
         onPress={() =>
           navigation.navigate('Root', {
             screen: 'Settings',
             params: { user: 'jane' },
           })
         }
-      />
+      >
+        Go to Settings
+      </Button>
     </View>
   );
 }
@@ -351,16 +353,11 @@ import {
   DarkTheme,
   useTheme,
 } from '@react-navigation/native';
-import {
-  Button,
-  View,
-  Text,
-  TouchableOpacity,
-  useColorScheme,
-} from 'react-native';
+import { View, Text, TouchableOpacity, useColorScheme } from 'react-native';
 // codeblock-focus-end
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import { createDrawerNavigator } from '@react-navigation/drawer';
+import { Button } from '@react-navigation/elements';
 
 function SettingsScreen({ route }) {
   const navigation = useNavigation();
@@ -373,10 +370,9 @@ function SettingsScreen({ route }) {
       <Text style={{ color: colors.text }}>
         userParam: {JSON.stringify(user)}
       </Text>
-      <Button
-        title="Go to Profile"
-        onPress={() => navigation.navigate('Profile')}
-      />
+      <Button onPress={() => navigation.navigate('Profile')}>
+        Go to Profile
+      </Button>
     </View>
   );
 }
@@ -410,14 +406,15 @@ function HomeScreen() {
       <Text style={{ color: colors.text }}>Home Screen</Text>
       <MyButton />
       <Button
-        title="Go to Settings"
         onPress={() =>
           navigation.navigate('Root', {
             screen: 'Settings',
             params: { user: 'jane' },
           })
         }
-      />
+      >
+        Go to Settings
+      </Button>
     </View>
   );
 }
@@ -458,13 +455,7 @@ export default function App() {
 ```js name="Operating system color theme" snack version=7
 import * as React from 'react';
 // codeblock-focus-start
-import {
-  Button,
-  View,
-  Text,
-  TouchableOpacity,
-  useColorScheme,
-} from 'react-native';
+import { View, Text, TouchableOpacity, useColorScheme } from 'react-native';
 import {
   NavigationContainer,
   DefaultTheme,
@@ -474,6 +465,7 @@ import {
 // codeblock-focus-end
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import { createDrawerNavigator } from '@react-navigation/drawer';
+import { Button } from '@react-navigation/elements';
 
 function SettingsScreen({ route, navigation }) {
   const { user } = route.params;
@@ -485,10 +477,9 @@ function SettingsScreen({ route, navigation }) {
       <Text style={{ color: colors.text }}>
         userParam: {JSON.stringify(user)}
       </Text>
-      <Button
-        title="Go to Profile"
-        onPress={() => navigation.navigate('Profile')}
-      />
+      <Button onPress={() => navigation.navigate('Profile')}>
+        Go to Profile
+      </Button>
     </View>
   );
 }
@@ -522,14 +513,15 @@ function HomeScreen() {
       <Text style={{ color: colors.text }}>Home Screen</Text>
       <MyButton />
       <Button
-        title="Go to Settings"
         onPress={() =>
           navigation.navigate('Root', {
             screen: 'Settings',
             params: { user: 'jane' },
           })
         }
-      />
+      >
+        Go to Settings
+      </Button>
     </View>
   );
 }
@@ -589,16 +581,11 @@ import {
   DarkTheme,
   useTheme,
 } from '@react-navigation/native';
-import {
-  Button,
-  View,
-  Text,
-  TouchableOpacity,
-  useColorScheme,
-} from 'react-native';
+import { View, Text, TouchableOpacity, useColorScheme } from 'react-native';
 // codeblock-focus-end
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import { createDrawerNavigator } from '@react-navigation/drawer';
+import { Button } from '@react-navigation/elements';
 
 function SettingsScreen({ route }) {
   const navigation = useNavigation();
@@ -611,10 +598,9 @@ function SettingsScreen({ route }) {
       <Text style={{ color: colors.text }}>
         userParam: {JSON.stringify(user)}
       </Text>
-      <Button
-        title="Go to Profile"
-        onPress={() => navigation.navigate('Profile')}
-      />
+      <Button onPress={() => navigation.navigate('Profile')}>
+        Go to Profile
+      </Button>
     </View>
   );
 }
@@ -652,14 +638,15 @@ function HomeScreen() {
       <Text style={{ color: colors.text }}>Home Screen</Text>
       <MyButton />
       <Button
-        title="Go to Settings"
         onPress={() =>
           navigation.navigate('Root', {
             screen: 'Settings',
             params: { user: 'jane' },
           })
         }
-      />
+      >
+        Go to Settings
+      </Button>
     </View>
   );
 }
@@ -694,13 +681,7 @@ export default function App() {
 ```js name="System themes" snack version=7
 import * as React from 'react';
 // codeblock-focus-start
-import {
-  Button,
-  View,
-  Text,
-  TouchableOpacity,
-  useColorScheme,
-} from 'react-native';
+import { View, Text, TouchableOpacity, useColorScheme } from 'react-native';
 import {
   NavigationContainer,
   DefaultTheme,
@@ -722,10 +703,9 @@ function SettingsScreen({ route, navigation }) {
       <Text style={{ color: colors.text }}>
         userParam: {JSON.stringify(user)}
       </Text>
-      <Button
-        title="Go to Profile"
-        onPress={() => navigation.navigate('Profile')}
-      />
+      <Button onPress={() => navigation.navigate('Profile')}>
+        Go to Profile
+      </Button>
     </View>
   );
 }
@@ -763,14 +743,15 @@ function HomeScreen() {
       <Text style={{ color: colors.text }}>Home Screen</Text>
       <MyButton />
       <Button
-        title="Go to Settings"
         onPress={() =>
           navigation.navigate('Root', {
             screen: 'Settings',
             params: { user: 'jane' },
           })
         }
-      />
+      >
+        Go to Settings
+      </Button>
     </View>
   );
 }
diff --git a/versioned_docs/version-7.x/use-prevent-remove.md b/versioned_docs/version-7.x/use-prevent-remove.md
index a7887c7ee9..faef9c9495 100644
--- a/versioned_docs/version-7.x/use-prevent-remove.md
+++ b/versioned_docs/version-7.x/use-prevent-remove.md
@@ -23,20 +23,14 @@ Example:
 
 ```js name="usePreventRemove hook" snack version=7
 import * as React from 'react';
-import {
-  Button,
-  Alert,
-  View,
-  TextInput,
-  Platform,
-  StyleSheet,
-} from 'react-native';
+import { Alert, View, TextInput, Platform, StyleSheet } from 'react-native';
 import {
   useNavigation,
   usePreventRemove,
   createStaticNavigation,
 } from '@react-navigation/native';
 import { createStackNavigator } from '@react-navigation/stack';
+import { Button } from '@react-navigation/elements';
 
 // codeblock-focus-start
 const EditTextScreen = () => {
@@ -89,11 +83,9 @@ const HomeScreen = () => {
 
   return (
     <View style={styles.buttons}>
-      <Button
-        title={'Push EditText'}
-        onPress={() => navigation.push('EditText')}
-        style={styles.button}
-      />
+      <Button onPress={() => navigation.push('EditText')} style={styles.button}>
+        Push EditText
+      </Button>
     </View>
   );
 };
@@ -140,20 +132,14 @@ const styles = StyleSheet.create({
 
 ```js name="usePreventRemove hook" snack version=7
 import * as React from 'react';
-import {
-  Button,
-  Alert,
-  View,
-  TextInput,
-  Platform,
-  StyleSheet,
-} from 'react-native';
+import { Alert, View, TextInput, Platform, StyleSheet } from 'react-native';
 import {
   NavigationContainer,
   useNavigation,
   usePreventRemove,
 } from '@react-navigation/native';
 import { createStackNavigator } from '@react-navigation/stack';
+import { Button } from '@react-navigation/elements';
 
 // codeblock-focus-start
 const EditTextScreen = () => {
@@ -214,11 +200,9 @@ const HomeScreen = () => {
 
   return (
     <View style={styles.buttons}>
-      <Button
-        title={'Push EditText'}
-        onPress={() => navigation.push('EditText')}
-        style={styles.button}
-      />
+      <Button onPress={() => navigation.push('EditText')} style={styles.button}>
+        Push EditText
+      </Button>
     </View>
   );
 };
diff --git a/versioned_docs/version-7.x/use-theme.md b/versioned_docs/version-7.x/use-theme.md
index d166c80f30..a2f25340d0 100644
--- a/versioned_docs/version-7.x/use-theme.md
+++ b/versioned_docs/version-7.x/use-theme.md
@@ -20,16 +20,10 @@ import {
   DefaultTheme,
   DarkTheme,
 } from '@react-navigation/native';
-import {
-  Button,
-  View,
-  Text,
-  TouchableOpacity,
-  useColorScheme,
-} from 'react-native';
+import { View, Text, TouchableOpacity, useColorScheme } from 'react-native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import { createDrawerNavigator } from '@react-navigation/drawer';
-
+import { Button } from '@react-navigation/elements';
 // codeblock-focus-start
 import { useTheme } from '@react-navigation/native';
 
@@ -46,10 +40,9 @@ function SettingsScreen({ route }) {
       <Text style={{ color: colors.text }}>
         userParam: {JSON.stringify(user)}
       </Text>
-      <Button
-        title="Go to Profile"
-        onPress={() => navigation.navigate('Profile')}
-      />
+      <Button onPress={() => navigation.navigate('Profile')}>
+        Go to Profile
+      </Button>
     </View>
   );
 }
@@ -86,14 +79,15 @@ function HomeScreen() {
       <Text style={{ color: colors.text }}>Home Screen</Text>
       <MyButton />
       <Button
-        title="Go to Settings"
         onPress={() =>
           navigation.navigate('Root', {
             screen: 'Settings',
             params: { user: 'jane' },
           })
         }
-      />
+      >
+        Go to Settings
+      </Button>
     </View>
   );
 }
@@ -131,13 +125,7 @@ export default function App() {
 
 ```js name="useTheme hook" snack version=7
 import * as React from 'react';
-import {
-  Button,
-  View,
-  Text,
-  TouchableOpacity,
-  useColorScheme,
-} from 'react-native';
+import { View, Text, TouchableOpacity, useColorScheme } from 'react-native';
 import {
   NavigationContainer,
   DefaultTheme,
@@ -146,7 +134,7 @@ import {
 } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import { createDrawerNavigator } from '@react-navigation/drawer';
-
+import { Button } from '@react-navigation/elements';
 // codeblock-focus-start
 import { useTheme } from '@react-navigation/native';
 
@@ -162,10 +150,9 @@ function SettingsScreen({ route }) {
       <Text style={{ color: colors.text }}>
         userParam: {JSON.stringify(user)}
       </Text>
-      <Button
-        title="Go to Profile"
-        onPress={() => navigation.navigate('Profile')}
-      />
+      <Button onPress={() => navigation.navigate('Profile')}>
+        Go to Profile
+      </Button>
     </View>
   );
 }
@@ -201,14 +188,15 @@ function HomeScreen() {
       <Text style={{ color: colors.text }}>Home Screen</Text>
       <MyButton />
       <Button
-        title="Go to Settings"
         onPress={() =>
           navigation.navigate('Root', {
             screen: 'Settings',
             params: { user: 'jane' },
           })
         }
-      />
+      >
+        Go to Settings
+      </Button>
     </View>
   );
 }