feat(tab-button): support new badge hint features

[joselrio]

Issue number: internal

What is the current behavior?

• tab-button with badge only supports status badges (small circle with specific color), missing cases with text or icon.

What is the new behavior?

• Added css on tab-button to support new badge hint functionalities such text and icon
• Added css on badge to support the existence of a icon inside it
• Added support on ionic theme for different position (top and button)
• Added badge test case for this use case
• There's no figma for md/iOS implementation, so just added for now a best effort on how it looks.

Theme md:

Theme iOS:

Theme ionic:

Notes:

• All the styles added are based on the [vertical] attribute in order to prevent breaking changes and only affect the badge hint with the new features implemented.
• Also top and bottom position under the context of md/iOS themes are not exactly the same as ionic theme due the usage of an overflow:hidden; attribute at the .button-native context. This overflow:hidden; attribute has been overwritten to overflow:visible; for ionic theme.

Does this introduce a breaking change?

• Yes
• No

Other information

Sample

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
ionic-framework	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Mar 21, 2025 5:34pm

[thetaPC]

The code to accomplish this is already set with MD. We don't need to make alterations to badge or add variables. We should follow the consistency of how MD handles badges within tab buttons.

[thetaPC]

No changes were made. Please push your changes.

[thetaPC]

LGTM