feat: modernize Button to MD3 Expressive

docs/6.x/docs/guides/migration.md

@@ -279,3 +279,129 @@ const theme = {
   style={{ fontSize: 16, color: '#1C1B1F' }}
 />
 ```
+
+### Button
+
+`Button` is modernized to Material Design 3 Expressive. The button modes were
+renamed, the default mode changed, and a size and shape scale were added.
+
+#### Mode
+
+- **`mode="contained"`** → **`mode="filled"`**
+- **`mode="contained-tonal"`** → **`mode="tonal"`**
+
+```tsx
+// Before (v5)
+<Button mode="contained">Save</Button>
+<Button mode="contained-tonal">Save</Button>
+
+// After (v6)
+<Button mode="filled">Save</Button>
+<Button mode="tonal">Save</Button>
+```
+
+#### Default mode
+
+The default is now **`filled`**, not `text`, matching the MD3 emphasis
+hierarchy. Pass `mode="text"` to keep the old look.
+
+```tsx
+// Before (v5) - rendered as a text button
+<Button>Cancel</Button>
+
+// After (v6) - same appearance
+<Button mode="text">Cancel</Button>
+```
+
+#### Size and shape
+
+New `size` and `shape` props. `size` defaults to `small`, which matches the
+only size 5.x had, so existing buttons keep their metrics.
+
+```tsx
+<Button size="extra-small">XS</Button>
+<Button size="large" shape="square">Large, square</Button>
+```
+
+The container now also morphs its corner while pressed. Pass
+`animateShape={false}` to opt out.
+
+#### Toggle
+
+`selected` turns a button into a toggle. Leave it **undefined** to make it
+a plain button
+
+```tsx
+<Button mode="filled" selected={isOn} onPress={toggle}>
+  Bold
+</Button>
+```
+
+#### Removed props
+
+- **`uppercase`** → `labelStyle={{ textTransform: 'uppercase' }}`.
+- **`compact`** → `size="extra-small"`.
+- **`contentStyle={{ flexDirection: 'row-reverse' }}`** → `iconPosition="trailing"`.
+- **`elevation`** → elevation follows `mode="elevated"`.
+
+```tsx
+// Before (v5)
+<Button uppercase compact contentStyle={{ flexDirection: 'row-reverse' }} icon="chevron-right">
+  Next
+</Button>
+
+// After (v6)
+<Button
+  size="extra-small"
+  iconPosition="trailing"
+  icon="chevron-right"
+  labelStyle={{ textTransform: 'uppercase' }}
+>
+  Next
+</Button>
+```
+
+#### Style
+
+`Button` renders on `Surface`, so its `style` follows the same rules:
+
+- **Border radius** is no longer set through `style`. Use `shape`, or override
+  the corner token that the size maps to. `round` is the full pill; `square`
+  reads `corner.medium` at `extra-small` and `small`; `corner.large` at
+  `medium`; and `corner.extraLarge` at `large` and `extra-large`.
+- **Background color** is no longer set through `style`. Use `buttonColor`.
+- **Animated styles** must come from Reanimated. A React Native
+  `Animated.Value` in `style` is not applied.
+
+```tsx
+// Before (v5)
+<Button style={{ borderRadius: 8, backgroundColor: 'red' }}>
+  Press me
+</Button>
+
+// After (v6)
+<Button
+  shape="square"
+  theme={{ shapes: { corner: { medium: 8 } } }}
+  buttonColor="red"
+>
+  Press me
+</Button>
+```
+
+#### Appearance changes
+
+These need no code change, but the rendering differs:
+
+- The `outlined` label and icon use **`onSurfaceVariant`** instead of
+  `primary`.
+- The default icon size is **20dp**, up from **18dp**.
+- `labelStyle={{ fontSize }}` no longer changes the icon size. The icon follows
+  `size`; set both if you need them to match.
+- The resting corner is the full pill radius instead of a fixed **20dp**.
+
+#### Card.Actions
+
+`Card.Actions` defaults its buttons to `outlined` for the first child and
+**`filled`** for the rest, where it used to default to `contained`. It also no
+longer forwards `compact` or `uppercase` to them.

docs/6.x/docs/guides/react-navigation.md

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

docs/6.x/docs/guides/ripple-effect.md

@@ -18,7 +18,7 @@ The `rippleColor` prop is available for every pressable component which allows y
 <Button
   rippleColor="#FF000020"
   icon="camera"
-  mode="contained"
+  mode="filled"
   onPress={() => console.log('Pressed')}>
   Press me
 </Button>

docs/src/components/BannerExample.tsx

@@ -97,10 +97,10 @@ const BannerExample = () => {
           <Button loading onPress={() => {}}>
             Loading
           </Button>
-          <Button mode="contained-tonal" icon="camera" onPress={() => {}}>
+          <Button mode="tonal" icon="camera" onPress={() => {}}>
             Icon
           </Button>
-          <Button icon="camera" mode="contained" onPress={() => {}}>
+          <Button icon="camera" mode="filled" onPress={() => {}}>
             Press me
           </Button>
           <FAB icon="plus" size="default" onPress={() => {}} />

docs/src/data/screenshots.ts

@@ -22,11 +22,11 @@ export const screenshots = {
   BottomNavigation: 'screenshots/bottom-navigation.gif',
   'BottomNavigation.Bar': 'screenshots/bottom-navigation-tabs.jpg',
   Button: {
-    text: 'screenshots/button-1.png',
-    outlined: 'screenshots/button-2.png',
-    contained: 'screenshots/button-3.png',
+    filled: 'screenshots/button-3.png',
+    tonal: 'screenshots/button-5.png',
     elevated: 'screenshots/button-4.png',
-    'contained-tonal': 'screenshots/button-5.png',
+    outlined: 'screenshots/button-2.png',
+    text: 'screenshots/button-1.png',
   },
   Card: {
     elevated: 'screenshots/card-1.png',

docs/src/data/themeColors.ts

@@ -46,46 +46,82 @@ export const themeColors = {
     },
   },
   Button: {
-    active: {
+    default: {
+      filled: {
+        backgroundColor: 'theme.colors.primary',
+        textColor: 'theme.colors.onPrimary',
+      },
+      tonal: {
+        backgroundColor: 'theme.colors.secondaryContainer',
+        textColor: 'theme.colors.onSecondaryContainer',
+      },
       elevated: {
-        backgroundColor: 'theme.colors.elevation.level1',
+        backgroundColor: 'theme.colors.surfaceContainerLow',
         textColor: 'theme.colors.primary',
       },
-      contained: {
+      outlined: {
+        textColor: 'theme.colors.onSurfaceVariant',
+        borderColor: 'theme.colors.outlineVariant',
+      },
+      text: {
+        textColor: 'theme.colors.primary',
+      },
+    },
+    selected: {
+      filled: {
         backgroundColor: 'theme.colors.primary',
         textColor: 'theme.colors.onPrimary',
       },
-      'contained-tonal': {
+      tonal: {
+        backgroundColor: 'theme.colors.secondary',
+        textColor: 'theme.colors.onSecondary',
+      },
+      elevated: {
+        backgroundColor: 'theme.colors.primary',
+        textColor: 'theme.colors.onPrimary',
+      },
+      outlined: {
+        backgroundColor: 'theme.colors.inverseSurface',
+        textColor: 'theme.colors.inverseOnSurface',
+      },
+    },
+    unselected: {
+      filled: {
+        backgroundColor: 'theme.colors.surfaceContainer',
+        textColor: 'theme.colors.onSurfaceVariant',
+      },
+      tonal: {
         backgroundColor: 'theme.colors.secondaryContainer',
         textColor: 'theme.colors.onSecondaryContainer',
       },
-      outlined: {
+      elevated: {
+        backgroundColor: 'theme.colors.surfaceContainerLow',
         textColor: 'theme.colors.primary',
-        borderColor: 'theme.colors.outline',
       },
-      text: {
-        textColor: 'theme.colors.primary',
+      outlined: {
+        textColor: 'theme.colors.onSurfaceVariant',
+        borderColor: 'theme.colors.outlineVariant',
       },
     },
     disabled: {
-      elevated: {
-        backgroundColor: 'theme.colors.surfaceDisabled',
-        textColor: 'theme.colors.onSurfaceDisabled',
+      filled: {
+        backgroundColor: 'theme.colors.onSurface',
+        textColor: 'theme.colors.onSurface',
       },
-      contained: {
-        backgroundColor: 'theme.colors.surfaceDisabled',
-        textColor: 'theme.colors.onSurfaceDisabled',
+      tonal: {
+        backgroundColor: 'theme.colors.onSurface',
+        textColor: 'theme.colors.onSurface',
       },
-      'contained-tonal': {
-        backgroundColor: 'theme.colors.surfaceDisabled',
-        textColor: 'theme.colors.onSurfaceDisabled',
+      elevated: {
+        backgroundColor: 'theme.colors.onSurface',
+        textColor: 'theme.colors.onSurface',
       },
       outlined: {
-        textColor: 'theme.colors.onSurfaceDisabled',
-        borderColor: 'theme.colors.surfaceDisabled',
+        textColor: 'theme.colors.onSurface',
+        borderColor: 'theme.colors.outlineVariant',
       },
       text: {
-        textColor: 'theme.colors.onSurfaceDisabled',
+        textColor: 'theme.colors.onSurface',
       },
     },
   },