docs: update Button usage in guides to label prop

Update the hand-written guide snippets (icons, react-navigation, ripple
effect) and the docs-site example components to use the new `label` prop
instead of children. The generated component reference pages are derived
from the JSDoc and will be regenerated by the docs build.

Author: azizbecha

docs/docs/guides/03-icons.mdx

@@ -27,7 +27,7 @@ You can pass the name of an icon from [`MaterialDesignIcons`](https://pictogramm
 Example:
 
 ```js
-<Button icon="camera">Press me</Button>
+<Button icon="camera" label="Press me" />
 ```
 
 :::note
@@ -63,15 +63,14 @@ Remote image:
 ```js
 <Button
   icon={{ uri: 'https://avatars0.githubusercontent.com/u/17571969?v=3&s=400' }}
->
-  Press me
-</Button>
+  label="Press me"
+/>
 ```
 
 Local image:
 
 ```js
-<Button icon={require('../assets/chameleon.jpg')}>Press me</Button>
+<Button icon={require('../assets/chameleon.jpg')} label="Press me" />
 ```
 
 ### 3. A render function
@@ -88,9 +87,8 @@ Example:
       style={{ width: size, height: size, tintColor: color }}
     />
   )}
->
-  Press me
-</Button>
+  label="Press me"
+/>
 ```
 
 ### 4. Use custom icons
@@ -131,15 +129,14 @@ Example for using an image source:
     },
     direction: 'rtl',
   }}
->
-  Press me
-</Button>
+  label="Press me"
+/>
 ```
 
 Example for using an icon name:
 
 ```js
-<Button icon={{ source: 'add-a-photo', direction: 'rtl' }}>Press me</Button>
+<Button icon={{ source: 'add-a-photo', direction: 'rtl' }} label="Press me" />
 ```
 
 You can also use a render function. Along with `size` and `color`, you have access to `direction` which will either be `'rtl'` or `'ltr'`. You can then decide how to render your icon component accordingly.
@@ -163,7 +160,6 @@ Example of using a render function:
       ]}
     />
   )}
->
-  Press me
-</Button>
+  label="Press me"
+/>
 ```

docs/docs/guides/09-react-navigation.md

@@ -86,9 +86,11 @@ function HomeScreen({ navigation }) {
   return (
     <View style={style.container}>
       <Text>Home Screen</Text>
-      <Button mode="contained" onPress={() => navigation.navigate('Details')}>
-        Go to details
-      </Button>
+      <Button
+        mode="contained"
+        onPress={() => navigation.navigate('Details')}
+        label="Go to details"
+      />
     </View>
   );
 }

docs/docs/guides/11-ripple-effect.md

@@ -19,9 +19,9 @@ The `rippleColor` prop is available for every pressable component which allows y
   rippleColor="#FF000020"
   icon="camera"
   mode="contained"
-  onPress={() => console.log('Pressed')}>
-  Press me
-</Button>
+  onPress={() => console.log('Pressed')}
+  label="Press me"
+/>
 ```
 
 ## Disable ripple effect in all components

docs/src/components/BannerExample.tsx

@@ -74,15 +74,19 @@ const BannerExample = () => {
     >
       <Stack spacing={16}>
         <Stack direction="row" spacing={8} style={styles.row}>
-          <Button loading onPress={() => {}}>
-            Loading
-          </Button>
-          <Button mode="contained-tonal" icon="camera" onPress={() => {}}>
-            Icon
-          </Button>
-          <Button icon="camera" mode="contained" onPress={() => {}}>
-            Press me
-          </Button>
+          <Button loading onPress={() => {}} label="Loading" />
+          <Button
+            mode="contained-tonal"
+            icon="camera"
+            onPress={() => {}}
+            label="Icon"
+          />
+          <Button
+            icon="camera"
+            mode="contained"
+            onPress={() => {}}
+            label="Press me"
+          />
           <FAB icon="plus" size="small" onPress={() => {}} />
           <FAB icon="plus" size="medium" onPress={() => {}} />
           <FAB icon="plus" size="large" onPress={() => {}} />

docs/src/components/GetStartedButtons.tsx

@@ -36,9 +36,12 @@ const GetStartedButton = () => {
   return (
     <View style={styles.container}>
       <Link to="/docs/guides/getting-started" style={noTextDecoration}>
-        <Button mode="contained" style={styles.button} onPress={noop}>
-          Get started
-        </Button>
+        <Button
+          mode="contained"
+          style={styles.button}
+          onPress={noop}
+          label="Get started"
+        />
       </Link>
       <Button
         mode="outlined"
@@ -47,9 +50,8 @@ const GetStartedButton = () => {
             'https://snack.expo.dev/@react-native-paper/react-native-paper-example_v5'
           )
         }
-      >
-        Try on Snack
-      </Button>
+        label="Try on Snack"
+      />
     </View>
   );
 };