[thetaPC]

Issue number: resolves internal

---

What is the current behavior?

A badge without a vertical position sits against the button's label with no gap. In md and ios, a badge taller than the label also makes the button taller, so buttons of the same size have different heights.

What is the new behavior?

• A badge without a vertical position in a text button has a gap from the label, set by the new IonButton.size.<size>.badge.margin token: 8px, 10px and 12px in ionic, 8px, 8px and 12px in md, and 4px in ios, the same as each theme's icon gap
• A button with a badge drops its vertical padding, so its height comes from min.height and a tall badge no longer grows it. --padding-top and --padding-bottom still override this
• Icon-only buttons and badges with a vertical position don't change

Does this introduce a breaking change?

• Yes
• No

A badge without a vertical position now has a gap between it and the label, and no longer makes the button taller than its min.height. To remove the gap, set IonButton.size.<size>.badge.margin.start for global styles or --ion-button-size-<size>-badge-margin-start for component-specific styles to 0.

Other information

Check	Preview	What to look for
Badges without a position	ios, md, ionic	In the "badge position: none" sections, text buttons have a gap before the badge, and every button in a row is the same height

[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:05pm UTC