diff --git a/docs/docs/guides/03-icons.mdx b/docs/docs/guides/03-icons.mdx
index 015a1bee1b..970177da49 100644
--- a/docs/docs/guides/03-icons.mdx
+++ b/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"
+/>
 ```
diff --git a/docs/docs/guides/09-react-navigation.md b/docs/docs/guides/09-react-navigation.md
index d9227cfb2b..18f5f20578 100644
--- a/docs/docs/guides/09-react-navigation.md
+++ b/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>
   );
 }
diff --git a/docs/docs/guides/11-ripple-effect.md b/docs/docs/guides/11-ripple-effect.md
index 31845060d7..fcdb1e70a4 100644
--- a/docs/docs/guides/11-ripple-effect.md
+++ b/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
diff --git a/docs/src/components/BannerExample.tsx b/docs/src/components/BannerExample.tsx
index 7f4acdc7bc..1bf609a20c 100644
--- a/docs/src/components/BannerExample.tsx
+++ b/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={() => {}} />
diff --git a/docs/src/components/GetStartedButtons.tsx b/docs/src/components/GetStartedButtons.tsx
index 4debe5b5ac..76bf2b0f6d 100644
--- a/docs/src/components/GetStartedButtons.tsx
+++ b/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>
   );
 };
diff --git a/example/src/DrawerItems.tsx b/example/src/DrawerItems.tsx
index 7974fd6678..d0646cebb2 100644
--- a/example/src/DrawerItems.tsx
+++ b/example/src/DrawerItems.tsx
@@ -264,7 +264,7 @@ function DrawerItems() {
               <Text variant="labelMedium">example</Text> directory.
             </Text>
             <Dialog.Actions>
-              <Button onPress={_handleDismissRTLDialog}>Ok</Button>
+              <Button onPress={_handleDismissRTLDialog} label="Ok" />
             </Dialog.Actions>
           </Dialog.Content>
         </Dialog>
diff --git a/example/src/Examples/ButtonExample.tsx b/example/src/Examples/ButtonExample.tsx
index c6ecc56d09..e911af3a19 100644
--- a/example/src/Examples/ButtonExample.tsx
+++ b/example/src/Examples/ButtonExample.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Image, StyleSheet, View } from 'react-native';
 
-import { Button, List, Text } from 'react-native-paper';
+import { Button, List } from 'react-native-paper';
 
 import { useExampleTheme } from '../hooks/useExampleTheme';
 import ScreenWrapper from '../ScreenWrapper';
@@ -11,33 +11,49 @@ const ButtonExample = () => {
 
   const color = theme.colors.inversePrimary;
 
+  const [selectedToggles, setSelectedToggles] = React.useState<
+    Record<string, boolean>
+  >({});
+
+  const toggle = (key: string) =>
+    setSelectedToggles((prev) => ({ ...prev, [key]: !prev[key] }));
+
   return (
     <ScreenWrapper>
       <List.Section title="Text button (text)">
         <View style={styles.row}>
-          <Button onPress={() => {}} style={styles.button}>
-            Default
-          </Button>
-          <Button textColor={color} onPress={() => {}} style={styles.button}>
-            Custom
-          </Button>
-          <Button disabled onPress={() => {}} style={styles.button}>
-            Disabled
-          </Button>
-          <Button icon="camera" onPress={() => {}} style={styles.button}>
-            Icon
-          </Button>
-          <Button loading onPress={() => {}} style={styles.button}>
-            Loading
-          </Button>
+          <Button onPress={() => {}} style={styles.button} label="Default" />
+          <Button
+            textColor={color}
+            onPress={() => {}}
+            style={styles.button}
+            label="Custom"
+          />
+          <Button
+            disabled
+            onPress={() => {}}
+            style={styles.button}
+            label="Disabled"
+          />
           <Button
             icon="camera"
             onPress={() => {}}
             style={styles.button}
-            contentStyle={styles.flexReverse}
-          >
-            Icon right
-          </Button>
+            label="Icon"
+          />
+          <Button
+            loading
+            onPress={() => {}}
+            style={styles.button}
+            label="Loading"
+          />
+          <Button
+            icon="camera"
+            onPress={() => {}}
+            style={styles.button}
+            iconPosition="trailing"
+            label="Icon right"
+          />
         </View>
       </List.Section>
       <List.Section title="Contained-tonal button (tonal)">
@@ -46,194 +62,182 @@ const ButtonExample = () => {
             mode="contained-tonal"
             onPress={() => {}}
             style={styles.button}
-          >
-            Default
-          </Button>
+            label="Default"
+          />
           <Button
             mode="contained-tonal"
             buttonColor={color}
             onPress={() => {}}
             style={styles.button}
-          >
-            Custom
-          </Button>
+            label="Custom"
+          />
           <Button
             mode="contained-tonal"
             disabled
             onPress={() => {}}
             style={styles.button}
-          >
-            Disabled
-          </Button>
+            label="Disabled"
+          />
           <Button
             mode="contained-tonal"
             icon="camera"
             onPress={() => {}}
             style={styles.button}
-          >
-            Icon
-          </Button>
+            label="Icon"
+          />
           <Button
             mode="contained-tonal"
             loading
             onPress={() => {}}
             style={styles.button}
-          >
-            Loading
-          </Button>
+            label="Loading"
+          />
           <Button
             mode="contained-tonal"
             icon="camera"
             onPress={() => {}}
             style={styles.button}
-            contentStyle={styles.flexReverse}
-          >
-            Icon right
-          </Button>
+            iconPosition="trailing"
+            label="Icon right"
+          />
         </View>
       </List.Section>
       <List.Section title="Outlined button (outlined)">
         <View style={styles.row}>
-          <Button mode="outlined" onPress={() => {}} style={styles.button}>
-            Default
-          </Button>
+          <Button
+            mode="outlined"
+            onPress={() => {}}
+            style={styles.button}
+            label="Default"
+          />
           <Button
             mode="outlined"
             textColor={color}
             onPress={() => {}}
             style={styles.button}
-          >
-            Custom
-          </Button>
+            label="Custom"
+          />
           <Button
             mode="outlined"
             disabled
             onPress={() => {}}
             style={styles.button}
-          >
-            Disabled
-          </Button>
+            label="Disabled"
+          />
           <Button
             mode="outlined"
             icon="camera"
             onPress={() => {}}
             style={styles.button}
-          >
-            Icon
-          </Button>
+            label="Icon"
+          />
           <Button
             mode="outlined"
             loading
             onPress={() => {}}
             style={styles.button}
-          >
-            Loading
-          </Button>
+            label="Loading"
+          />
           <Button
             mode="outlined"
             icon="camera"
             onPress={() => {}}
             style={styles.button}
-            contentStyle={styles.flexReverse}
-          >
-            Icon right
-          </Button>
+            iconPosition="trailing"
+            label="Icon right"
+          />
         </View>
       </List.Section>
       <List.Section title="Contained button (filled)">
         <View style={styles.row}>
-          <Button mode="contained" onPress={() => {}} style={styles.button}>
-            Default
-          </Button>
+          <Button
+            mode="contained"
+            onPress={() => {}}
+            style={styles.button}
+            label="Default"
+          />
           <Button
             mode="contained"
             buttonColor={color}
             onPress={() => {}}
             style={styles.button}
-          >
-            Custom
-          </Button>
+            label="Custom"
+          />
           <Button
             mode="contained"
             disabled
             onPress={() => {}}
             style={styles.button}
-          >
-            Disabled
-          </Button>
+            label="Disabled"
+          />
           <Button
             mode="contained"
             icon="camera"
             onPress={() => {}}
             style={styles.button}
-          >
-            Icon
-          </Button>
+            label="Icon"
+          />
           <Button
             mode="contained"
             loading
             onPress={() => {}}
             style={styles.button}
-          >
-            Loading
-          </Button>
+            label="Loading"
+          />
           <Button
             mode="contained"
             icon="camera"
             onPress={() => {}}
             style={styles.button}
-            contentStyle={styles.flexReverse}
-          >
-            Icon right
-          </Button>
+            iconPosition="trailing"
+            label="Icon right"
+          />
         </View>
       </List.Section>
       <List.Section title="Elevated button (elevated)">
         <View style={styles.row}>
-          <Button mode="elevated" onPress={() => {}} style={styles.button}>
-            Default
-          </Button>
+          <Button
+            mode="elevated"
+            onPress={() => {}}
+            style={styles.button}
+            label="Default"
+          />
           <Button
             mode="elevated"
             buttonColor={color}
             onPress={() => {}}
             style={styles.button}
-          >
-            Custom
-          </Button>
+            label="Custom"
+          />
           <Button
             mode="elevated"
             disabled
             onPress={() => {}}
             style={styles.button}
-          >
-            Disabled
-          </Button>
+            label="Disabled"
+          />
           <Button
             mode="elevated"
             icon="camera"
             onPress={() => {}}
             style={styles.button}
-          >
-            Icon
-          </Button>
+            label="Icon"
+          />
           <Button
             mode="elevated"
             loading
             onPress={() => {}}
             style={styles.button}
-          >
-            Loading
-          </Button>
+            label="Loading"
+          />
           <Button
             mode="elevated"
             icon="camera"
             onPress={() => {}}
             style={styles.button}
-            contentStyle={styles.flexReverse}
-          >
-            Icon right
-          </Button>
+            iconPosition="trailing"
+            label="Icon right"
+          />
         </View>
       </List.Section>
       <List.Section title="Custom">
@@ -245,17 +249,15 @@ const ButtonExample = () => {
             }}
             onPress={() => {}}
             style={styles.button}
-          >
-            Remote image
-          </Button>
+            label="Remote image"
+          />
           <Button
             mode="outlined"
             icon={require('../../assets/images/favorite.png')}
             onPress={() => {}}
             style={styles.button}
-          >
-            Required asset
-          </Button>
+            label="Required asset"
+          />
           <Button
             mode="outlined"
             icon={({ size }) => (
@@ -267,39 +269,42 @@ const ButtonExample = () => {
             )}
             onPress={() => {}}
             style={styles.button}
-          >
-            Custom component
-          </Button>
+            label="Custom component"
+          />
           <Button
             icon="heart"
             mode="outlined"
             onPress={() => {}}
             style={styles.button}
             labelStyle={[styles.fontStyles, styles.md3FontStyles]}
-          >
-            Custom Font
-          </Button>
-          <Button mode="outlined" onPress={() => {}} style={styles.button}>
-            <Text variant="titleLarge">Custom text</Text>
-          </Button>
+            label="Custom Font"
+          />
+          <Button
+            mode="outlined"
+            onPress={() => {}}
+            style={styles.button}
+            labelStyle={theme.fonts.titleLarge}
+            label="Custom text"
+          />
           <Button
             mode="outlined"
             onPress={() => {}}
             style={styles.customRadius}
-          >
-            Custom radius
-          </Button>
-          <Button mode="contained" onPress={() => {}} style={styles.noRadius}>
-            Without radius
-          </Button>
+            label="Custom radius"
+          />
+          <Button
+            mode="contained"
+            onPress={() => {}}
+            style={styles.noRadius}
+            label="Without radius"
+          />
           <Button
             mode="contained-tonal"
             onPress={() => {}}
             style={{ borderRadius: styles.customRadiusAndPadding.borderRadius }}
             contentStyle={styles.customRadiusAndPadding}
-          >
-            Custom radius and padding
-          </Button>
+            label="Custom radius and padding"
+          />
         </View>
 
         <View style={styles.row}>
@@ -307,18 +312,16 @@ const ButtonExample = () => {
             mode="contained"
             onPress={() => {}}
             style={styles.flexGrow1Button}
-          >
-            flex-grow: 1
-          </Button>
+            label="flex-grow: 1"
+          />
         </View>
         <View style={styles.row}>
           <Button
             mode="contained"
             onPress={() => {}}
             style={styles.width100PercentButton}
-          >
-            width: 100%
-          </Button>
+            label="width: 100%"
+          />
         </View>
       </List.Section>
       <List.Section title="Compact">
@@ -340,9 +343,78 @@ const ButtonExample = () => {
                 onPress={() => {}}
                 style={styles.button}
                 icon="camera"
-              >
-                Compact {mode}
-              </Button>
+                label={`Compact ${mode}`}
+              />
+            );
+          })}
+        </View>
+      </List.Section>
+      <List.Section title="Size (expressive)">
+        <View style={styles.row}>
+          {(
+            ['extra-small', 'small', 'medium', 'large', 'extra-large'] as const
+          ).map((size) => (
+            <Button
+              key={size}
+              mode="contained"
+              size={size}
+              icon="star"
+              onPress={() => {}}
+              style={styles.button}
+              label={size}
+            />
+          ))}
+        </View>
+      </List.Section>
+      <List.Section title="Shape (expressive)">
+        <View style={styles.row}>
+          {(['extra-small', 'small', 'medium', 'large'] as const).map(
+            (size) => (
+              <Button
+                key={`round-${size}`}
+                mode="outlined"
+                size={size}
+                shape="round"
+                onPress={() => {}}
+                style={styles.button}
+                label={`${size} round`}
+              />
+            )
+          )}
+        </View>
+        <View style={styles.row}>
+          {(['extra-small', 'small', 'medium', 'large'] as const).map(
+            (size) => (
+              <Button
+                key={`square-${size}`}
+                mode="outlined"
+                size={size}
+                shape="square"
+                onPress={() => {}}
+                style={styles.button}
+                label={`${size} square`}
+              />
+            )
+          )}
+        </View>
+      </List.Section>
+      <List.Section title="Toggle (expressive)">
+        <View style={styles.row}>
+          {(['outlined', 'text', 'contained-tonal'] as const).map((mode) => {
+            const key = `toggle-${mode}`;
+            const selected = !!selectedToggles[key];
+            return (
+              <Button
+                key={key}
+                mode={mode}
+                size="small"
+                shape="round"
+                selected={selected}
+                onPress={() => toggle(key)}
+                style={styles.button}
+                icon={selected ? 'check' : 'plus'}
+                label={mode}
+              />
             );
           })}
         </View>
@@ -364,9 +436,6 @@ const styles = StyleSheet.create({
   button: {
     margin: 4,
   },
-  flexReverse: {
-    flexDirection: 'row-reverse',
-  },
   md3FontStyles: {
     lineHeight: 32,
   },
diff --git a/example/src/Examples/CardExample.tsx b/example/src/Examples/CardExample.tsx
index 08829bdf85..432883abbf 100644
--- a/example/src/Examples/CardExample.tsx
+++ b/example/src/Examples/CardExample.tsx
@@ -75,8 +75,8 @@ const CardExample = () => {
         <Card style={styles.card} mode={selectedMode}>
           <Card.Cover source={require('../../assets/images/forest.jpg')} />
           <Card.Actions>
-            <Button onPress={() => {}}>Share</Button>
-            <Button onPress={() => {}}>Explore</Button>
+            <Button onPress={() => {}} label="Share" />
+            <Button onPress={() => {}} label="Explore" />
           </Card.Actions>
         </Card>
         <Card style={styles.card} mode={selectedMode}>
@@ -104,12 +104,8 @@ const CardExample = () => {
           />
           <Card.Title title="Custom Button styles" />
           <Card.Actions>
-            <Button style={styles.button} onPress={() => {}}>
-              Share
-            </Button>
-            <Button style={styles.button} onPress={() => {}}>
-              Explore
-            </Button>
+            <Button style={styles.button} onPress={() => {}} label="Share" />
+            <Button style={styles.button} onPress={() => {}} label="Explore" />
           </Card.Actions>
         </Card>
         <Card
diff --git a/example/src/Examples/DialogExample.tsx b/example/src/Examples/DialogExample.tsx
index d926ae6616..33fb7fab59 100644
--- a/example/src/Examples/DialogExample.tsx
+++ b/example/src/Examples/DialogExample.tsx
@@ -32,52 +32,45 @@ const DialogExample = () => {
         mode="outlined"
         onPress={_toggleDialog('dialog1')}
         style={styles.button}
-      >
-        Long text
-      </Button>
+        label="Long text"
+      />
       <Button
         mode="outlined"
         onPress={_toggleDialog('dialog2')}
         style={styles.button}
-      >
-        Radio buttons
-      </Button>
+        label="Radio buttons"
+      />
       <Button
         mode="outlined"
         onPress={_toggleDialog('dialog3')}
         style={styles.button}
-      >
-        Progress indicator
-      </Button>
+        label="Progress indicator"
+      />
       <Button
         mode="outlined"
         onPress={_toggleDialog('dialog4')}
         style={styles.button}
-      >
-        Undismissable Dialog
-      </Button>
+        label="Undismissable Dialog"
+      />
       <Button
         mode="outlined"
         onPress={_toggleDialog('dialog5')}
         style={styles.button}
-      >
-        Custom colors
-      </Button>
+        label="Custom colors"
+      />
       <Button
         mode="outlined"
         onPress={_toggleDialog('dialog6')}
         style={styles.button}
-      >
-        With icon
-      </Button>
+        label="With icon"
+      />
       {Platform.OS === 'android' && (
         <Button
           mode="outlined"
           onPress={_toggleDialog('dialog7')}
           style={styles.button}
-        >
-          Dismissable back button
-        </Button>
+          label="Dismissable back button"
+        />
       )}
       <DialogWithLongText
         visible={_getVisible('dialog1')}
diff --git a/example/src/Examples/Dialogs/DialogWithCustomColors.tsx b/example/src/Examples/Dialogs/DialogWithCustomColors.tsx
index e3bffafd60..c63cf74ece 100644
--- a/example/src/Examples/Dialogs/DialogWithCustomColors.tsx
+++ b/example/src/Examples/Dialogs/DialogWithCustomColors.tsx
@@ -29,9 +29,7 @@ const DialogWithCustomColors = ({
           </TextComponent>
         </Dialog.Content>
         <Dialog.Actions>
-          <Button color={MD3Colors.primary95} onPress={close}>
-            Ok
-          </Button>
+          <Button color={MD3Colors.primary95} onPress={close} label="Ok" />
         </Dialog.Actions>
       </Dialog>
     </Portal>
diff --git a/example/src/Examples/Dialogs/DialogWithDismissableBackButton.tsx b/example/src/Examples/Dialogs/DialogWithDismissableBackButton.tsx
index 261b7ff9e6..b2fa86397a 100644
--- a/example/src/Examples/Dialogs/DialogWithDismissableBackButton.tsx
+++ b/example/src/Examples/Dialogs/DialogWithDismissableBackButton.tsx
@@ -26,10 +26,8 @@ const DialogWithDismissableBackButton = ({
         </TextComponent>
       </Dialog.Content>
       <Dialog.Actions>
-        <Button color={MD3Colors.tertiary50} disabled>
-          Disagree
-        </Button>
-        <Button onPress={close}>Agree</Button>
+        <Button color={MD3Colors.tertiary50} disabled label="Disagree" />
+        <Button onPress={close} label="Agree" />
       </Dialog.Actions>
     </Dialog>
   </Portal>
diff --git a/example/src/Examples/Dialogs/DialogWithIcon.tsx b/example/src/Examples/Dialogs/DialogWithIcon.tsx
index d939d4e401..7d51071775 100644
--- a/example/src/Examples/Dialogs/DialogWithIcon.tsx
+++ b/example/src/Examples/Dialogs/DialogWithIcon.tsx
@@ -24,10 +24,8 @@ const DialogWithIcon = ({
           </TextComponent>
         </Dialog.Content>
         <Dialog.Actions>
-          <Button onPress={close} color={MD3Colors.error50}>
-            Disagree
-          </Button>
-          <Button onPress={close}>Agree</Button>
+          <Button onPress={close} color={MD3Colors.error50} label="Disagree" />
+          <Button onPress={close} label="Agree" />
         </Dialog.Actions>
       </Dialog>
     </Portal>
diff --git a/example/src/Examples/Dialogs/DialogWithLongText.tsx b/example/src/Examples/Dialogs/DialogWithLongText.tsx
index 3f826c1b40..e92bbe3267 100644
--- a/example/src/Examples/Dialogs/DialogWithLongText.tsx
+++ b/example/src/Examples/Dialogs/DialogWithLongText.tsx
@@ -63,7 +63,7 @@ const DialogWithLongText = ({
         </ScrollView>
       </Dialog.ScrollArea>
       <Dialog.Actions>
-        <Button onPress={close}>Ok</Button>
+        <Button onPress={close} label="Ok" />
       </Dialog.Actions>
     </Dialog>
   </Portal>
diff --git a/example/src/Examples/Dialogs/DialogWithRadioBtns.tsx b/example/src/Examples/Dialogs/DialogWithRadioBtns.tsx
index 966422369e..07aca7ecf2 100644
--- a/example/src/Examples/Dialogs/DialogWithRadioBtns.tsx
+++ b/example/src/Examples/Dialogs/DialogWithRadioBtns.tsx
@@ -84,8 +84,8 @@ const DialogWithRadioBtns = ({ visible, close }: Props) => {
           </ScrollView>
         </Dialog.ScrollArea>
         <Dialog.Actions>
-          <Button onPress={close}>Cancel</Button>
-          <Button onPress={close}>Ok</Button>
+          <Button onPress={close} label="Cancel" />
+          <Button onPress={close} label="Ok" />
         </Dialog.Actions>
       </Dialog>
     </Portal>
diff --git a/example/src/Examples/Dialogs/UndismissableDialog.tsx b/example/src/Examples/Dialogs/UndismissableDialog.tsx
index ded4896fe2..1305a2584b 100644
--- a/example/src/Examples/Dialogs/UndismissableDialog.tsx
+++ b/example/src/Examples/Dialogs/UndismissableDialog.tsx
@@ -18,10 +18,8 @@ const UndismissableDialog = ({
         <TextComponent>This is an undismissable dialog!!</TextComponent>
       </Dialog.Content>
       <Dialog.Actions>
-        <Button color={MD3Colors.tertiary50} disabled>
-          Disagree
-        </Button>
-        <Button onPress={close}>Agree</Button>
+        <Button color={MD3Colors.tertiary50} disabled label="Disagree" />
+        <Button onPress={close} label="Agree" />
       </Dialog.Actions>
     </Dialog>
   </Portal>
diff --git a/example/src/Examples/MenuExample.tsx b/example/src/Examples/MenuExample.tsx
index b43fb04778..4a1e8cfeb3 100644
--- a/example/src/Examples/MenuExample.tsx
+++ b/example/src/Examples/MenuExample.tsx
@@ -84,9 +84,11 @@ const MenuExample = ({ navigation }: Props) => {
               visible={_getVisible('menu2')}
               onDismiss={_toggleMenu('menu2')}
               anchor={
-                <Button mode="outlined" onPress={_toggleMenu('menu2')}>
-                  Menu with icons
-                </Button>
+                <Button
+                  mode="outlined"
+                  onPress={_toggleMenu('menu2')}
+                  label="Menu with icons"
+                />
               }
             >
               <Menu.Item leadingIcon="undo" onPress={() => {}} title="Undo" />
@@ -143,9 +145,11 @@ const MenuExample = ({ navigation }: Props) => {
             onDismiss={_toggleMenu('menu5')}
             anchorPosition="bottom"
             anchor={
-              <Button mode="outlined" onPress={_toggleMenu('menu5')}>
-                Menu with anchor position bottom
-              </Button>
+              <Button
+                mode="outlined"
+                onPress={_toggleMenu('menu5')}
+                label="Menu with anchor position bottom"
+              />
             }
           >
             <Menu.Item onPress={() => {}} title="Item 1" />
@@ -159,9 +163,11 @@ const MenuExample = ({ navigation }: Props) => {
             visible={_getVisible('menu4')}
             onDismiss={_toggleMenu('menu4')}
             anchor={
-              <Button mode="outlined" onPress={_toggleMenu('menu4')}>
-                Menu at bottom
-              </Button>
+              <Button
+                mode="outlined"
+                onPress={_toggleMenu('menu4')}
+                label="Menu at bottom"
+              />
             }
           >
             <Menu.Item onPress={() => {}} title="Bottom Item 1" />
diff --git a/example/src/Examples/ProgressBarExample.tsx b/example/src/Examples/ProgressBarExample.tsx
index 5ab797bb1d..1a146597f7 100644
--- a/example/src/Examples/ProgressBarExample.tsx
+++ b/example/src/Examples/ProgressBarExample.tsx
@@ -41,11 +41,12 @@ const ProgressBarExample = () => {
 
   return (
     <ScreenWrapper contentContainerStyle={styles.container}>
-      <Button onPress={() => setVisible(!visible)}>Toggle visibility</Button>
-      <Button onPress={() => setProgress(Math.random())}>
-        Random progress
-      </Button>
-      <Button onPress={runCustomAnimation}>Toggle animation</Button>
+      <Button onPress={() => setVisible(!visible)} label="Toggle visibility" />
+      <Button
+        onPress={() => setProgress(Math.random())}
+        label="Random progress"
+      />
+      <Button onPress={runCustomAnimation} label="Toggle animation" />
 
       <View style={styles.row}>
         <Text variant="bodyMedium">Default ProgressBar</Text>
diff --git a/example/src/Examples/SnackbarExample.tsx b/example/src/Examples/SnackbarExample.tsx
index e31955f18c..06e65ce077 100644
--- a/example/src/Examples/SnackbarExample.tsx
+++ b/example/src/Examples/SnackbarExample.tsx
@@ -90,9 +90,8 @@ const SnackbarExample = () => {
             onPress={() =>
               setOptions({ ...options, showSnackbar: !showSnackbar })
             }
-          >
-            {showSnackbar ? 'Hide' : 'Show'}
-          </Button>
+            label={showSnackbar ? 'Hide' : 'Show'}
+          />
         </View>
       </ScreenWrapper>
       <Snackbar
diff --git a/example/src/Examples/TeamDetails.tsx b/example/src/Examples/TeamDetails.tsx
index 540507ffe8..b506741e06 100644
--- a/example/src/Examples/TeamDetails.tsx
+++ b/example/src/Examples/TeamDetails.tsx
@@ -107,8 +107,8 @@ const News = () => {
               </Text>
             </Card.Content>
             <Card.Actions>
-              <Button onPress={() => {}}>Share</Button>
-              <Button onPress={() => {}}>Read more</Button>
+              <Button onPress={() => {}} label="Share" />
+              <Button onPress={() => {}} label="Read more" />
             </Card.Actions>
           </Card>
           <Card style={styles.card} mode="contained">
@@ -124,8 +124,8 @@ const News = () => {
               </Text>
             </Card.Content>
             <Card.Actions>
-              <Button onPress={() => {}}>Share</Button>
-              <Button onPress={() => {}}>Read more</Button>
+              <Button onPress={() => {}} label="Share" />
+              <Button onPress={() => {}} label="Read more" />
             </Card.Actions>
           </Card>
         </View>
diff --git a/src/components/Banner.tsx b/src/components/Banner.tsx
index b1a00b4ce4..428a225d37 100644
--- a/src/components/Banner.tsx
+++ b/src/components/Banner.tsx
@@ -246,10 +246,9 @@ const Banner = ({
                 style={styles.button}
                 textColor={colors.primary}
                 theme={theme}
+                label={label}
                 {...others}
-              >
-                {label}
-              </Button>
+              />
             ))}
           </View>
         </Animated.View>
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index 59cebe3a93..7e637315e5 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import {
   AccessibilityRole,
   Animated,
+  ColorValue,
   GestureResponderEvent,
   Platform,
   PressableAndroidRippleConfig,
@@ -14,7 +15,13 @@ import {
 
 import {
   ButtonMode,
+  ButtonShape,
+  ButtonSize,
   getButtonColors,
+  getButtonIconStyle,
+  getButtonRippleColor,
+  getButtonShapeRadius,
+  getButtonSizeStyle,
   getButtonTouchableRippleStyle,
 } from './utils';
 import { useInternalTheme } from '../../core/theming';
@@ -30,7 +37,10 @@ import TouchableRipple, {
 } from '../TouchableRipple/TouchableRipple';
 import Text from '../Typography/Text';
 
-export type Props = $Omit<React.ComponentProps<typeof Surface>, 'mode'> & {
+export type Props = $Omit<
+  React.ComponentProps<typeof Surface>,
+  'mode' | 'children'
+> & {
   /**
    * Mode of the button. You can change the mode to adjust the styling to give it desired emphasis.
    * - `text` - flat button without background or outline, used for the lowest priority actions, especially when presenting multiple options.
@@ -50,6 +60,36 @@ export type Props = $Omit<React.ComponentProps<typeof Surface>, 'mode'> & {
    * Use a compact look, useful for `text` buttons in a row.
    */
   compact?: boolean;
+  /**
+   * Size of the button (Material Design 3 expressive). One of
+   * `'extra-small' | 'small' | 'medium' | 'large' | 'extra-large'`.
+   *
+   * When omitted, the button uses its legacy visuals. When set, the size
+   * controls the minimum height, horizontal padding, icon size, the gap
+   * between icon and label, and the label typescale.
+   */
+  size?: ButtonSize;
+  /**
+   * Shape variant of the button (Material Design 3 expressive). `'round'`
+   * uses the full-pill corner radius; `'square'` uses a smaller per-size
+   * corner radius. When omitted, the button keeps its legacy corner radius
+   * (`theme.shapes.corner.largeIncreased`). Overridden by an explicit
+   * `borderRadius` in `style`.
+   */
+  shape?: ButtonShape;
+  /**
+   * Whether this button is in the selected state (Material Design 3
+   * expressive toggle). When `true`:
+   *
+   * - The `shape` is flipped: `'round'` becomes `'square'` and vice versa.
+   * - For `outlined` and `text` modes, the button adopts a filled
+   *   `secondaryContainer` appearance (matches `contained-tonal`).
+   * - `accessibilityState.selected` is set so screen readers announce the
+   *   toggle state.
+   *
+   * Other modes only flip the shape.
+   */
+  selected?: boolean;
   /**
    * @deprecated Deprecated in v5.x - use `buttonColor` or `textColor` instead.
    * Custom text color for flat button, or background color for contained button.
@@ -71,6 +111,10 @@ export type Props = $Omit<React.ComponentProps<typeof Surface>, 'mode'> & {
    * Icon to display for the `Button`.
    */
   icon?: IconSource;
+  /**
+   * Position of the `icon` relative to the label. Defaults to `'leading'`.
+   */
+  iconPosition?: 'leading' | 'trailing';
   /**
    * Whether the button is disabled. A disabled button is greyed out and `onPress` is not called on touch.
    */
@@ -78,9 +122,14 @@ export type Props = $Omit<React.ComponentProps<typeof Surface>, 'mode'> & {
   /**
    * Label text of the button.
    */
-  children: React.ReactNode;
+  label?: string;
   /**
-   * Make the label text uppercased. Note that this won't work if you pass React elements as children.
+   * @deprecated Use `label` instead. When both `label` and `children` are set, `label` is used.
+   * Label text of the button.
+   */
+  children?: React.ReactNode;
+  /**
+   * Make the label text uppercased.
    */
   uppercase?: boolean;
   /**
@@ -88,6 +137,11 @@ export type Props = $Omit<React.ComponentProps<typeof Surface>, 'mode'> & {
    * https://reactnative.dev/docs/pressable#rippleconfig
    */
   background?: PressableAndroidRippleConfig;
+  /**
+   * Color of the ripple effect / state layer. Defaults to the label color at
+   * the pressed-state opacity.
+   */
+  rippleColor?: ColorValue;
   /**
    * Accessibility label for the button. This is read by the screen reader when the user taps the button.
    */
@@ -122,7 +176,10 @@ export type Props = $Omit<React.ComponentProps<typeof Surface>, 'mode'> & {
   delayLongPress?: number;
   /**
    * Style of button's inner content.
-   * Use this prop to apply custom height and width, to set a custom padding or to set the icon on the right with `flexDirection: 'row-reverse'`.
+   * Use this prop to apply custom height and width or to set a custom padding.
+   *
+   * Note: setting `flexDirection: 'row-reverse'` here to move the icon to the
+   * trailing edge is deprecated — use the `iconPosition` prop instead.
    */
   contentStyle?: StyleProp<ViewStyle>;
   /**
@@ -161,24 +218,39 @@ export type Props = $Omit<React.ComponentProps<typeof Surface>, 'mode'> & {
  * import { Button } from 'react-native-paper';
  *
  * const MyComponent = () => (
- *   <Button icon="camera" mode="contained" onPress={() => console.log('Pressed')}>
- *     Press me
- *   </Button>
+ *   <Button
+ *     icon="camera"
+ *     mode="contained"
+ *     onPress={() => console.log('Pressed')}
+ *     label="Press me"
+ *   />
  * );
  *
  * export default MyComponent;
  * ```
  */
