Skip to content

feat(button): sync the md theme with Material Design 2 #31636

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
thetaPC wants to merge 3 commits into from
+272 −32
Draft

feat(button): sync the md theme with Material Design 2 #31636

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1706c10
feat(button): sync the md theme with Material Design 2
thetaPC Oct 22, 2026
1f01912
docs(breaking): note the md button's Material Design 2 values
thetaPC Oct 22, 2026
d70ee70
fix(button): scale the md padding with the font size
thetaPC Oct 22, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 24 additions & 5 deletions BREAKING.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down
21 changes: 21 additions & 0 deletions core/api.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand All @@ -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
Expand All @@ -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
Expand All @@ -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
Expand All @@ -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
Expand Down
Loading
Loading