diff --git a/BREAKING.md b/BREAKING.md
index 746fcab9488..72c924caa1d 100644
--- a/BREAKING.md
+++ b/BREAKING.md
@@ -57,11 +57,30 @@ The following breaking changes apply to `ion-button`:
 3. The font size of `clear` buttons in the `ios` theme now matches the other fills at each size, instead of `17px` at the default size. To keep the previous size, set `--ion-button-size-medium-font-size` to `17px` on those buttons.
 4. The `ios` button is now `28px`, `34px` and `50px` tall at the small, default and large sizes, with less padding, following the iOS guidelines. To revert to the previous appearance, set `IonButton.size.<size>.min.height` for global styles or `--ion-button-size-<size>-min-height` for component-specific styles to `2.1em`, `3.1em` and `3.1em`, and the padding (`IonButton.size.<size>.padding` or `--ion-button-size-<size>-padding-*`) to `4px 0.9em`, `13px 1em` and `17px 1em`.
 5. Icon-only buttons are now squares as tall as a text button of the same size. In `md`, this makes them a few pixels smaller at the small and default sizes and larger at the large size. To change their size, set the size's `min.height` as described above.
-6. CSS variables have been replaced. <sup>[6](#version-10x-button-replaced-css-variables)</sup>
-7. `--padding-*` CSS variables are no longer part of the documented public API (but remain functional). <sup>[7](#version-10x-button-padding-variables)</sup>
-8. The fill, size, shape and expand classes have been renamed. <sup>[8](#version-10x-button-renamed-classes)</sup>
-9. The `default` size has been deprecated. <sup>[9](#version-10x-button-deprecated-default-size)</sup>
-10. Theme classes (`ion-button.md`, `ion-button.ios`) are no longer supported. <sup>[10](#version-10x-button-theme-classes)</sup>
+6. The `md` button follows Material Design 2 for its spacing, outline, elevation and disabled state. <sup>[6](#version-10x-button-md-material-design-2)</sup>
+7. CSS variables have been replaced. <sup>[7](#version-10x-button-replaced-css-variables)</sup>
+8. `--padding-*` CSS variables are no longer part of the documented public API (but remain functional). <sup>[8](#version-10x-button-padding-variables)</sup>
+9. The fill, size, shape and expand classes have been renamed. <sup>[9](#version-10x-button-renamed-classes)</sup>
+10. The `default` size has been deprecated. <sup>[10](#version-10x-button-deprecated-default-size)</sup>
+11. Theme classes (`ion-button.md`, `ion-button.ios`) are no longer supported. <sup>[11](#version-10x-button-theme-classes)</sup>
+
+<h5 id="version-10x-button-md-material-design-2">Material Design 2 in <code>md</code></h5>
+
+The `md` button now uses the Material Design 2 values below. To keep a previous value, set the token for global styles, or the matching `--ion-button-*` CSS variable for component-specific styles. Replace `<fill>` with `solid`, `outline` or `clear`, and `<size>` with `small`, `medium` or `large`.
+
+| Property | Previous | New | Token |
+|---|---|---|---|
+| Padding at the default size | `1.1em` | `1.1429em` (`16px` at the default size) | `IonButton.size.medium.padding.start` and `.end` |
+| Min width at the default size | none | `64px` | `IonButton.size.medium.min.width` |
+| Letter spacing | `0.06em` | `0.0893em` | `IonButton.letter.spacing` |
+| Icon size | `1.35em` | `1.2857em` (`18px` at the default size) | `IonButton.size.<size>.icon.font.size` |
+| Gap between icon and label | `0.3em` | `0.5714em` (`8px` at the default size) | `IonButton.size.<size>.icon.leading.margin.end` and `.trailing.margin.start` |
+| Outline border | `2px`, the button's color | `1px`, the text color at `12%` | `IonButton.hue.bold.outline.default.border.width` and `.color` (`.semantic.default.border.color` with a `color`) |
+| Solid elevation on hover and focus | the resting elevation | elevation 4 | `IonButton.hue.bold.solid.hover.box.shadow` and `.focus.box.shadow` |
+| Disabled | the whole button at `0.5` opacity | `38%` text color, a `12%` container and no elevation | `IonButton.hue.bold.<fill>.disabled.opacity`, `.color`, `.background` and `.box.shadow` |
+| Pressed ripple | `16%` | `24%` on solid, `12%` on outline and clear | `IonButton.hue.bold.<fill>.rippleEffect.opacity` |
+
+Buttons in toolbars keep their previous colors when disabled and have no elevation on hover or focus.
 
 <h5 id="version-10x-button-replaced-css-variables">Replaced CSS variables</h5>
 
diff --git a/core/api.txt b/core/api.txt
index 4236009ffa4..ea733ed04de 100644
--- a/core/api.txt
+++ b/core/api.txt
@@ -463,10 +463,15 @@ ion-button,css-prop,--ion-button-hue-bold-clear-default-box-shadow
 ion-button,css-prop,--ion-button-hue-bold-clear-default-color
 ion-button,css-prop,--ion-button-hue-bold-clear-default-font-weight
 ion-button,css-prop,--ion-button-hue-bold-clear-disabled-background
+ion-button,css-prop,--ion-button-hue-bold-clear-disabled-border-color
+ion-button,css-prop,--ion-button-hue-bold-clear-disabled-box-shadow
+ion-button,css-prop,--ion-button-hue-bold-clear-disabled-color
 ion-button,css-prop,--ion-button-hue-bold-clear-disabled-opacity
 ion-button,css-prop,--ion-button-hue-bold-clear-focus-background
+ion-button,css-prop,--ion-button-hue-bold-clear-focus-box-shadow
 ion-button,css-prop,--ion-button-hue-bold-clear-focus-color
 ion-button,css-prop,--ion-button-hue-bold-clear-hover-background
+ion-button,css-prop,--ion-button-hue-bold-clear-hover-box-shadow
 ion-button,css-prop,--ion-button-hue-bold-clear-hover-color
 ion-button,css-prop,--ion-button-hue-bold-clear-hover-opacity
 ion-button,css-prop,--ion-button-hue-bold-clear-ripple-effect-color
@@ -477,6 +482,8 @@ ion-button,css-prop,--ion-button-hue-bold-clear-semantic-default-background
 ion-button,css-prop,--ion-button-hue-bold-clear-semantic-default-border-color
 ion-button,css-prop,--ion-button-hue-bold-clear-semantic-default-color
 ion-button,css-prop,--ion-button-hue-bold-clear-semantic-disabled-background
+ion-button,css-prop,--ion-button-hue-bold-clear-semantic-disabled-border-color
+ion-button,css-prop,--ion-button-hue-bold-clear-semantic-disabled-color
 ion-button,css-prop,--ion-button-hue-bold-clear-semantic-focus-background
 ion-button,css-prop,--ion-button-hue-bold-clear-semantic-focus-color
 ion-button,css-prop,--ion-button-hue-bold-clear-semantic-hover-background
@@ -496,10 +503,15 @@ ion-button,css-prop,--ion-button-hue-bold-outline-default-box-shadow
 ion-button,css-prop,--ion-button-hue-bold-outline-default-color
 ion-button,css-prop,--ion-button-hue-bold-outline-default-font-weight
 ion-button,css-prop,--ion-button-hue-bold-outline-disabled-background
+ion-button,css-prop,--ion-button-hue-bold-outline-disabled-border-color
+ion-button,css-prop,--ion-button-hue-bold-outline-disabled-box-shadow
+ion-button,css-prop,--ion-button-hue-bold-outline-disabled-color
 ion-button,css-prop,--ion-button-hue-bold-outline-disabled-opacity
 ion-button,css-prop,--ion-button-hue-bold-outline-focus-background
+ion-button,css-prop,--ion-button-hue-bold-outline-focus-box-shadow
 ion-button,css-prop,--ion-button-hue-bold-outline-focus-color
 ion-button,css-prop,--ion-button-hue-bold-outline-hover-background
+ion-button,css-prop,--ion-button-hue-bold-outline-hover-box-shadow
 ion-button,css-prop,--ion-button-hue-bold-outline-hover-color
 ion-button,css-prop,--ion-button-hue-bold-outline-hover-opacity
 ion-button,css-prop,--ion-button-hue-bold-outline-ripple-effect-color
@@ -510,6 +522,8 @@ ion-button,css-prop,--ion-button-hue-bold-outline-semantic-default-background
 ion-button,css-prop,--ion-button-hue-bold-outline-semantic-default-border-color
 ion-button,css-prop,--ion-button-hue-bold-outline-semantic-default-color
 ion-button,css-prop,--ion-button-hue-bold-outline-semantic-disabled-background
+ion-button,css-prop,--ion-button-hue-bold-outline-semantic-disabled-border-color
+ion-button,css-prop,--ion-button-hue-bold-outline-semantic-disabled-color
 ion-button,css-prop,--ion-button-hue-bold-outline-semantic-focus-background
 ion-button,css-prop,--ion-button-hue-bold-outline-semantic-focus-color
 ion-button,css-prop,--ion-button-hue-bold-outline-semantic-hover-background
@@ -529,10 +543,15 @@ ion-button,css-prop,--ion-button-hue-bold-solid-default-box-shadow
 ion-button,css-prop,--ion-button-hue-bold-solid-default-color
 ion-button,css-prop,--ion-button-hue-bold-solid-default-font-weight
 ion-button,css-prop,--ion-button-hue-bold-solid-disabled-background
+ion-button,css-prop,--ion-button-hue-bold-solid-disabled-border-color
+ion-button,css-prop,--ion-button-hue-bold-solid-disabled-box-shadow
+ion-button,css-prop,--ion-button-hue-bold-solid-disabled-color
 ion-button,css-prop,--ion-button-hue-bold-solid-disabled-opacity
 ion-button,css-prop,--ion-button-hue-bold-solid-focus-background
+ion-button,css-prop,--ion-button-hue-bold-solid-focus-box-shadow
 ion-button,css-prop,--ion-button-hue-bold-solid-focus-color
 ion-button,css-prop,--ion-button-hue-bold-solid-hover-background
+ion-button,css-prop,--ion-button-hue-bold-solid-hover-box-shadow
 ion-button,css-prop,--ion-button-hue-bold-solid-hover-color
 ion-button,css-prop,--ion-button-hue-bold-solid-hover-opacity
 ion-button,css-prop,--ion-button-hue-bold-solid-ripple-effect-color
@@ -543,6 +562,8 @@ ion-button,css-prop,--ion-button-hue-bold-solid-semantic-default-background
 ion-button,css-prop,--ion-button-hue-bold-solid-semantic-default-border-color
 ion-button,css-prop,--ion-button-hue-bold-solid-semantic-default-color
 ion-button,css-prop,--ion-button-hue-bold-solid-semantic-disabled-background
+ion-button,css-prop,--ion-button-hue-bold-solid-semantic-disabled-border-color
+ion-button,css-prop,--ion-button-hue-bold-solid-semantic-disabled-color
 ion-button,css-prop,--ion-button-hue-bold-solid-semantic-focus-background
 ion-button,css-prop,--ion-button-hue-bold-solid-semantic-focus-color
 ion-button,css-prop,--ion-button-hue-bold-solid-semantic-hover-background
diff --git a/core/src/components/button/_button.docs.scss b/core/src/components/button/_button.docs.scss
index 58d9d03d87b..7966ed1947d 100644
--- a/core/src/components/button/_button.docs.scss
+++ b/core/src/components/button/_button.docs.scss
@@ -159,11 +159,13 @@
  * @prop --ion-button-hue-bold-solid-semantic-ripple-effect-opacity: Ripple opacity of the `bold` hue and `solid` fill combination when a semantic color is applied
  * @prop --ion-button-hue-bold-solid-focus-color: Text color of the `bold` hue and `solid` fill combination in the focus state
  * @prop --ion-button-hue-bold-solid-focus-background: Background of the `bold` hue and `solid` fill combination in the focus state
+ * @prop --ion-button-hue-bold-solid-focus-box-shadow: Box shadow of the `bold` hue and `solid` fill combination in the focus state
  * @prop --ion-button-hue-bold-solid-semantic-focus-background: Background of the `bold` hue and `solid` fill combination in the focus state when a semantic color is applied
  * @prop --ion-button-hue-bold-solid-semantic-focus-color: Text color of the `bold` hue and `solid` fill combination in the focus state when a semantic color is applied
  * @prop --ion-button-hue-bold-solid-hover-color: Text color of the `bold` hue and `solid` fill combination in the hover state
  * @prop --ion-button-hue-bold-solid-hover-opacity: Opacity of the whole button of the `bold` hue and `solid` fill combination in the hover state
  * @prop --ion-button-hue-bold-solid-hover-background: Background of the `bold` hue and `solid` fill combination in the hover state
+ * @prop --ion-button-hue-bold-solid-hover-box-shadow: Box shadow of the `bold` hue and `solid` fill combination in the hover state
  * @prop --ion-button-hue-bold-solid-semantic-hover-background: Background of the `bold` hue and `solid` fill combination in the hover state when a semantic color is applied
  * @prop --ion-button-hue-bold-solid-semantic-hover-color: Text color of the `bold` hue and `solid` fill combination in the hover state when a semantic color is applied
  * @prop --ion-button-hue-bold-solid-activated-color: Text color of the `bold` hue and `solid` fill combination in the activated state
@@ -174,7 +176,12 @@
  * @prop --ion-button-hue-bold-solid-semantic-activated-color: Text color of the `bold` hue and `solid` fill combination in the activated state when a semantic color is applied
  * @prop --ion-button-hue-bold-solid-disabled-background: Background of the `bold` hue and `solid` fill combination in the disabled state
  * @prop --ion-button-hue-bold-solid-disabled-opacity: Opacity of the whole button of the `bold` hue and `solid` fill combination in the disabled state
+ * @prop --ion-button-hue-bold-solid-disabled-color: Text color of the `bold` hue and `solid` fill combination in the disabled state
+ * @prop --ion-button-hue-bold-solid-disabled-border-color: Border color of the `bold` hue and `solid` fill combination in the disabled state
+ * @prop --ion-button-hue-bold-solid-disabled-box-shadow: Box shadow of the `bold` hue and `solid` fill combination in the disabled state
  * @prop --ion-button-hue-bold-solid-semantic-disabled-background: Background of the `bold` hue and `solid` fill combination in the disabled state when a semantic color is applied
+ * @prop --ion-button-hue-bold-solid-semantic-disabled-color: Text color of the `bold` hue and `solid` fill combination in the disabled state when a semantic color is applied
+ * @prop --ion-button-hue-bold-solid-semantic-disabled-border-color: Border color of the `bold` hue and `solid` fill combination in the disabled state when a semantic color is applied
  * @prop --ion-button-hue-bold-outline-default-border-width: Border width of the `bold` hue and `outline` fill combination in the default state
  * @prop --ion-button-hue-bold-outline-default-border-style: Border style of the `bold` hue and `outline` fill combination in the default state
  * @prop --ion-button-hue-bold-outline-default-background: Background of the `bold` hue and `outline` fill combination in the default state
@@ -188,11 +195,13 @@
  * @prop --ion-button-hue-bold-outline-semantic-ripple-effect-opacity: Ripple opacity of the `bold` hue and `outline` fill combination when a semantic color is applied
  * @prop --ion-button-hue-bold-outline-focus-color: Text color of the `bold` hue and `outline` fill combination in the focus state
  * @prop --ion-button-hue-bold-outline-focus-background: Background of the `bold` hue and `outline` fill combination in the focus state
+ * @prop --ion-button-hue-bold-outline-focus-box-shadow: Box shadow of the `bold` hue and `outline` fill combination in the focus state
  * @prop --ion-button-hue-bold-outline-semantic-focus-background: Background of the `bold` hue and `outline` fill combination in the focus state when a semantic color is applied
  * @prop --ion-button-hue-bold-outline-semantic-focus-color: Text color of the `bold` hue and `outline` fill combination in the focus state when a semantic color is applied
  * @prop --ion-button-hue-bold-outline-hover-color: Text color of the `bold` hue and `outline` fill combination in the hover state
  * @prop --ion-button-hue-bold-outline-hover-opacity: Opacity of the whole button of the `bold` hue and `outline` fill combination in the hover state
  * @prop --ion-button-hue-bold-outline-hover-background: Background of the `bold` hue and `outline` fill combination in the hover state
+ * @prop --ion-button-hue-bold-outline-hover-box-shadow: Box shadow of the `bold` hue and `outline` fill combination in the hover state
  * @prop --ion-button-hue-bold-outline-semantic-hover-background: Background of the `bold` hue and `outline` fill combination in the hover state when a semantic color is applied
  * @prop --ion-button-hue-bold-outline-semantic-hover-color: Text color of the `bold` hue and `outline` fill combination in the hover state when a semantic color is applied
  * @prop --ion-button-hue-bold-outline-activated-color: Text color of the `bold` hue and `outline` fill combination in the activated state
@@ -203,7 +212,12 @@
  * @prop --ion-button-hue-bold-outline-semantic-activated-color: Text color of the `bold` hue and `outline` fill combination in the activated state when a semantic color is applied
  * @prop --ion-button-hue-bold-outline-disabled-background: Background of the `bold` hue and `outline` fill combination in the disabled state
  * @prop --ion-button-hue-bold-outline-disabled-opacity: Opacity of the whole button of the `bold` hue and `outline` fill combination in the disabled state
+ * @prop --ion-button-hue-bold-outline-disabled-color: Text color of the `bold` hue and `outline` fill combination in the disabled state
+ * @prop --ion-button-hue-bold-outline-disabled-border-color: Border color of the `bold` hue and `outline` fill combination in the disabled state
+ * @prop --ion-button-hue-bold-outline-disabled-box-shadow: Box shadow of the `bold` hue and `outline` fill combination in the disabled state
  * @prop --ion-button-hue-bold-outline-semantic-disabled-background: Background of the `bold` hue and `outline` fill combination in the disabled state when a semantic color is applied
+ * @prop --ion-button-hue-bold-outline-semantic-disabled-color: Text color of the `bold` hue and `outline` fill combination in the disabled state when a semantic color is applied
+ * @prop --ion-button-hue-bold-outline-semantic-disabled-border-color: Border color of the `bold` hue and `outline` fill combination in the disabled state when a semantic color is applied
  * @prop --ion-button-hue-bold-clear-default-border-width: Border width of the `bold` hue and `clear` fill combination in the default state
  * @prop --ion-button-hue-bold-clear-default-border-style: Border style of the `bold` hue and `clear` fill combination in the default state
  * @prop --ion-button-hue-bold-clear-default-border-color: Border color of the `bold` hue and `clear` fill combination in the default state
@@ -218,11 +232,13 @@
  * @prop --ion-button-hue-bold-clear-semantic-ripple-effect-opacity: Ripple opacity of the `bold` hue and `clear` fill combination when a semantic color is applied
  * @prop --ion-button-hue-bold-clear-focus-color: Text color of the `bold` hue and `clear` fill combination in the focus state
  * @prop --ion-button-hue-bold-clear-focus-background: Background of the `bold` hue and `clear` fill combination in the focus state
+ * @prop --ion-button-hue-bold-clear-focus-box-shadow: Box shadow of the `bold` hue and `clear` fill combination in the focus state
  * @prop --ion-button-hue-bold-clear-semantic-focus-background: Background of the `bold` hue and `clear` fill combination in the focus state when a semantic color is applied
  * @prop --ion-button-hue-bold-clear-semantic-focus-color: Text color of the `bold` hue and `clear` fill combination in the focus state when a semantic color is applied
  * @prop --ion-button-hue-bold-clear-hover-color: Text color of the `bold` hue and `clear` fill combination in the hover state
  * @prop --ion-button-hue-bold-clear-hover-opacity: Opacity of the whole button of the `bold` hue and `clear` fill combination in the hover state
  * @prop --ion-button-hue-bold-clear-hover-background: Background of the `bold` hue and `clear` fill combination in the hover state
+ * @prop --ion-button-hue-bold-clear-hover-box-shadow: Box shadow of the `bold` hue and `clear` fill combination in the hover state
  * @prop --ion-button-hue-bold-clear-semantic-hover-background: Background of the `bold` hue and `clear` fill combination in the hover state when a semantic color is applied
  * @prop --ion-button-hue-bold-clear-semantic-hover-color: Text color of the `bold` hue and `clear` fill combination in the hover state when a semantic color is applied
  * @prop --ion-button-hue-bold-clear-activated-color: Text color of the `bold` hue and `clear` fill combination in the activated state
@@ -233,5 +249,10 @@
  * @prop --ion-button-hue-bold-clear-semantic-activated-color: Text color of the `bold` hue and `clear` fill combination in the activated state when a semantic color is applied
  * @prop --ion-button-hue-bold-clear-disabled-background: Background of the `bold` hue and `clear` fill combination in the disabled state
  * @prop --ion-button-hue-bold-clear-disabled-opacity: Opacity of the whole button of the `bold` hue and `clear` fill combination in the disabled state
+ * @prop --ion-button-hue-bold-clear-disabled-color: Text color of the `bold` hue and `clear` fill combination in the disabled state
+ * @prop --ion-button-hue-bold-clear-disabled-border-color: Border color of the `bold` hue and `clear` fill combination in the disabled state
+ * @prop --ion-button-hue-bold-clear-disabled-box-shadow: Box shadow of the `bold` hue and `clear` fill combination in the disabled state
  * @prop --ion-button-hue-bold-clear-semantic-disabled-background: Background of the `bold` hue and `clear` fill combination in the disabled state when a semantic color is applied
+ * @prop --ion-button-hue-bold-clear-semantic-disabled-color: Text color of the `bold` hue and `clear` fill combination in the disabled state when a semantic color is applied
+ * @prop --ion-button-hue-bold-clear-semantic-disabled-border-color: Border color of the `bold` hue and `clear` fill combination in the disabled state when a semantic color is applied
  */
diff --git a/core/src/components/button/button.interface.ts b/core/src/components/button/button.interface.ts
index 1bf3788fffa..e9013f9b2b4 100644
--- a/core/src/components/button/button.interface.ts
+++ b/core/src/components/button/button.interface.ts
@@ -95,11 +95,19 @@ type IonButtonStateDefinition = {
   };
 
   hover?: IonButtonColorDefinition & {
+    box?: {
+      shadow?: string;
+    };
+
     /** The whole button, for fills that fade instead of changing color */
     opacity?: string | number;
   };
 
-  focus?: IonButtonColorDefinition;
+  focus?: IonButtonColorDefinition & {
+    box?: {
+      shadow?: string;
+    };
+  };
 
   activated?: IonButtonColorDefinition & {
     /** The whole button, for fills that fade instead of changing color */
@@ -110,9 +118,20 @@ type IonButtonStateDefinition = {
     };
   };
 
+  /** Unset colors keep the default ones */
   disabled?: {
     background?: string;
 
+    border?: {
+      color?: string;
+    };
+
+    box?: {
+      shadow?: string;
+    };
+
+    color?: string;
+
     /** The whole button */
     opacity?: string | number;
   };
@@ -132,8 +151,15 @@ type IonButtonSemanticDefinition = {
 
   activated?: IonButtonColorDefinition;
 
+  /** Unset colors keep the default ones */
   disabled?: {
     background?: string;
+
+    border?: {
+      color?: string;
+    };
+
+    color?: string;
   };
 };
 
diff --git a/core/src/components/button/button.scss b/core/src/components/button/button.scss
index ff68a70b6b4..dec3952ff6c 100644
--- a/core/src/components/button/button.scss
+++ b/core/src/components/button/button.scss
@@ -330,6 +330,8 @@ $spinner-sizes: xsmall, small, medium, large, xlarge;
 
   :host(.button-hue-bold.button-fill-#{$fill}.ion-focused) .button-native {
     background: var(#{$token}-focus-background);
+
+    box-shadow: var(#{$token}-focus-box-shadow);
   }
 
   :host(.button-hue-bold.button-fill-#{$fill}.ion-color.ion-focused) .button-native {
@@ -354,6 +356,8 @@ $spinner-sizes: xsmall, small, medium, large, xlarge;
 
     :host(.button-hue-bold.button-fill-#{$fill}:hover) .button-native {
       background: var(#{$token}-hover-background);
+
+      box-shadow: var(#{$token}-hover-box-shadow);
     }
 
     :host(.button-hue-bold.button-fill-#{$fill}.ion-color:hover) .button-native {
@@ -405,15 +409,29 @@ $spinner-sizes: xsmall, small, medium, large, xlarge;
   $token: --ion-button-hue-bold-#{$fill};
 
   :host(.button-hue-bold.button-fill-#{$fill}.button-disabled) {
+    // Keeps the default color when the theme doesn't set one
+    color: var(#{$token}-disabled-color, var(#{$token}-default-color));
+
     opacity: var(#{$token}-disabled-opacity);
   }
 
   :host(.button-hue-bold.button-fill-#{$fill}.button-disabled) .button-native {
+    // Keeps the default border color when the theme doesn't set one
+    border-color: var(#{$token}-disabled-border-color, var(#{$token}-default-border-color));
+
     background: var(#{$token}-disabled-background);
+
+    box-shadow: var(#{$token}-disabled-box-shadow);
   }
 
   :host(.button-hue-bold.button-fill-#{$fill}.ion-color.button-disabled) .button-native {
+    // Keeps the default border color when the theme doesn't set one
+    border-color: var(#{$token}-semantic-disabled-border-color, var(#{$token}-semantic-default-border-color));
+
     background: var(#{$token}-semantic-disabled-background);
+
+    // Keeps the default color when the theme doesn't set one
+    color: var(#{$token}-semantic-disabled-color, var(#{$token}-semantic-default-color));
   }
 }
 
diff --git a/core/src/themes/md/default.tokens.ts b/core/src/themes/md/default.tokens.ts
index 915a056dcbb..2ce45c6107e 100644
--- a/core/src/themes/md/default.tokens.ts
+++ b/core/src/themes/md/default.tokens.ts
@@ -327,7 +327,7 @@ export const defaultTheme: DefaultTheme = {
       },
 
       letter: {
-        spacing: '0.06em',
+        spacing: '0.0893em',
       },
 
       text: {
@@ -361,11 +361,21 @@ export const defaultTheme: DefaultTheme = {
             focus: {
               background: overlay(ionColor('primary', 'base'), ionColor('primary', 'contrast', { alpha: 0.24 })),
               color: ionColor('primary', 'contrast'),
+
+              box: {
+                shadow:
+                  '0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12)',
+              },
             },
 
             hover: {
               background: overlay(ionColor('primary', 'base'), ionColor('primary', 'contrast', { alpha: 0.08 })),
               color: ionColor('primary', 'contrast'),
+
+              box: {
+                shadow:
+                  '0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12)',
+              },
             },
 
             // The ripple is the pressed feedback
@@ -380,9 +390,17 @@ export const defaultTheme: DefaultTheme = {
             },
 
             disabled: {
-              background: ionColor('primary', 'base'),
+              background: rgba('var(--ion-text-color-rgb, 0, 0, 0)', 0.12),
+
+              box: {
+                shadow: 'none',
+              },
+
+              color: rgba('var(--ion-text-color-rgb, 0, 0, 0)', 0.38),
+            },
 
-              opacity: '0.5',
+            rippleEffect: {
+              opacity: '0.24',
             },
 
             // Any of the semantic colors like primary, secondary, etc.
@@ -408,7 +426,12 @@ export const defaultTheme: DefaultTheme = {
               },
 
               disabled: {
-                background: currentColor('base'),
+                background: rgba('var(--ion-text-color-rgb, 0, 0, 0)', 0.12),
+                color: rgba('var(--ion-text-color-rgb, 0, 0, 0)', 0.38),
+              },
+
+              rippleEffect: {
+                opacity: '0.24',
               },
             },
           },
@@ -425,9 +448,9 @@ export const defaultTheme: DefaultTheme = {
               color: ionColor('primary', 'base'),
 
               border: {
-                color: ionColor('primary', 'base'),
+                color: rgba('var(--ion-text-color-rgb, 0, 0, 0)', 0.12),
                 style: 'solid',
-                width: 'var(--ion-border-width-xxs)',
+                width: 'var(--ion-border-width-xxxs)',
               },
 
               font: {
@@ -454,7 +477,15 @@ export const defaultTheme: DefaultTheme = {
             disabled: {
               background: 'transparent',
 
-              opacity: '0.5',
+              border: {
+                color: rgba('var(--ion-text-color-rgb, 0, 0, 0)', 0.12),
+              },
+
+              color: rgba('var(--ion-text-color-rgb, 0, 0, 0)', 0.38),
+            },
+
+            rippleEffect: {
+              opacity: '0.12',
             },
 
             semantic: {
@@ -463,7 +494,7 @@ export const defaultTheme: DefaultTheme = {
                 color: currentColor('base'),
 
                 border: {
-                  color: currentColor('base'),
+                  color: rgba('var(--ion-text-color-rgb, 0, 0, 0)', 0.12),
                 },
               },
 
@@ -484,6 +515,16 @@ export const defaultTheme: DefaultTheme = {
 
               disabled: {
                 background: 'transparent',
+
+                border: {
+                  color: rgba('var(--ion-text-color-rgb, 0, 0, 0)', 0.12),
+                },
+
+                color: rgba('var(--ion-text-color-rgb, 0, 0, 0)', 0.38),
+              },
+
+              rippleEffect: {
+                opacity: '0.12',
               },
             },
           },
@@ -523,7 +564,11 @@ export const defaultTheme: DefaultTheme = {
             disabled: {
               background: 'transparent',
 
-              opacity: '0.5',
+              color: rgba('var(--ion-text-color-rgb, 0, 0, 0)', 0.38),
+            },
+
+            rippleEffect: {
+              opacity: '0.12',
             },
 
             semantic: {
@@ -549,6 +594,12 @@ export const defaultTheme: DefaultTheme = {
 
               disabled: {
                 background: 'transparent',
+
+                color: rgba('var(--ion-text-color-rgb, 0, 0, 0)', 0.38),
+              },
+
+              rippleEffect: {
+                opacity: '0.12',
               },
             },
           },
@@ -575,24 +626,25 @@ export const defaultTheme: DefaultTheme = {
 
           icon: {
             font: {
-              size: '1.35em',
+              size: '1.2857em',
             },
 
+            // The negative margin moves the icon closer to the edge than a label would be
             leading: {
               margin: {
                 top: '0',
-                end: '0.3em',
+                end: '0.5714em',
                 bottom: '0',
-                start: '-0.3em',
+                start: '-0.2857em',
               },
             },
 
             trailing: {
               margin: {
                 top: '0',
-                end: '-0.2em',
+                end: '-0.2857em',
                 bottom: '0',
-                start: '0.3em',
+                start: '0.5714em',
               },
             },
           },
@@ -617,13 +669,14 @@ export const defaultTheme: DefaultTheme = {
         medium: {
           min: {
             height: 'var(--ion-scaling-900)',
+            width: 'var(--ion-scaling-xxxxl)',
           },
 
           padding: {
             top: 'var(--ion-spacing-sm)',
-            end: '1.1em',
+            end: '1.1429em',
             bottom: 'var(--ion-spacing-sm)',
-            start: '1.1em',
+            start: '1.1429em',
           },
 
           font: {
@@ -632,24 +685,25 @@ export const defaultTheme: DefaultTheme = {
 
           icon: {
             font: {
-              size: '1.35em',
+              size: '1.2857em',
             },
 
+            // The negative margin moves the icon closer to the edge than a label would be
             leading: {
               margin: {
                 top: '0',
-                end: '0.3em',
+                end: '0.5714em',
                 bottom: '0',
-                start: '-0.3em',
+                start: '-0.2857em',
               },
             },
 
             trailing: {
               margin: {
                 top: '0',
-                end: '-0.2em',
+                end: '-0.2857em',
                 bottom: '0',
-                start: '0.3em',
+                start: '0.5714em',
               },
             },
           },
@@ -692,24 +746,25 @@ export const defaultTheme: DefaultTheme = {
 
           icon: {
             font: {
-              size: '1.35em',
+              size: '1.2857em',
             },
 
+            // The negative margin moves the icon closer to the edge than a label would be
             leading: {
               margin: {
                 top: '0',
-                end: '0.3em',
+                end: '0.5714em',
                 bottom: '0',
-                start: '-0.3em',
+                start: '-0.2857em',
               },
             },
 
             trailing: {
               margin: {
                 top: '0',
-                end: '-0.2em',
+                end: '-0.2857em',
                 bottom: '0',
-                start: '0.3em',
+                start: '0.5714em',
               },
             },
           },
@@ -794,6 +849,18 @@ export const defaultTheme: DefaultTheme = {
                 },
               },
 
+              focus: {
+                box: {
+                  shadow: 'none',
+                },
+              },
+
+              hover: {
+                box: {
+                  shadow: 'none',
+                },
+              },
+
               activated: {
                 box: {
                   shadow: 'none',
@@ -841,6 +908,26 @@ export const defaultTheme: DefaultTheme = {
               activated: {
                 color: `var(--ion-toolbar-background, ${ionColor('primary', 'contrast')})`,
               },
+
+              // In a toolbar, a disabled button keeps its colors and fades
+              disabled: {
+                background: 'var(--ion-button-hue-bold-solid-default-background)',
+
+                box: {
+                  shadow: 'var(--ion-button-hue-bold-solid-default-box-shadow)',
+                },
+
+                color: 'var(--ion-button-hue-bold-solid-default-color)',
+
+                opacity: '0.5',
+              },
+
+              semantic: {
+                disabled: {
+                  background: 'var(--ion-button-hue-bold-solid-semantic-default-background)',
+                  color: 'var(--ion-button-hue-bold-solid-semantic-default-color)',
+                },
+              },
             },
 
             outline: {
@@ -859,6 +946,31 @@ export const defaultTheme: DefaultTheme = {
               hover: {
                 color: `var(--ion-toolbar-color, ${ionColor('primary', 'base')})`,
               },
+
+              // In a toolbar, a disabled button keeps its colors and fades
+              disabled: {
+                background: 'var(--ion-button-hue-bold-outline-default-background)',
+
+                border: {
+                  color: 'var(--ion-button-hue-bold-outline-default-border-color)',
+                },
+
+                color: 'var(--ion-button-hue-bold-outline-default-color)',
+
+                opacity: '0.5',
+              },
+
+              semantic: {
+                disabled: {
+                  background: 'var(--ion-button-hue-bold-outline-semantic-default-background)',
+
+                  border: {
+                    color: 'var(--ion-button-hue-bold-outline-semantic-default-border-color)',
+                  },
+
+                  color: 'var(--ion-button-hue-bold-outline-semantic-default-color)',
+                },
+              },
             },
 
             clear: {
@@ -877,6 +989,21 @@ export const defaultTheme: DefaultTheme = {
               activated: {
                 color: `var(--ion-toolbar-color, ${ionColor('primary', 'foreground')})`,
               },
+
+              // In a toolbar, a disabled button keeps its colors and fades
+              disabled: {
+                background: 'var(--ion-button-hue-bold-clear-default-background)',
+                color: 'var(--ion-button-hue-bold-clear-default-color)',
+
+                opacity: '0.5',
+              },
+
+              semantic: {
+                disabled: {
+                  background: 'var(--ion-button-hue-bold-clear-semantic-default-background)',
+                  color: 'var(--ion-button-hue-bold-clear-semantic-default-color)',
+                },
+              },
             },
           },
         },
@@ -921,6 +1048,10 @@ export const defaultTheme: DefaultTheme = {
                     'rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.24)'
                   ),
                   color: 'var(--ion-toolbar-background, var(--ion-background-color, #fff))',
+
+                  box: {
+                    shadow: 'none',
+                  },
                 },
 
                 hover: {
@@ -929,6 +1060,10 @@ export const defaultTheme: DefaultTheme = {
                     'rgba(var(--ion-background-color-rgb, 255, 255, 255), 0.08)'
                   ),
                   color: 'var(--ion-toolbar-background, var(--ion-background-color, #fff))',
+
+                  box: {
+                    shadow: 'none',
+                  },
                 },
 
                 activated: {