+
+// Elevation levels (MD3) used by the `elevated` mode: level 1 at rest,
+// level 2 while pressed.
+const initialElevation = 1;
+const activeElevation = 2;
+const iconSize = 18;
+
 const Button = (
   {
     disabled,
     compact,
     mode = 'text',
+    size,
+    shape,
+    selected,
     dark,
     loading,
     icon,
+    iconPosition,
     buttonColor: customButtonColor,
     textColor: customTextColor,
+    label,
     children,
     accessibilityLabel,
     accessibilityHint,
@@ -197,6 +269,7 @@ const Button = (
     testID = 'button',
     accessible,
     background,
+    rippleColor: customRippleColor,
     maxFontSizeMultiplier,
     touchableRef,
     ...rest
@@ -204,16 +277,34 @@ const Button = (
   ref: React.ForwardedRef<View>
 ) => {
   const theme = useInternalTheme(themeOverrides);
-  const isMode = React.useCallback(
-    (modeToCompare: ButtonMode) => {
-      return mode === modeToCompare;
-    },
-    [mode]
-  );
+  const isMode = (modeToCompare: ButtonMode) => mode === modeToCompare;
   const { animation } = theme;
   const uppercase = uppercaseProp ?? false;
   const isWeb = Platform.OS === 'web';
 
+  if (process.env.NODE_ENV !== 'production' && children != null) {
+    console.warn(
+      'Button: the `children` prop is deprecated and will be removed in a future release. Use the `label` prop instead.'
+    );
+  }
+
+  const labelContent = label != null ? label : children;
+
+  const flattenedContentStyle = React.useMemo(
+    () => StyleSheet.flatten(contentStyle) as ViewStyle | undefined,
+    [contentStyle]
+  );
+  const usesReverseContentStyle =
+    flattenedContentStyle?.flexDirection === 'row-reverse';
+
+  if (process.env.NODE_ENV !== 'production' && usesReverseContentStyle) {
+    console.warn(
+      'Button: setting `flexDirection: \'row-reverse\'` in `contentStyle` to move the icon to the trailing edge is deprecated. Use the `iconPosition="trailing"` prop instead.'
+    );
+  }
+
+  const isTrailingIcon = iconPosition === 'trailing' || usesReverseContentStyle;
+
   const hasPassedTouchHandler = hasTouchHandler({
     onPress,
     onPressIn,
@@ -222,8 +313,6 @@ const Button = (
   });
 
   const isElevationEntitled = !disabled && isMode('elevated');
-  const initialElevation = 1;
-  const activeElevation = 2;
 
   const { current: elevation } = React.useRef<Animated.Value>(
     new Animated.Value(isElevationEntitled ? initialElevation : 0)
@@ -237,42 +326,61 @@ const Button = (
       duration: 0,
       useNativeDriver: true,
     });
-  }, [isElevationEntitled, elevation, initialElevation]);
+  }, [isElevationEntitled, elevation]);
 
-  const handlePressIn = (e: GestureResponderEvent) => {
-    onPressIn?.(e);
-    if (isMode('elevated')) {
-      const { scale } = animation;
-      Animated.timing(elevation, {
-        toValue: activeElevation,
-        duration: 200 * scale,
-        useNativeDriver:
-          isWeb || Platform.constants.reactNativeVersion.minor <= 72,
-      }).start();
-    }
-  };
-
-  const handlePressOut = (e: GestureResponderEvent) => {
-    onPressOut?.(e);
-    if (isMode('elevated')) {
-      const { scale } = animation;
-      Animated.timing(elevation, {
-        toValue: initialElevation,
-        duration: 150 * scale,
-        useNativeDriver:
-          isWeb || Platform.constants.reactNativeVersion.minor <= 72,
-      }).start();
-    }
-  };
+  const handlePressIn = React.useCallback(
+    (e: GestureResponderEvent) => {
+      onPressIn?.(e);
+      if (mode === 'elevated') {
+        const { scale } = animation;
+        Animated.timing(elevation, {
+          toValue: activeElevation,
+          duration: 200 * scale,
+          useNativeDriver:
+            isWeb || Platform.constants.reactNativeVersion.minor <= 72,
+        }).start();
+      }
+    },
+    [onPressIn, mode, animation, elevation, isWeb]
+  );
 
-  const flattenedStyles = (StyleSheet.flatten(style) || {}) as ViewStyle;
-  const [, borderRadiusStyles] = splitStyles(
-    flattenedStyles,
-    (style) => style.startsWith('border') && style.endsWith('Radius')
+  const handlePressOut = React.useCallback(
+    (e: GestureResponderEvent) => {
+      onPressOut?.(e);
+      if (mode === 'elevated') {
+        const { scale } = animation;
+        Animated.timing(elevation, {
+          toValue: initialElevation,
+          duration: 150 * scale,
+          useNativeDriver:
+            isWeb || Platform.constants.reactNativeVersion.minor <= 72,
+        }).start();
+      }
+    },
+    [onPressOut, mode, animation, elevation, isWeb]
   );
 
-  const borderRadius = theme.shapes.corner.largeIncreased;
-  const iconSize = 18;
+  const borderRadiusStyles = React.useMemo(() => {
+    const flattenedStyles = (StyleSheet.flatten(style) || {}) as ViewStyle;
+    const [, radiusStyles] = splitStyles(
+      flattenedStyles,
+      (key) => key.startsWith('border') && key.endsWith('Radius')
+    );
+    return radiusStyles;
+  }, [style]);
+
+  // When the button is `selected`, flip the requested shape so the
+  // unselected/selected pair contrasts visually (round ↔ square).
+  const effectiveShape: ButtonShape | undefined = shape
+    ? selected
+      ? shape === 'round'
+        ? 'square'
+        : 'round'
+      : shape
+    : undefined;
+  const borderRadius = effectiveShape
+    ? getButtonShapeRadius({ size, shape: effectiveShape })
+    : theme.shapes.corner.largeIncreased;
 
   const {
     backgroundColor,
@@ -281,51 +389,83 @@ const Button = (
     textOpacity,
     borderWidth,
     backgroundOpacity,
-  } = getButtonColors({
-    customButtonColor,
-    customTextColor,
-    theme,
-    mode,
-    disabled,
-    dark,
-  });
+  } = React.useMemo(
+    () =>
+      getButtonColors({
+        customButtonColor,
+        customTextColor,
+        theme,
+        mode,
+        disabled,
+        dark,
+        selected,
+      }),
+    [customButtonColor, customTextColor, theme, mode, disabled, dark, selected]
+  );
 
-  const touchableStyle = {
-    ...borderRadiusStyles,
-    borderRadius: borderRadiusStyles.borderRadius ?? borderRadius,
-  };
+  const rippleColor = React.useMemo(
+    () => getButtonRippleColor({ textColor, customRippleColor }),
+    [textColor, customRippleColor]
+  );
 
-  const buttonStyle = {
-    backgroundColor: backgroundOpacity < 1 ? 'transparent' : backgroundColor,
-    borderColor,
-    borderWidth,
-    ...touchableStyle,
-  };
+  const touchableStyle = React.useMemo(
+    () => ({
+      ...borderRadiusStyles,
+      borderRadius: borderRadiusStyles.borderRadius ?? borderRadius,
+    }),
+    [borderRadiusStyles, borderRadius]
+  );
 
-  const { color: customLabelColor, fontSize: customLabelSize } =
-    StyleSheet.flatten(labelStyle) || {};
+  const buttonStyle = React.useMemo(
+    () => ({
+      backgroundColor: backgroundOpacity < 1 ? 'transparent' : backgroundColor,
+      borderColor,
+      borderWidth,
+      ...touchableStyle,
+    }),
+    [
+      backgroundOpacity,
+      backgroundColor,
+      borderColor,
+      borderWidth,
+      touchableStyle,
+    ]
+  );
 
-  const font = (theme as Theme).fonts.labelLarge;
+  const touchableRippleStyle = React.useMemo(
+    () => getButtonTouchableRippleStyle(touchableStyle, borderWidth),
+    [touchableStyle, borderWidth]
+  );
 
-  const textStyle = {
-    color: textColor,
-    ...font,
-  };
+  const { color: customLabelColor, fontSize: customLabelSize } = React.useMemo(
+    () => StyleSheet.flatten(labelStyle) || {},
+    [labelStyle]
+  );
 
-  const iconStyle =
-    StyleSheet.flatten(contentStyle)?.flexDirection === 'row-reverse'
-      ? [
-          styles.iconReverse,
-          styles[`md3IconReverse${compact ? 'Compact' : ''}`],
-          isMode('text') &&
-            styles[`md3IconReverseTextMode${compact ? 'Compact' : ''}`],
-        ]
-      : [
-          styles.icon,
-          styles[`md3Icon${compact ? 'Compact' : ''}`],
-          isMode('text') &&
-            styles[`md3IconTextMode${compact ? 'Compact' : ''}`],
-        ];
+  const sizeStyle = React.useMemo(
+    () => (size ? getButtonSizeStyle(size) : undefined),
+    [size]
+  );
+
+  const textStyle = React.useMemo(
+    () => ({
+      color: textColor,
+      ...(theme as Theme).fonts[sizeStyle?.labelVariant ?? 'labelLarge'],
+    }),
+    [textColor, theme, sizeStyle]
+  );
+
+  const iconStyle = React.useMemo(
+    () =>
+      sizeStyle
+        ? null
+        : getButtonIconStyle({
+            mode,
+            compact,
+            position: isTrailingIcon ? 'trailing' : 'leading',
+          }),
+    [mode, compact, isTrailingIcon, sizeStyle]
+  );
 
   return (
     <Surface
@@ -359,6 +499,7 @@ const Button = (
       <TouchableRipple
         borderless
         background={background}
+        rippleColor={rippleColor}
         onPress={onPress}
         onLongPress={onLongPress}
         onPressIn={hasPassedTouchHandler ? handlePressIn : undefined}
@@ -367,21 +508,40 @@ const Button = (
         accessibilityLabel={accessibilityLabel}
         accessibilityHint={accessibilityHint}
         accessibilityRole={accessibilityRole}
-        accessibilityState={{ disabled }}
+        accessibilityState={{ disabled, selected }}
         accessible={accessible}
         hitSlop={hitSlop}
         disabled={disabled}
-        style={getButtonTouchableRippleStyle(touchableStyle, borderWidth)}
+        style={touchableRippleStyle}
         testID={testID}
         theme={theme}
         ref={touchableRef}
       >
-        <View style={[styles.content, { opacity: textOpacity }, contentStyle]}>
+        <View
+          style={[
+            styles.content,
+            isTrailingIcon && styles.contentReverse,
+            ...(sizeStyle
+              ? [
+                  {
+                    minHeight: sizeStyle.minHeight,
+                    paddingHorizontal: sizeStyle.paddingHorizontal,
+                    gap: sizeStyle.iconGap,
+                  },
+                ]
+              : []),
+            { opacity: textOpacity },
+            contentStyle,
+          ]}
+        >
           {icon && loading !== true ? (
-            <View style={iconStyle} testID={`${testID}-icon-container`}>
+            <View
+              style={iconStyle ?? undefined}
+              testID={`${testID}-icon-container`}
+            >
               <Icon
                 source={icon}
-                size={customLabelSize ?? iconSize}
+                size={sizeStyle?.iconSize ?? customLabelSize ?? iconSize}
                 color={
                   typeof customLabelColor === 'string'
                     ? customLabelColor
@@ -392,35 +552,37 @@ const Button = (
           ) : null}
           {loading ? (
             <ActivityIndicator
-              size={customLabelSize ?? iconSize}
+              size={sizeStyle?.iconSize ?? customLabelSize ?? iconSize}
               color={
                 typeof customLabelColor === 'string'
                   ? customLabelColor
                   : textColor
               }
-              style={iconStyle}
+              style={iconStyle ?? undefined}
             />
           ) : null}
           <Text
-            variant="labelLarge"
+            variant={sizeStyle?.labelVariant ?? 'labelLarge'}
             selectable={false}
             numberOfLines={1}
             testID={`${testID}-text`}
             style={[
               styles.label,
-              isMode('text')
+              sizeStyle
+                ? styles.sizedLabel
+                : isMode('text')
                 ? icon || loading
                   ? styles.md3LabelTextAddons
                   : styles.md3LabelText
                 : styles.md3Label,
-              compact && styles.compactLabel,
+              !sizeStyle && compact && styles.compactLabel,
               uppercase && styles.uppercaseLabel,
               textStyle,
               labelStyle,
             ]}
             maxFontSizeMultiplier={maxFontSizeMultiplier}
           >
-            {children}
+            {labelContent}
           </Text>
         </View>
       </TouchableRipple>
@@ -441,53 +603,18 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
-  icon: {
-    marginLeft: 12,
-    marginRight: -4,
-  },
-  iconReverse: {
-    marginRight: 12,
-    marginLeft: -4,
-  },
-  /* eslint-disable react-native/no-unused-styles */
-  md3Icon: {
-    marginLeft: 16,
-    marginRight: -16,
-  },
-  md3IconCompact: {
-    marginLeft: 8,
-    marginRight: 0,
+  contentReverse: {
+    flexDirection: 'row-reverse',
   },
-  md3IconReverse: {
-    marginLeft: -16,
-    marginRight: 16,
-  },
-  md3IconReverseCompact: {
-    marginLeft: 0,
-    marginRight: 8,
-  },
-  md3IconTextMode: {
-    marginLeft: 12,
-    marginRight: -8,
-  },
-  md3IconTextModeCompact: {
-    marginLeft: 6,
-    marginRight: 0,
-  },
-  md3IconReverseTextMode: {
-    marginLeft: -8,
-    marginRight: 12,
-  },
-  md3IconReverseTextModeCompact: {
-    marginLeft: 0,
-    marginRight: 6,
-  },
-  /* eslint-enable react-native/no-unused-styles */
   label: {
     textAlign: 'center',
     marginVertical: 9,
     marginHorizontal: 16,
   },
+  sizedLabel: {
+    marginVertical: 0,
+    marginHorizontal: 0,
+  },
   compactLabel: {
     marginHorizontal: 8,
   },
diff --git a/src/components/Button/utils.tsx b/src/components/Button/utils.tsx
index 37038afbd7..639c16bbf2 100644
--- a/src/components/Button/utils.tsx
+++ b/src/components/Button/utils.tsx
@@ -1,7 +1,10 @@
-import type { ViewStyle } from 'react-native';
+import type { ColorValue, ViewStyle } from 'react-native';
+
+import color from 'color';
 
 import { black, white } from '../../theme/colors';
 import { tokens } from '../../theme/tokens';
+import { cornerFull } from '../../theme/tokens/sys/shape';
 import type { InternalTheme, Theme } from '../../types';
 import { splitStyles } from '../../utils/splitStyles';
 
@@ -14,10 +17,142 @@ export type ButtonMode =
   | 'elevated'
   | 'contained-tonal';
 
+export type ButtonIconPosition = 'leading' | 'trailing';
+
+export type ButtonSize =
+  | 'extra-small'
+  | 'small'
+  | 'medium'
+  | 'large'
+  | 'extra-large';
+
+export type ButtonLabelVariant =
+  | 'labelLarge'
+  | 'titleMedium'
+  | 'headlineSmall'
+  | 'headlineLarge';
+
+export type ButtonSizeStyle = {
+  minHeight: number;
+  paddingHorizontal: number;
+  iconSize: number;
+  iconGap: number;
+  labelVariant: ButtonLabelVariant;
+};
+
+/**
+ * Per-size metrics for the Material Design 3 (expressive) button sizes.
+ * Used when the `size` prop is explicitly set; if `size` is omitted, the
+ * Button keeps its legacy visuals.
+ */
+const BUTTON_SIZE_STYLES: Record<ButtonSize, ButtonSizeStyle> = {
+  'extra-small': {
+    minHeight: 32,
+    paddingHorizontal: 12,
+    iconSize: 16,
+    iconGap: 4,
+    labelVariant: 'labelLarge',
+  },
+  small: {
+    minHeight: 40,
+    paddingHorizontal: 16,
+    iconSize: 20,
+    iconGap: 8,
+    labelVariant: 'labelLarge',
+  },
+  medium: {
+    minHeight: 56,
+    paddingHorizontal: 24,
+    iconSize: 24,
+    iconGap: 8,
+    labelVariant: 'titleMedium',
+  },
+  large: {
+    minHeight: 96,
+    paddingHorizontal: 48,
+    iconSize: 32,
+    iconGap: 12,
+    labelVariant: 'headlineSmall',
+  },
+  'extra-large': {
+    minHeight: 136,
+    paddingHorizontal: 64,
+    iconSize: 40,
+    iconGap: 16,
+    labelVariant: 'headlineLarge',
+  },
+};
+
+export const getButtonSizeStyle = (size: ButtonSize): ButtonSizeStyle =>
+  BUTTON_SIZE_STYLES[size];
+
+export type ButtonShape = 'round' | 'square';
+
+/**
+ * Per-size corner radii for the Material Design 3 expressive shape variants.
+ * `round` is always the full-pill radius; `square` uses a per-size smaller
+ * corner. Used only when the `shape` prop is set on `Button`.
+ */
+const BUTTON_SHAPE_RADIUS: Record<ButtonSize, Record<ButtonShape, number>> = {
+  'extra-small': { round: cornerFull, square: 12 },
+  small: { round: cornerFull, square: 12 },
+  medium: { round: cornerFull, square: 16 },
+  large: { round: cornerFull, square: 28 },
+  'extra-large': { round: cornerFull, square: 28 },
+};
+
+const DEFAULT_SHAPE_RADIUS: Record<ButtonShape, number> = {
+  round: cornerFull,
+  square: 12,
+};
+
+export const getButtonShapeRadius = ({
+  size,
+  shape,
+}: {
+  size?: ButtonSize;
+  shape: ButtonShape;
+}): number =>
+  size ? BUTTON_SHAPE_RADIUS[size][shape] : DEFAULT_SHAPE_RADIUS[shape];
+
+/**
+ * Returns the margins applied to the button's icon (or loading indicator)
+ * depending on the button mode, density and the position of the icon relative
+ * to the label.
+ */
+export const getButtonIconStyle = ({
+  mode,
+  compact,
+  position,
+}: {
+  mode: ButtonMode;
+  compact?: boolean;
+  position: ButtonIconPosition;
+}): Pick<ViewStyle, 'marginLeft' | 'marginRight'> => {
+  const isTextMode = mode === 'text';
+
+  if (position === 'trailing') {
+    if (compact) {
+      return { marginLeft: 0, marginRight: isTextMode ? 6 : 8 };
+    }
+    return isTextMode
+      ? { marginLeft: -8, marginRight: 12 }
+      : { marginLeft: -16, marginRight: 16 };
+  }
+
+  if (compact) {
+    return { marginLeft: isTextMode ? 6 : 8, marginRight: 0 };
+  }
+  return isTextMode
+    ? { marginLeft: 12, marginRight: -8 }
+    : { marginLeft: 16, marginRight: -16 };
+};
+
 type BaseProps = {
   isMode: (mode: ButtonMode) => boolean;
   theme: InternalTheme;
   disabled?: boolean;
+  selected?: boolean;
 };
 
 const isDark = ({
@@ -43,6 +178,7 @@ const getButtonBackgroundColor = ({
   theme,
   disabled,
   customButtonColor,
+  selected,
 }: BaseProps & {
   customButtonColor?: string;
 }) => {
@@ -58,6 +194,12 @@ const getButtonBackgroundColor = ({
     return colors.onSurface;
   }
 
+  // Selected toggle (only outlined/text adopt a filled "tonal-selected" look;
+  // contained / contained-tonal / elevated already render filled).
+  if (selected && (isMode('outlined') || isMode('text'))) {
+    return colors.secondaryContainer;
+  }
+
   if (isMode('elevated')) {
     return colors.surfaceContainerLow;
   }
@@ -80,6 +222,7 @@ const getButtonTextColor = ({
   customTextColor,
   backgroundColor,
   dark,
+  selected,
 }: BaseProps & {
   customTextColor?: string;
   backgroundColor: string;
@@ -94,6 +237,11 @@ const getButtonTextColor = ({
     return theme.colors.onSurface;
   }
 
+  // Selected toggle for outlined/text mirrors the contained-tonal label color.
+  if (selected && (isMode('outlined') || isMode('text'))) {
+    return colors.onSecondaryContainer;
+  }
+
   if (typeof dark === 'boolean') {
     if (
       isMode('contained') ||
@@ -119,7 +267,12 @@ const getButtonTextColor = ({
   return colors.primary;
 };
 
-const getButtonBorderColor = ({ isMode, theme }: BaseProps) => {
+const getButtonBorderColor = ({ isMode, theme, selected }: BaseProps) => {
+  // A selected outlined toggle drops its outline (the filled background takes
+  // over as the visual affordance).
+  if (selected && isMode('outlined')) {
+    return 'transparent';
+  }
   if (isMode('outlined')) {
     return theme.colors.outlineVariant;
   }
@@ -127,7 +280,13 @@ const getButtonBorderColor = ({ isMode, theme }: BaseProps) => {
   return 'transparent';
 };
 
-const getButtonBorderWidth = ({ isMode }: Omit<BaseProps, 'disabled'>) => {
+const getButtonBorderWidth = ({
+  isMode,
+  selected,
+}: Omit<BaseProps, 'disabled' | 'theme'>) => {
+  if (selected && isMode('outlined')) {
+    return 0;
+  }
   if (isMode('outlined')) {
     return 1;
   }
@@ -142,6 +301,7 @@ export const getButtonColors = ({
   customTextColor,
   disabled,
   dark,
+  selected,
 }: {
   theme: InternalTheme;
   mode: ButtonMode;
@@ -149,6 +309,7 @@ export const getButtonColors = ({
   customTextColor?: string;
   disabled?: boolean;
   dark?: boolean;
+  selected?: boolean;
 }) => {
   const isMode = (modeToCompare: ButtonMode) => {
     return mode === modeToCompare;
@@ -159,6 +320,7 @@ export const getButtonColors = ({
     theme,
     disabled,
     customButtonColor,
+    selected,
   });
 
   const textColor = getButtonTextColor({
@@ -168,11 +330,12 @@ export const getButtonColors = ({
     customTextColor,
     backgroundColor,
     dark,
+    selected,
   });
 
-  const borderColor = getButtonBorderColor({ isMode, theme });
+  const borderColor = getButtonBorderColor({ isMode, theme, selected });
 
-  const borderWidth = getButtonBorderWidth({ isMode, theme });
+  const borderWidth = getButtonBorderWidth({ isMode, selected });
 
   const textOpacity = disabled ? stateOpacity.disabled : stateOpacity.enabled;
 
@@ -191,6 +354,33 @@ export const getButtonColors = ({
   };
 };
 
+/**
+ * Returns the color used for the button's ripple / state layer. Defaults to
+ * the label color at the pressed-state opacity (per Material Design 3), unless
+ * a custom ripple color is provided.
+ *
+ * When the label color is not a plain string (e.g. an Android Material You
+ * `PlatformColor`), `undefined` is returned so `TouchableRipple` falls back to
+ * its own default state-layer color.
+ */
+export const getButtonRippleColor = ({
+  textColor,
+  customRippleColor,
+}: {
+  textColor: ColorValue;
+  customRippleColor?: ColorValue;
+}): ColorValue | undefined => {
+  if (customRippleColor) {
+    return customRippleColor;
+  }
+
+  if (typeof textColor !== 'string') {
+    return undefined;
+  }
+
+  return color(textColor).alpha(stateOpacity.pressed).rgb().string();
+};
+
 type ViewStyleBorderRadiusStyles = Partial<
   Pick<
     ViewStyle,
diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx
index c1522e5bf5..cc81efb1da 100644
--- a/src/components/Card/Card.tsx
+++ b/src/components/Card/Card.tsx
@@ -127,8 +127,8 @@ export type Props = $Omit<React.ComponentProps<typeof Surface>, 'mode'> & {
  *     </Card.Content>
  *     <Card.Cover source={{ uri: 'https://picsum.photos/700' }} />
  *     <Card.Actions>
- *       <Button>Cancel</Button>
- *       <Button>Ok</Button>
+ *       <Button label="Cancel" />
+ *       <Button label="Ok" />
  *     </Card.Actions>
  *   </Card>
  * );
diff --git a/src/components/Card/CardActions.tsx b/src/components/Card/CardActions.tsx
index b34da0844b..e7ad471db2 100644
--- a/src/components/Card/CardActions.tsx
+++ b/src/components/Card/CardActions.tsx
@@ -26,8 +26,8 @@ export type Props = React.ComponentPropsWithRef<typeof View> & {
  * const MyComponent = () => (
  *   <Card>
  *     <Card.Actions>
- *       <Button>Cancel</Button>
- *       <Button>Ok</Button>
+ *       <Button label="Cancel" />
+ *       <Button label="Ok" />
  *     </Card.Actions>
  *   </Card>
  * );
diff --git a/src/components/DataTable/DataTablePagination.tsx b/src/components/DataTable/DataTablePagination.tsx
index 056bb432b9..2f799c71eb 100644
--- a/src/components/DataTable/DataTablePagination.tsx
+++ b/src/components/DataTable/DataTablePagination.tsx
@@ -182,11 +182,10 @@ const PaginationDropdown = ({
           onPress={() => toggleSelect(true)}
           style={styles.button}
           icon="menu-down"
-          contentStyle={styles.contentStyle}
+          iconPosition="trailing"
           theme={theme}
-        >
-          {`${numberOfItemsPerPage}`}
-        </Button>
+          label={`${numberOfItemsPerPage}`}
+        />
       }
     >
       {numberOfItemsPerPageList?.map((option) => (
@@ -360,9 +359,6 @@ const styles = StyleSheet.create({
   iconsContainer: {
     flexDirection: 'row',
   },
-  contentStyle: {
-    flexDirection: 'row-reverse',
-  },
 });
 
 export default DataTablePagination;
diff --git a/src/components/Dialog/Dialog.tsx b/src/components/Dialog/Dialog.tsx
index 717445aed7..e2f9ec2491 100644
--- a/src/components/Dialog/Dialog.tsx
+++ b/src/components/Dialog/Dialog.tsx
@@ -73,7 +73,7 @@ const DIALOG_ELEVATION: number = 24;
  *   return (
  *     <PaperProvider>
  *       <View>
- *         <Button onPress={showDialog}>Show Dialog</Button>
+ *         <Button onPress={showDialog} label="Show Dialog" />
  *         <Portal>
  *           <Dialog visible={visible} onDismiss={hideDialog}>
  *             <Dialog.Title>Alert</Dialog.Title>
@@ -81,7 +81,7 @@ const DIALOG_ELEVATION: number = 24;
  *               <Text variant="bodyMedium">This is simple dialog</Text>
  *             </Dialog.Content>
  *             <Dialog.Actions>
- *               <Button onPress={hideDialog}>Done</Button>
+ *               <Button onPress={hideDialog} label="Done" />
  *             </Dialog.Actions>
  *           </Dialog>
  *         </Portal>
diff --git a/src/components/Dialog/DialogActions.tsx b/src/components/Dialog/DialogActions.tsx
index 7b34739da5..b4f2dc922b 100644
--- a/src/components/Dialog/DialogActions.tsx
+++ b/src/components/Dialog/DialogActions.tsx
@@ -35,8 +35,8 @@ export type Props = React.ComponentPropsWithRef<typeof View> & {
  *     <Portal>
  *       <Dialog visible={visible} onDismiss={hideDialog}>
  *         <Dialog.Actions>
- *           <Button onPress={() => console.log('Cancel')}>Cancel</Button>
- *           <Button onPress={() => console.log('Ok')}>Ok</Button>
+ *           <Button onPress={() => console.log('Cancel')} label="Cancel" />
+ *           <Button onPress={() => console.log('Ok')} label="Ok" />
  *         </Dialog.Actions>
  *       </Dialog>
  *     </Portal>
diff --git a/src/components/Menu/Menu.tsx b/src/components/Menu/Menu.tsx
index 1c56b7b574..42576f386e 100644
--- a/src/components/Menu/Menu.tsx
+++ b/src/components/Menu/Menu.tsx
@@ -163,7 +163,7 @@ const isBrowser = () => Platform.OS === 'web' && 'document' in global;
  *         <Menu
  *           visible={visible}
  *           onDismiss={closeMenu}
- *           anchor={<Button onPress={openMenu}>Show menu</Button>}>
+ *           anchor={<Button onPress={openMenu} label="Show menu" />}>
  *           <Menu.Item onPress={() => {}} title="Item 1" />
  *           <Menu.Item onPress={() => {}} title="Item 2" />
  *           <Divider />
diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
index 040c3a5706..6ae59790eb 100644
--- a/src/components/Modal.tsx
+++ b/src/components/Modal.tsx
@@ -93,9 +93,7 @@ const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
  *           <Text>Example Modal.  Click outside this area to dismiss.</Text>
  *         </Modal>
  *       </Portal>
- *       <Button style={{ marginTop: 30 }} onPress={showModal}>
- *         Show
- *       </Button>
+ *       <Button style={{ marginTop: 30 }} onPress={showModal} label="Show" />
  *     </PaperProvider>
  *   );
  * };
diff --git a/src/components/Snackbar.tsx b/src/components/Snackbar.tsx
index f6eb590e84..30d553114c 100644
--- a/src/components/Snackbar.tsx
+++ b/src/components/Snackbar.tsx
@@ -113,7 +113,7 @@ const DURATION_LONG = 10000;
  *
  *   return (
  *     <View style={styles.container}>
- *       <Button onPress={onToggleSnackBar}>{visible ? 'Hide' : 'Show'}</Button>
+ *       <Button onPress={onToggleSnackBar} label={visible ? 'Hide' : 'Show'} />
  *       <Snackbar
  *         visible={visible}
  *         onDismiss={onDismissSnackBar}
@@ -330,10 +330,9 @@ const Snackbar = ({
                 compact={false}
                 mode="text"
                 theme={theme}
+                label={actionLabel}
                 {...actionProps}
-              >
-                {actionLabel}
-              </Button>
+              />
             ) : null}
             {isIconButton ? (
               <IconButton
diff --git a/src/components/__tests__/Button.test.tsx b/src/components/__tests__/Button.test.tsx
index 71107089e7..17c4fca13c 100644
--- a/src/components/__tests__/Button.test.tsx
+++ b/src/components/__tests__/Button.test.tsx
@@ -1,14 +1,20 @@
 import * as React from 'react';
-import { Animated, StyleSheet } from 'react-native';
+import { Animated, PlatformColor, StyleSheet } from 'react-native';
 
 import { act, fireEvent } from '@testing-library/react-native';
+import color from 'color';
 
 import { getTheme } from '../../core/theming';
 import { render } from '../../test-utils';
 import { pink500, white } from '../../theme/colors';
 import { tokens } from '../../theme/tokens';
 import Button from '../Button/Button';
-import { getButtonColors } from '../Button/utils';
+import {
+  getButtonColors,
+  getButtonRippleColor,
+  getButtonShapeRadius,
+  getButtonSizeStyle,
+} from '../Button/utils';
 
 const { stateOpacity } = tokens.md.ref;
 
@@ -25,23 +31,26 @@ const styles = StyleSheet.create({
   noRadius: {
     borderRadius: 0,
   },
+  overrideRadius: {
+    borderRadius: 4,
+  },
 });
 
 it('renders text button by default', () => {
-  const tree = render(<Button>Text Button</Button>).toJSON();
+  const tree = render(<Button label="Text Button" />).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
 it('renders text button with mode', () => {
-  const tree = render(<Button mode="text">Text Button</Button>).toJSON();
+  const tree = render(<Button mode="text" label="Text Button" />).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
 it('renders outlined button with mode', () => {
   const tree = render(
-    <Button mode="outlined">Outlined Button</Button>
+    <Button mode="outlined" label="Outlined Button" />
   ).toJSON();
 
   expect(tree).toMatchSnapshot();
@@ -49,43 +58,45 @@ it('renders outlined button with mode', () => {
 
 it('renders contained contained with mode', () => {
   const tree = render(
-    <Button mode="contained">Contained Button</Button>
+    <Button mode="contained" label="Contained Button" />
   ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
 it('renders button with icon', () => {
-  const tree = render(<Button icon="camera">Icon Button</Button>).toJSON();
+  const tree = render(<Button icon="camera" label="Icon Button" />).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
 it('renders button with icon in reverse order', () => {
   const tree = render(
-    <Button icon="chevron-right" contentStyle={styles.flexing}>
-      Right Icon
-    </Button>
+    <Button
+      icon="chevron-right"
+      contentStyle={styles.flexing}
+      label="Right Icon"
+    />
   ).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
 it('renders loading button', () => {
-  const tree = render(<Button loading>Loading Button</Button>).toJSON();
+  const tree = render(<Button loading label="Loading Button" />).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
 it('renders disabled button', () => {
-  const tree = render(<Button disabled>Disabled Button</Button>).toJSON();
+  const tree = render(<Button disabled label="Disabled Button" />).toJSON();
 
   expect(tree).toMatchSnapshot();
 });
 
 it('renders disabled button if there is no touch handler passed', () => {
   const { getByTestId } = render(
-    <Button testID="disabled-button">Disabled button</Button>
+    <Button testID="disabled-button" label="Disabled button" />
   );
 
   expect(getByTestId('disabled-button').props.accessibilityState).toMatchObject(
@@ -97,9 +108,11 @@ it('renders disabled button if there is no touch handler passed', () => {
 
 it('renders active button if only onLongPress handler is passed', () => {
   const { getByTestId } = render(
-    <Button onLongPress={() => {}} testID="active-button">
-      Active button
-    </Button>
+    <Button
+      onLongPress={() => {}}
+      testID="active-button"
+      label="Active button"
+    />
   );
 
   expect(getByTestId('active-button').props.accessibilityState).toMatchObject({
@@ -109,7 +122,7 @@ it('renders active button if only onLongPress handler is passed', () => {
 
 it('renders button with color', () => {
   const tree = render(
-    <Button textColor={pink500}>Custom Button</Button>
+    <Button textColor={pink500} label="Custom Button" />
   ).toJSON();
 
   expect(tree).toMatchSnapshot();
@@ -117,7 +130,7 @@ it('renders button with color', () => {
 
 it('renders button with button color', () => {
   const tree = render(
-    <Button buttonColor={pink500}>Custom Button</Button>
+    <Button buttonColor={pink500} label="Custom Button" />
   ).toJSON();
 
   expect(tree).toMatchSnapshot();
@@ -125,7 +138,7 @@ it('renders button with button color', () => {
 
 it('renders button with custom testID', () => {
   const tree = render(
-    <Button testID={'custom:testID'}>Button with custom testID</Button>
+    <Button testID={'custom:testID'} label="Button with custom testID" />
   ).toJSON();
 
   expect(tree).toMatchSnapshot();
@@ -133,9 +146,10 @@ it('renders button with custom testID', () => {
 
 it('renders button with an accessibility label', () => {
   const tree = render(
-    <Button accessibilityLabel={'label'}>
-      Button with accessibility label
-    </Button>
+    <Button
+      accessibilityLabel={'label'}
+      label="Button with accessibility label"
+    />
   ).toJSON();
 
   expect(tree).toMatchSnapshot();
@@ -143,7 +157,7 @@ it('renders button with an accessibility label', () => {
 
 it('renders button with an accessibility hint', () => {
   const tree = render(
-    <Button accessibilityHint={'hint'}>Button with accessibility hint</Button>
+    <Button accessibilityHint={'hint'} label="Button with accessibility hint" />
   ).toJSON();
 
   expect(tree).toMatchSnapshot();
@@ -151,9 +165,11 @@ it('renders button with an accessibility hint', () => {
 
 it('renders button with custom border radius', () => {
   const { getByTestId } = render(
-    <Button testID="custom-radius" style={styles.customRadius}>
-      Custom radius
-    </Button>
+    <Button
+      testID="custom-radius"
+      style={styles.customRadius}
+      label="Custom radius"
+    />
   );
 
   expect(getByTestId('custom-radius-container')).toHaveStyle(
@@ -168,9 +184,8 @@ it('renders outlined button with custom border radius', () => {
       mode={'outlined'}
       testID="custom-radius"
       style={styles.customRadius}
-    >
-      Custom radius
-    </Button>
+      label="Custom radius"
+    />
   );
 
   expect(getByTestId('custom-radius-container')).toHaveStyle(
@@ -186,9 +201,11 @@ it('renders outlined button with custom border radius', () => {
 
 it('renders button without border radius', () => {
   const { getByTestId } = render(
-    <Button testID="custom-radius" style={styles.noRadius}>
-      Custom radius
-    </Button>
+    <Button
+      testID="custom-radius"
+      style={styles.noRadius}
+      label="Custom radius"
+    />
   );
 
   expect(getByTestId('custom-radius-container')).toHaveStyle(styles.noRadius);
@@ -200,9 +217,7 @@ it('should execute onPressIn', () => {
   const onPress = jest.fn();
 
   const { getByTestId } = render(
-    <Button onPress={onPress} onPressIn={onPressInMock} testID="button">
-      {null}
-    </Button>
+    <Button onPress={onPress} onPressIn={onPressInMock} testID="button" />
   );
   fireEvent(getByTestId('button'), 'onPressIn');
   expect(onPressInMock).toHaveBeenCalledTimes(1);
@@ -213,20 +228,56 @@ it('should execute onPressOut', () => {
   const onPress = jest.fn();
 
   const { getByTestId } = render(
-    <Button onPress={onPress} onPressOut={onPressOutMock} testID="button">
-      {null}
-    </Button>
+    <Button onPress={onPress} onPressOut={onPressOutMock} testID="button" />
   );
   fireEvent(getByTestId('button'), 'onPressOut');
   expect(onPressOutMock).toHaveBeenCalledTimes(1);
 });
 
+describe('label prop', () => {
+  it('renders the label text', () => {
+    const { getByTestId } = render(<Button testID="button" label="My label" />);
+
+    expect(getByTestId('button-text')).toHaveTextContent('My label');
+  });
+
+  it('takes precedence over children', () => {
+    const { getByTestId } = render(
+      <Button testID="button" label="From label">
+        From children
+      </Button>
+    );
+
+    expect(getByTestId('button-text')).toHaveTextContent('From label');
+  });
+});
+
+describe('deprecated children prop', () => {
+  it('still renders the children as the label', () => {
+    const warn = jest.spyOn(console, 'warn').mockImplementation(() => {});
+    const { getByTestId } = render(
+      <Button testID="button">Legacy label</Button>
+    );
+
+    expect(getByTestId('button-text')).toHaveTextContent('Legacy label');
+    warn.mockRestore();
+  });
+
+  it('warns about the deprecation', () => {
+    const warn = jest.spyOn(console, 'warn').mockImplementation(() => {});
+    render(<Button>Legacy label</Button>);
+
+    expect(warn).toHaveBeenCalledWith(
+      expect.stringContaining('`children` prop is deprecated')
+    );
+    warn.mockRestore();
+  });
+});
+
 describe('button text styles', () => {
   it('applies uppercase styles if uppercase prop is truthy', () => {
     const { getByTestId } = render(
-      <Button testID="button" uppercase>
-        Test
-      </Button>
+      <Button testID="button" uppercase label="Test" />
     );
 
     expect(getByTestId('button-text')).toHaveStyle({
@@ -236,9 +287,7 @@ describe('button text styles', () => {
 
   it('does not apply uppercase styles if uppercase prop is falsy', () => {
     const { getByTestId } = render(
-      <Button testID="button" uppercase={false}>
-        Test
-      </Button>
+      <Button testID="button" uppercase={false} label="Test" />
     );
 
     expect(getByTestId('button-text')).not.toHaveStyle({
@@ -250,9 +299,13 @@ describe('button text styles', () => {
 describe('button icon styles', () => {
   it('should return correct icon styles for compact text button', () => {
     const { getByTestId } = render(
-      <Button mode={'text'} compact icon="camera" testID="compact-button">
-        Compact text button
-      </Button>
+      <Button
+        mode={'text'}
+        compact
+        icon="camera"
+        testID="compact-button"
+        label="Compact text button"
+      />
     );
     expect(getByTestId('compact-button-icon-container')).toHaveStyle({
       marginLeft: 6,
@@ -264,9 +317,13 @@ describe('button icon styles', () => {
     (mode) =>
       it(`should return correct icon styles for compact ${mode} button`, () => {
         const { getByTestId } = render(
-          <Button mode={mode} compact icon="camera" testID="compact-button">
-            Compact {mode} button
-          </Button>
+          <Button
+            mode={mode}
+            compact
+            icon="camera"
+            testID="compact-button"
+            label={`Compact ${mode} button`}
+          />
         );
         expect(getByTestId('compact-button-icon-container')).toHaveStyle({
           marginLeft: 8,
@@ -277,9 +334,12 @@ describe('button icon styles', () => {
 
   it('should return correct icon styles for text button', () => {
     const { getByTestId } = render(
-      <Button mode={'text'} icon="camera" testID="compact-button">
-        text button
-      </Button>
+      <Button
+        mode={'text'}
+        icon="camera"
+        testID="compact-button"
+        label="text button"
+      />
     );
     expect(getByTestId('compact-button-icon-container')).toHaveStyle({
       marginLeft: 12,
@@ -291,9 +351,12 @@ describe('button icon styles', () => {
     (mode) =>
       it(`should return correct icon styles for compact ${mode} button`, () => {
         const { getByTestId } = render(
-          <Button mode={mode} icon="camera" testID="compact-button">
-            {mode} button
-          </Button>
+          <Button
+            mode={mode}
+            icon="camera"
+            testID="compact-button"
+            label={`${mode} button`}
+          />
         );
         expect(getByTestId('compact-button-icon-container')).toHaveStyle({
           marginLeft: 16,
@@ -303,6 +366,58 @@ describe('button icon styles', () => {
   );
 });
 
+describe('icon position', () => {
+  it('places the icon before the label by default', () => {
+    const { getByTestId } = render(
+      <Button testID="button" mode="outlined" icon="camera" label="Press me" />
+    );
+
+    expect(getByTestId('button-icon-container')).toHaveStyle({
+      marginLeft: 16,
+      marginRight: -16,
+    });
+  });
+
+  it('places the icon after the label when iconPosition is "trailing"', () => {
+    const { getByTestId } = render(
+      <Button
+        testID="button"
+        mode="outlined"
+        icon="chevron-right"
+        iconPosition="trailing"
+        label="Next"
+      />
+    );
+
+    expect(getByTestId('button-icon-container')).toHaveStyle({
+      marginLeft: -16,
+      marginRight: 16,
+    });
+  });
+
+  it('still flips the icon via the deprecated contentStyle row-reverse and warns', () => {
+    const warn = jest.spyOn(console, 'warn').mockImplementation(() => {});
+    const { getByTestId } = render(
+      <Button
+        testID="button"
+        mode="outlined"
+        icon="chevron-right"
+        contentStyle={styles.flexing}
+        label="Next"
+      />
+    );
+
+    expect(getByTestId('button-icon-container')).toHaveStyle({
+      marginLeft: -16,
+      marginRight: 16,
+    });
+    expect(warn).toHaveBeenCalledWith(
+      expect.stringContaining('`contentStyle`')
+    );
+    warn.mockRestore();
+  });
+});
+
 describe('getButtonColors - background color', () => {
   const customButtonColor = '#111111';
 
@@ -698,6 +813,198 @@ describe('getButtonColors - border width', () => {
   );
 });
 
+describe('getButtonRippleColor', () => {
+  it('returns the custom ripple color when one is provided', () => {
+    expect(
+      getButtonRippleColor({ textColor: '#123456', customRippleColor: 'red' })
+    ).toBe('red');
+  });
+
+  it('defaults to the label color at the pressed-state opacity', () => {
+    expect(getButtonRippleColor({ textColor: '#123456' })).toBe(
+      color('#123456').alpha(stateOpacity.pressed).rgb().string()
+    );
+  });
+
+  it('returns undefined when the label color is not a plain string', () => {
+    expect(
+      getButtonRippleColor({ textColor: PlatformColor('?attr/colorPrimary') })
+    ).toBeUndefined();
+  });
+});
+
+describe('getButtonSizeStyle', () => {
+  it.each([
+    ['extra-small', 32, 12, 16, 4, 'labelLarge'],
+    ['small', 40, 16, 20, 8, 'labelLarge'],
+    ['medium', 56, 24, 24, 8, 'titleMedium'],
+    ['large', 96, 48, 32, 12, 'headlineSmall'],
+    ['extra-large', 136, 64, 40, 16, 'headlineLarge'],
+  ] as const)(
+    'returns expected metrics for %s',
+    (size, minHeight, paddingHorizontal, iconSize, iconGap, labelVariant) => {
+      expect(getButtonSizeStyle(size)).toEqual({
+        minHeight,
+        paddingHorizontal,
+        iconSize,
+        iconGap,
+        labelVariant,
+      });
+    }
+  );
+});
+
+describe('size prop', () => {
+  it('renders a button with per-size metrics', () => {
+    const tree = render(
+      <Button size="medium" icon="camera" label="Medium" />
+    ).toJSON();
+
+    expect(tree).toMatchSnapshot();
+  });
+
+  (
+    [
+      ['extra-small', 14],
+      ['small', 14],
+      ['medium', 16],
+      ['large', 24],
+      ['extra-large', 32],
+    ] as const
+  ).forEach(([size, expectedFontSize]) =>
+    it(`applies the ${size} typescale to the label`, () => {
+      const { getByTestId } = render(
+        <Button size={size} testID="button" label="X" />
+      );
+      expect(getByTestId('button-text')).toHaveStyle({
+        fontSize: expectedFontSize,
+      });
+    })
+  );
+});
+
+describe('getButtonShapeRadius', () => {
+  it.each([
+    ['extra-small', 9999, 12],
+    ['small', 9999, 12],
+    ['medium', 9999, 16],
+    ['large', 9999, 28],
+    ['extra-large', 9999, 28],
+  ] as const)('returns expected radii for size=%s', (size, round, square) => {
+    expect(getButtonShapeRadius({ size, shape: 'round' })).toBe(round);
+    expect(getButtonShapeRadius({ size, shape: 'square' })).toBe(square);
+  });
+
+  it('falls back to default radii when size is omitted', () => {
+    expect(getButtonShapeRadius({ shape: 'round' })).toBe(9999);
+    expect(getButtonShapeRadius({ shape: 'square' })).toBe(12);
+  });
+});
+
+describe('shape prop', () => {
+  it('applies the round (full-pill) radius', () => {
+    const { getByTestId } = render(
+      <Button testID="button" shape="round" label="X" />
+    );
+    expect(getByTestId('button-container')).toHaveStyle({ borderRadius: 9999 });
+  });
+
+  it('applies the square radius (default size)', () => {
+    const { getByTestId } = render(
+      <Button testID="button" shape="square" label="X" />
+    );
+    expect(getByTestId('button-container')).toHaveStyle({ borderRadius: 12 });
+  });
+
+  it('uses the per-size square radius when both size and shape are set', () => {
+    const { getByTestId } = render(
+      <Button testID="button" size="large" shape="square" label="X" />
+    );
+    expect(getByTestId('button-container')).toHaveStyle({ borderRadius: 28 });
+  });
+
+  it('lets an explicit borderRadius in `style` override the shape', () => {
+    const { getByTestId } = render(
+      <Button
+        testID="button"
+        shape="round"
+        style={styles.overrideRadius}
+        label="X"
+      />
+    );
+    expect(getByTestId('button-container')).toHaveStyle({ borderRadius: 4 });
+  });
+});
+
+describe('selected prop', () => {
+  it('sets accessibilityState.selected', () => {
+    const { getByTestId } = render(
+      <Button testID="button" selected onPress={() => {}} label="X" />
+    );
+
+    expect(getByTestId('button').props.accessibilityState).toMatchObject({
+      selected: true,
+    });
+  });
+
+  it('flips a round button into the square radius when selected', () => {
+    const { getByTestId } = render(
+      <Button testID="button" size="large" shape="round" selected label="X" />
+    );
+
+    expect(getByTestId('button-container')).toHaveStyle({ borderRadius: 28 });
+  });
+
+  it('flips a square button into the round radius when selected', () => {
+    const { getByTestId } = render(
+      <Button testID="button" shape="square" selected label="X" />
+    );
+
+    expect(getByTestId('button-container')).toHaveStyle({ borderRadius: 9999 });
+  });
+
+  it('gives an outlined button the tonal-selected appearance', () => {
+    expect(
+      getButtonColors({
+        theme: getTheme(),
+        mode: 'outlined',
+        selected: true,
+      })
+    ).toMatchObject({
+      backgroundColor: getTheme().colors.secondaryContainer,
+      textColor: getTheme().colors.onSecondaryContainer,
+      borderColor: 'transparent',
+      borderWidth: 0,
+    });
+  });
+
+  it('gives a text-mode button the tonal-selected appearance', () => {
+    expect(
+      getButtonColors({
+        theme: getTheme(),
+        mode: 'text',
+        selected: true,
+      })
+    ).toMatchObject({
+      backgroundColor: getTheme().colors.secondaryContainer,
+      textColor: getTheme().colors.onSecondaryContainer,
+    });
+  });
+
+  it('does not change contained colors when selected', () => {
+    expect(
+      getButtonColors({
+        theme: getTheme(),
+        mode: 'contained',
+        selected: true,
+      })
+    ).toMatchObject({
+      backgroundColor: getTheme().colors.primary,
+      textColor: getTheme().colors.onPrimary,
+    });
+  });
+});
+
 it('animated value changes correctly', () => {
   const value = new Animated.Value(1);
   const { getByTestId } = render(
@@ -706,9 +1013,8 @@ it('animated value changes correctly', () => {
       compact
       icon="camera"
       style={[{ transform: [{ scale: value }] }]}
-    >
-      Compact button
-    </Button>
+      label="Compact button"
+    />
   );
   expect(getByTestId('button-container-outer-layer')).toHaveStyle({
     transform: [{ scale: 1 }],
diff --git a/src/components/__tests__/Card/Card.test.tsx b/src/components/__tests__/Card/Card.test.tsx
index b11e006445..95cebf98ec 100644
--- a/src/components/__tests__/Card/Card.test.tsx
+++ b/src/components/__tests__/Card/Card.test.tsx
@@ -132,7 +132,7 @@ describe('CardActions', () => {
     const { getByTestId } = render(
       <Card>
         <Card.Actions testID="card-actions">
-          <Button mode="contained">Agree</Button>
+          <Button mode="contained" label="Agree" />
         </Card.Actions>
       </Card>
     );
@@ -150,9 +150,8 @@ describe('CardActions', () => {
             testID="card-actions-button"
             mode="contained"
             style={styles.customBorderRadius}
-          >
-            Agree
-          </Button>
+            label="Agree"
+          />
         </Card.Actions>
       </Card>
     );
diff --git a/src/components/__tests__/Dialog.test.tsx b/src/components/__tests__/Dialog.test.tsx
index 742f44b941..47a6409c58 100644
--- a/src/components/__tests__/Dialog.test.tsx
+++ b/src/components/__tests__/Dialog.test.tsx
@@ -110,8 +110,8 @@ describe('DialogActions', () => {
   it('should render passed children', () => {
     const { getByTestId } = render(
       <Dialog.Actions>
-        <Button testID="button-cancel">Cancel</Button>
-        <Button testID="button-ok">Ok</Button>
+        <Button testID="button-cancel" label="Cancel" />
+        <Button testID="button-ok" label="Ok" />
       </Dialog.Actions>
     );
 
@@ -122,8 +122,8 @@ describe('DialogActions', () => {
   it('should apply default styles', () => {
     const { getByTestId } = render(
       <Dialog.Actions testID="dialog-actions">
-        <Button>Cancel</Button>
-        <Button>Ok</Button>
+        <Button label="Cancel" />
+        <Button label="Ok" />
       </Dialog.Actions>
     );
 
@@ -141,8 +141,8 @@ describe('DialogActions', () => {
   it('should apply custom styles', () => {
     const { getByTestId } = render(
       <Dialog.Actions testID="dialog-actions">
-        <Button style={styles.spacing}>Cancel</Button>
-        <Button style={styles.noSpacing}>Ok</Button>
+        <Button style={styles.spacing} label="Cancel" />
+        <Button style={styles.noSpacing} label="Ok" />
       </Dialog.Actions>
     );
 
diff --git a/src/components/__tests__/Menu.test.tsx b/src/components/__tests__/Menu.test.tsx
index 5737f4d313..e34f9af566 100644
--- a/src/components/__tests__/Menu.test.tsx
+++ b/src/components/__tests__/Menu.test.tsx
@@ -23,7 +23,7 @@ it('renders visible menu', () => {
       <Menu
         visible
         onDismiss={jest.fn()}
-        anchor={<Button mode="outlined">Open menu</Button>}
+        anchor={<Button mode="outlined" label="Open menu" />}
       >
         <Menu.Item onPress={jest.fn()} title="Undo" />
         <Menu.Item onPress={jest.fn()} title="Redo" />
@@ -40,7 +40,7 @@ it('renders not visible menu', () => {
       <Menu
         visible={false}
         onDismiss={jest.fn()}
-        anchor={<Button mode="outlined">Open menu</Button>}
+        anchor={<Button mode="outlined" label="Open menu" />}
       >
         <Menu.Item onPress={jest.fn()} title="Undo" />
         <Menu.Item onPress={jest.fn()} title="Redo" />
@@ -57,7 +57,7 @@ it('renders menu with content styles', () => {
       <Menu
         visible
         onDismiss={jest.fn()}
-        anchor={<Button mode="outlined">Open menu</Button>}
+        anchor={<Button mode="outlined" label="Open menu" />}
         contentStyle={styles.contentStyle}
       >
         <Menu.Item onPress={jest.fn()} title="Undo" />
@@ -78,7 +78,7 @@ it('renders menu with content styles', () => {
         <Menu
           visible
           onDismiss={jest.fn()}
-          anchor={<Button mode="outlined">Open menu</Button>}
+          anchor={<Button mode="outlined" label="Open menu" />}
           elevation={elevation}
         >
           <Menu.Item onPress={jest.fn()} title="Undo" />
@@ -110,11 +110,7 @@ it('uses the default anchorPosition of top', async () => {
         <Menu
           visible={visible}
           onDismiss={jest.fn()}
-          anchor={
-            <Button mode="outlined" testID="anchor">
-              Open menu
-            </Button>
-          }
+          anchor={<Button mode="outlined" testID="anchor" label="Open menu" />}
           contentStyle={styles.contentStyle}
         >
           <Menu.Item onPress={jest.fn()} title="Undo" />
@@ -166,11 +162,7 @@ it('respects anchorPosition bottom', async () => {
         <Menu
           visible={visible}
           onDismiss={jest.fn()}
-          anchor={
-            <Button mode="outlined" testID="anchor">
-              Open menu
-            </Button>
-          }
+          anchor={<Button mode="outlined" testID="anchor" label="Open menu" />}
           anchorPosition="bottom"
           contentStyle={styles.contentStyle}
         >
@@ -209,7 +201,7 @@ it('animated value changes correctly', () => {
       <Menu
         visible
         onDismiss={jest.fn()}
-        anchor={<Button mode="outlined">Open menu</Button>}
+        anchor={<Button mode="outlined" label="Open menu" />}
         testID="menu"
         contentStyle={[{ transform: [{ scale: value }] }]}
       >
@@ -241,7 +233,7 @@ it('renders menu with mode "elevated"', () => {
       <Menu
         visible
         onDismiss={jest.fn()}
-        anchor={<Button mode="outlined">Open menu</Button>}
+        anchor={<Button mode="outlined" label="Open menu" />}
         mode="elevated"
       >
         <Menu.Item onPress={jest.fn()} title="Undo" />
@@ -265,7 +257,7 @@ it('renders menu with mode "flat"', () => {
       <Menu
         visible
         onDismiss={jest.fn()}
-        anchor={<Button mode="outlined">Open menu</Button>}
+        anchor={<Button mode="outlined" label="Open menu" />}
         mode="flat"
       >
         <Menu.Item onPress={jest.fn()} title="Undo" />
diff --git a/src/components/__tests__/__snapshots__/Banner.test.tsx.snap b/src/components/__tests__/__snapshots__/Banner.test.tsx.snap
index 6be6a1afa3..bf374566f1 100644
--- a/src/components/__tests__/__snapshots__/Banner.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/Banner.test.tsx.snap
@@ -208,6 +208,7 @@ exports[`render visible banner, with custom theme 1`] = `
                         "flexDirection": "row",
                         "justifyContent": "center",
                       },
+                      false,
                       {
                         "opacity": 1,
                       },
@@ -641,6 +642,7 @@ exports[`renders visible banner, with action buttons and with image 1`] = `
                         "flexDirection": "row",
                         "justifyContent": "center",
                       },
+                      false,
                       {
                         "opacity": 1,
                       },
@@ -917,6 +919,7 @@ exports[`renders visible banner, with action buttons and without image 1`] = `
                         "flexDirection": "row",
                         "justifyContent": "center",
                       },
+                      false,
                       {
                         "opacity": 1,
                       },
@@ -1069,6 +1072,7 @@ exports[`renders visible banner, with action buttons and without image 1`] = `
                         "flexDirection": "row",
                         "justifyContent": "center",
                       },
+                      false,
                       {
                         "opacity": 1,
                       },
diff --git a/src/components/__tests__/__snapshots__/Button.test.tsx.snap b/src/components/__tests__/__snapshots__/Button.test.tsx.snap
index 6c34864a74..0d9df50ee9 100644
--- a/src/components/__tests__/__snapshots__/Button.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/Button.test.tsx.snap
@@ -92,6 +92,7 @@ exports[`renders button with an accessibility hint 1`] = `
               "flexDirection": "row",
               "justifyContent": "center",
             },
+            false,
             {
               "opacity": 1,
             },
@@ -245,6 +246,7 @@ exports[`renders button with an accessibility label 1`] = `
               "flexDirection": "row",
               "justifyContent": "center",
             },
+            false,
             {
               "opacity": 1,
             },
@@ -397,6 +399,7 @@ exports[`renders button with button color 1`] = `
               "flexDirection": "row",
               "justifyContent": "center",
             },
+            false,
             {
               "opacity": 1,
             },
@@ -549,6 +552,7 @@ exports[`renders button with color 1`] = `
               "flexDirection": "row",
               "justifyContent": "center",
             },
+            false,
             {
               "opacity": 1,
             },
@@ -701,6 +705,7 @@ exports[`renders button with custom testID 1`] = `
               "flexDirection": "row",
               "justifyContent": "center",
             },
+            false,
             {
               "opacity": 1,
             },
@@ -853,6 +858,7 @@ exports[`renders button with icon 1`] = `
               "flexDirection": "row",
               "justifyContent": "center",
             },
+            false,
             {
               "opacity": 1,
             },
@@ -862,20 +868,10 @@ exports[`renders button with icon 1`] = `
       >
         <View
           style={
-            [
-              {
-                "marginLeft": 12,
-                "marginRight": -4,
-              },
-              {
-                "marginLeft": 16,
-                "marginRight": -16,
-              },
-              {
-                "marginLeft": 12,
-                "marginRight": -8,
-              },
-            ]
+            {
+              "marginLeft": 12,
+              "marginRight": -8,
+            }
           }
           testID="button-icon-container"
         >
@@ -1054,6 +1050,9 @@ exports[`renders button with icon in reverse order 1`] = `
               "flexDirection": "row",
               "justifyContent": "center",
             },
+            {
+              "flexDirection": "row-reverse",
+            },
             {
               "opacity": 1,
             },
@@ -1065,20 +1064,10 @@ exports[`renders button with icon in reverse order 1`] = `
       >
         <View
           style={
-            [
-              {
-                "marginLeft": -4,
-                "marginRight": 12,
-              },
-              {
-                "marginLeft": -16,
-                "marginRight": 16,
-              },
-              {
-                "marginLeft": -8,
-                "marginRight": 12,
-              },
-            ]
+            {
+              "marginLeft": -8,
+              "marginRight": 12,
+            }
           }
           testID="button-icon-container"
         >
@@ -1257,6 +1246,7 @@ exports[`renders contained contained with mode 1`] = `
               "flexDirection": "row",
               "justifyContent": "center",
             },
+            false,
             {
               "opacity": 1,
             },
@@ -1410,6 +1400,7 @@ exports[`renders disabled button 1`] = `
               "flexDirection": "row",
               "justifyContent": "center",
             },
+            false,
             {
               "opacity": 0.38,
             },
@@ -1562,6 +1553,7 @@ exports[`renders loading button 1`] = `
               "flexDirection": "row",
               "justifyContent": "center",
             },
+            false,
             {
               "opacity": 1,
             },
@@ -1583,20 +1575,10 @@ exports[`renders loading button 1`] = `
                 "alignItems": "center",
                 "justifyContent": "center",
               },
-              [
-                {
-                  "marginLeft": 12,
-                  "marginRight": -4,
-                },
-                {
-                  "marginLeft": 16,
-                  "marginRight": -16,
-                },
-                {
-                  "marginLeft": 12,
-                  "marginRight": -8,
-                },
-              ],
+              {
+                "marginLeft": 12,
+                "marginRight": -8,
+              },
             ]
           }
         >
@@ -1922,6 +1904,7 @@ exports[`renders outlined button with mode 1`] = `
               "flexDirection": "row",
               "justifyContent": "center",
             },
+            false,
             {
               "opacity": 1,
             },
@@ -2075,6 +2058,7 @@ exports[`renders text button by default 1`] = `
               "flexDirection": "row",
               "justifyContent": "center",
             },
+            false,
             {
               "opacity": 1,
             },
@@ -2227,6 +2211,7 @@ exports[`renders text button with mode 1`] = `
               "flexDirection": "row",
               "justifyContent": "center",
             },
+            false,
             {
               "opacity": 1,
             },
@@ -2287,3 +2272,195 @@ exports[`renders text button with mode 1`] = `
   </View>
 </View>
 `;
+
+exports[`size prop renders a button with per-size metrics 1`] = `
+<View
+  collapsable={false}
+  style={
+    {
+      "backgroundColor": "transparent",
+      "borderRadius": 20,
+      "shadowColor": "#000",
+      "shadowOffset": {
+        "height": 0,
+        "width": 0,
+      },
+      "shadowOpacity": 0,
+      "shadowRadius": 0,
+    }
+  }
+  testID="button-container-outer-layer"
+>
+  <View
+    collapsable={false}
+    style={
+      {
+        "backgroundColor": "transparent",
+        "borderColor": "transparent",
+        "borderRadius": 20,
+        "borderStyle": "solid",
+        "borderWidth": 0,
+        "flex": undefined,
+        "minWidth": 64,
+        "shadowColor": "#000",
+        "shadowOffset": {
+          "height": 0,
+          "width": 0,
+        },
+        "shadowOpacity": 0,
+        "shadowRadius": 0,
+      }
+    }
+    testID="button-container"
+  >
+    <View
+      accessibilityRole="button"
+      accessibilityState={
+        {
+          "busy": undefined,
+          "checked": undefined,
+          "disabled": true,
+          "expanded": undefined,
+          "selected": undefined,
+        }
+      }
+      accessibilityValue={
+        {
+          "max": undefined,
+          "min": undefined,
+          "now": undefined,
+          "text": undefined,
+        }
+      }
+      accessible={true}
+      collapsable={false}
+      focusable={true}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onResponderGrant={[Function]}
+      onResponderMove={[Function]}
+      onResponderRelease={[Function]}
+      onResponderTerminate={[Function]}
+      onResponderTerminationRequest={[Function]}
+      onStartShouldSetResponder={[Function]}
+      style={
+        [
+          {
+            "overflow": "hidden",
+          },
+          {
+            "borderRadius": 20,
+          },
+        ]
+      }
+      testID="button"
+    >
+      <View
+        style={
+          [
+            {
+              "alignItems": "center",
+              "flexDirection": "row",
+              "justifyContent": "center",
+            },
+            false,
+            {
+              "gap": 8,
+              "minHeight": 56,
+              "paddingHorizontal": 24,
+            },
+            {
+              "opacity": 1,
+            },
+            undefined,
+          ]
+        }
+      >
+        <View
+          testID="button-icon-container"
+        >
+          <Text
+            accessibilityElementsHidden={true}
+            importantForAccessibility="no-hide-descendants"
+            pointerEvents="none"
+            selectable={false}
+            style={
+              [
+                {
+                  "color": "rgba(103, 80, 164, 1)",
+                  "fontSize": 24,
+                },
+                [
+                  {
+                    "lineHeight": 24,
+                    "transform": [
+                      {
+                        "scaleX": 1,
+                      },
+                    ],
+                  },
+                  {
+                    "backgroundColor": "transparent",
+                  },
+                ],
+              ]
+            }
+          >
+            camera
+          </Text>
+        </View>
+        <Text
+          numberOfLines={1}
+          selectable={false}
+          style={
+            [
+              {
+                "textAlign": "left",
+              },
+              {
+                "color": "rgba(29, 27, 32, 1)",
+                "writingDirection": "ltr",
+              },
+              [
+                {
+                  "fontFamily": "System",
+                  "fontSize": 16,
+                  "fontWeight": "500",
+                  "letterSpacing": 0.15,
+                  "lineHeight": 24,
+                },
+                [
+                  {
+                    "marginHorizontal": 16,
+                    "marginVertical": 9,
+                    "textAlign": "center",
+                  },
+                  {
+                    "marginHorizontal": 0,
+                    "marginVertical": 0,
+                  },
+                  false,
+                  false,
+                  {
+                    "color": "rgba(103, 80, 164, 1)",
+                    "fontFamily": "System",
+                    "fontSize": 16,
+                    "fontWeight": "500",
+                    "letterSpacing": 0.15,
+                    "lineHeight": 24,
+                  },
+                  undefined,
+                ],
+              ],
+            ]
+          }
+          testID="button-text"
+        >
+          Medium
+        </Text>
+      </View>
+    </View>
+  </View>
+</View>
+`;
diff --git a/src/components/__tests__/__snapshots__/DataTable.test.tsx.snap b/src/components/__tests__/__snapshots__/DataTable.test.tsx.snap
index f6071c245c..d8f59f98ff 100644
--- a/src/components/__tests__/__snapshots__/DataTable.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/DataTable.test.tsx.snap
@@ -1788,27 +1788,21 @@ exports[`DataTable.Pagination renders data table pagination with options select
                     "justifyContent": "center",
                   },
                   {
-                    "opacity": 1,
+                    "flexDirection": "row-reverse",
                   },
                   {
-                    "flexDirection": "row-reverse",
+                    "opacity": 1,
                   },
+                  undefined,
                 ]
               }
             >
               <View
                 style={
-                  [
-                    {
-                      "marginLeft": -4,
-                      "marginRight": 12,
-                    },
-                    {
-                      "marginLeft": -16,
-                      "marginRight": 16,
-                    },
-                    false,
-                  ]
+                  {
+                    "marginLeft": -16,
+                    "marginRight": 16,
+                  }
                 }
                 testID="button-icon-container"
               >
diff --git a/src/components/__tests__/__snapshots__/Menu.test.tsx.snap b/src/components/__tests__/__snapshots__/Menu.test.tsx.snap
index 9d426f228c..c2f20f3b8b 100644
--- a/src/components/__tests__/__snapshots__/Menu.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/Menu.test.tsx.snap
@@ -104,6 +104,7 @@ exports[`renders menu with content styles 1`] = `
                     "flexDirection": "row",
                     "justifyContent": "center",
                   },
+                  false,
                   {
                     "opacity": 1,
                   },
@@ -667,6 +668,7 @@ exports[`renders not visible menu 1`] = `
                   "flexDirection": "row",
                   "justifyContent": "center",
                 },
+                false,
                 {
                   "opacity": 1,
                 },
@@ -835,6 +837,7 @@ exports[`renders visible menu 1`] = `
                     "flexDirection": "row",
                     "justifyContent": "center",
                   },
+                  false,
                   {
                     "opacity": 1,
                   },
diff --git a/src/components/__tests__/__snapshots__/Snackbar.test.tsx.snap b/src/components/__tests__/__snapshots__/Snackbar.test.tsx.snap
index ce2a9c8637..b86a140c5a 100644
--- a/src/components/__tests__/__snapshots__/Snackbar.test.tsx.snap
+++ b/src/components/__tests__/__snapshots__/Snackbar.test.tsx.snap
@@ -410,6 +410,7 @@ exports[`renders snackbar with action button 1`] = `
                       "flexDirection": "row",
                       "justifyContent": "center",
                     },
+                    false,
                     {
                       "opacity": 1,
                     },