[thetaPC]

Issue number: resolves internal

---

What is the current behavior?

The button migration (#31628) changes how buttons render, but its reference snapshots haven't been updated.

What is the new behavior?

Only reference snapshots, regenerated on top of #31628 and kept here so the migration diff stays readable. The intended changes:

• iOS buttons are shorter at every size
• Icon-only buttons are squares as tall as a text button of the same size
• ionic outline buttons have a darker label and a page-colored background
• ionic toolbar buttons are 40px tall
• ionic disabled buttons are fainter, matching the design
• The spinner in large ionic buttons is bigger
• Pressed ionic buttons show the ripple in ios mode too, as they already did in md mode

Any other difference is a regression. The descriptions of #31628 and its breaking changes are in that PR.

Does this introduce a breaking change?

• Yes
• No

Other information

ionic's dark snapshots show a white background on outline buttons because the test pages pin --ion-background-color to white. In an app, it follows the page.

Toggle's ionic snapshots also catch up on #31457, which changed the track's gray without regenerating them.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
ionic-framework	Ready	Preview	Oct 29, 2026 5:59pm UTC

[thetaPC]

The migration moved md's toolbar button styling from ion-buttons to IonToolbar.IonButton tokens, since those colors come from the toolbar. Before, an ion-buttons outside a toolbar picked them up anyway, which made these buttons dark. Expect md solid buttons in an ion-buttons without a toolbar to match the standalone buttons above. Buttons inside a toolbar render the same as before.

[ShaneK]

Makes sense to me. Could we add this to BREAKING.md too? Anyone using ion-buttons outside a toolbar in md will see those buttons go from dark to primary, and I didn't see it listed there.

[thetaPC]

The migration moved md's toolbar button styling from ion-buttons to IonToolbar.IonButton tokens, since those colors come from the toolbar. Before, an ion-buttons outside a toolbar picked them up anyway, which made these buttons dark. Expect md buttons in an ion-buttons without a toolbar to look like standalone buttons. Buttons inside a toolbar render the same as before.

[thetaPC]

The migration moved md's toolbar button styling from ion-buttons to IonToolbar.IonButton tokens, since those colors come from the toolbar. Before, an ion-buttons outside a toolbar picked them up anyway, which made this icon dark. Expect md buttons in an ion-buttons without a toolbar to look like standalone buttons. Buttons inside a toolbar render the same as before.

[thetaPC]

The migration moved md's toolbar button styling from ion-buttons to IonToolbar.IonButton tokens, since those colors come from the toolbar. Before, an ion-buttons outside a toolbar picked them up anyway, which made this button dark. Expect md buttons in an ion-buttons without a toolbar to look like standalone buttons. Buttons inside a toolbar render the same as before.

[thetaPC]

Icon-only buttons in a select's start and end slots now follow the button's shape instead of being forced into circles, so ios shows its default soft shape. Input and textarea slots behave the same. Set shape="round" to keep them circular, as listed in #31628's breaking changes.

[thetaPC]

Icon-only buttons in a textarea's start and end slots now follow the button's shape instead of being forced into circles, so ios shows its default soft shape. Input and select slots behave the same. Set shape="round" to keep them circular, as listed in #31628's breaking changes.

[thetaPC]

The track's gray changed in #31457, but the difference is too small to fail the screenshot comparison, so its snapshots were never regenerated. This page fails here because the 40px ionic toolbar buttons make the header shorter, and regenerating it also picks up the new gray. Other toggle snapshots still show the old gray and will update the next time something else changes them.

[thetaPC]

Known gap: pressed outline buttons in ios toolbars lose their fill, so the black star and label sit on the dark toolbar. The migration ported --background-activated: transparent, a next rule that never took effect, as a token that does. #31645 removes it, and the button fills again there.

[thetaPC]

Known gap: pressed outline buttons in ios toolbars lose their fill, so the white star and label sit on the light toolbar. The migration ported --background-activated: transparent, a next rule that never took effect, as a token that does. #31645 removes it, and the button fills again there.

[ShaneK]

Looks really good, and your notes on the snapshots made this a lot easier to go through! Just a few things, mainly the password toggle size and the custom toolbar focus tint, and these will need another pass once the #31628 fixes are in anyway.

[ShaneK]

Makes sense to me. Could we add this to BREAKING.md too? Anyone using ion-buttons outside a toolbar in md will see those buttons go from dark to primary, and I didn't see it listed there.

[ShaneK]

The focused buttons in the custom toolbar rows lost their tint. With --color: hotpink on a black toolbar, the focused clear and outline buttons used to get a hotpink tint (rgb(31, 13, 22)) and now they're rgb(8, 8, 8), which you can't really see on black. I think it's the same thing as the toolbar tint no longer following currentColor in #31628, so the fix belongs there.

[ShaneK]

A few of these look like they changed for reasons outside button, like the ios page background here and the ionic-md sheet modal backdrop, and I think a couple of others too. They look right, but it's hard to tell what came from button. Could those be regenerated on ionic-modular first, or called out in the PR body like you did for the toggle?

[ShaneK]

The ios buttons with an icon and text are still a bit taller than the icon-only ones. Medium is 36px next to 34px and large is 55px next to 50px, while small matches. It's a lot closer than before, but is that expected, or should the icon fit inside the min.height?

[ShaneK]

The default ionic toggle is wider than the large one now, 36x48 next to 32x48, where before it was 29x41 and 32x42. I'm guessing that's the leftover padding marked TODO(FW-6846), but could you double check?