fix(tab-bar): ui tweaks for ionic theme

[rugoncalves]

Issue number: resolves #ROU-12141 (internal issue)

---

What is the current behavior?

The current UI of the tab-bar and tab-button in the ionic theme is not matching the expected, in edge use cases:

• tab-button:
  • Long label: causes the size of the tab-button to increase and eventually making other tab-buttons, not visible.
  • size: in different scenarios the size of each tab-button could become different.
• tab-bar:
  • Many tab-buttons: would case some of them to become inaccessible.
  • Floating: distance from the bottom, was incorrect.

What is the new behavior?

The changes made allow to fix the issues described above, specifically for ionic theme, containing this way, potential impacts:

• tab-button:
  • min-width: has been defined for the tab-button.
  • property was set to force each tab-button to have the same size.
• tab-bar:
  • allow the ability for the content to overflow on the x axis - a scroll will appear if needed.
  • increased the distance from the bottom, to comply with latest design trends.

Does this introduce a breaking change?

• Yes
• No

Other information

[vercel]

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

Project	Deployment	Preview	Comments	Updated (UTC)
ionic-framework	Ready	Preview	Comment	Nov 7, 2025 1:12pm