[thetaPC]

Issue number: resolves internal

---

What is the current behavior?

ios buttons use values carried over from v9 instead of iOS 17: 13px and 20px labels at the small and large sizes, medium weight, larger icons pushed into the padding, a 0.5 fade when disabled, and spinners at their own 28px size, which makes buttons taller.

What is the new behavior?

ios buttons follow iOS 17, from the Apple Design Resources kit and measurements of a native UIButton:

• 15px, 15px and 17px labels at regular weight, with heights and padding kept at the same pixels
• Icons at 1.2em with a 4px gap to the label, at the padding edge
• Disabled buttons use the text color at 25%, with an 8% container on solid and the 25% gray border on outline, instead of fading the whole button
• Spinners match the icon size (18px by default), which a native button's activity indicator measures at with a 15pt label. Other spinner sizes keep their usual ratio to it, so a button no longer grows to fit the default spinner

Pressed outline buttons in ios toolbars fill with the toolbar color again. The migration ported a next rule that never matched (::slotted(*) .button-outline), which left the label white on a transparent background.

Toolbar buttons keep their previous colors when disabled.

Snapshots are in #31646.

Does this introduce a breaking change?

• Yes
• No

The ios button follows iOS 17 for its font, icons, spinners and disabled state. 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. Values in em are relative to the font size, so reverting the font size also needs the previous em values.

Property	Previous	New	Token
Font size	13px, 16px and 20px	15px, 15px and 17px	IonButton.size.<size>.font.size
Font weight of solid and outline	500	400	IonButton.hue.bold.<fill>.default.font.weight
Horizontal padding	0.77em, 0.875em and 1em	0.6667em, 0.9333em and 1.1765em (same pixels at the new font size)	IonButton.size.<size>.padding.start and .end
Min height	2.16em, 2.125em and 2.5em	1.8667em, 2.2667em and 2.9412em (same pixels at the new font size)	IonButton.size.<size>.min.height
Icon size next to a label	1.35em	1.2em	IonButton.size.<size>.icon.font.size
Icon spacing	0.3em into the padding and a 0.3em gap	at the padding edge and a 0.2222em gap (4px at the default size)	IonButton.size.<size>.icon.leading.margin and .trailing.margin
Icon-only icon size	1.308125em, 1.125em and 0.9em	1.1333em, 1.2em and 1.0588em (same pixels at the new font size)	IonButton.size.<size>.iconOnly.icon.font.size
Spinner in a button	the spinner's own size (28px by default)	1.2em by default (18px at the default size), with the other spinner sizes in their usual ratio to it	IonButton.size.<size>.spinner.size.<spinner size>.width and .height
Disabled	the whole button at 0.5 opacity	the text color at 25%, which outline also uses for its border, and on solid, an 8% container	IonButton.hue.bold.<fill>.disabled.opacity, .color, .background and .border.color

Other information

Not matched to iOS 17 on purpose

• Corners stay soft (6px), which feat(button): set default shape to soft for ios and round for md and ionic themes #29404 set from SwiftUI
• Letter spacing stays 0. WebKit already applies SF Pro tracking to the system font
• iOS has no outline button. Outline follows clear, and its border takes the same disabled gray
• The kit doesn't draw hover or pressed states, so those keep their current look

Left for the parents

• Toolbar and navigation bar buttons in the kit use 22pt and 28pt icons, a 32px height cap and a gray disabled color in a plain bar. These belong to the ion-buttons migration
• iOS's 44pt minimum hit area is a follow-up

How to test

Check	Before	After	What to look for
Fonts and sizes	Before	After	Small and default labels are the same size, and labels are regular weight
Icons	Before	After	Icons are smaller and sit at the padding edge with a small gap to the label
Disabled	Before	After	The disabled buttons in the last row are gray instead of faded. The basic and clear pages show the same
Spinners	Before	After	Spinners are icon-sized, and buttons with a spinner are as tall as those without
Pressed toolbar outline	Before	After	In the Outline.activated toolbar, the left buttons are filled blue with white text

[vercel]

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

Project	Deployment	Actions	Updated
ionic-framework	Ready	Preview	Oct 23, 2026 11:21pm UTC