Skip to content

feat(button): show only the icon and vertical badges in icon-only buttons - #31648

Open
thetaPC wants to merge 31 commits into
FW-6838-badge-spacingfrom
FW-6838-icon-only
Open

thetaPC wants to merge 31 commits into
FW-6838-badge-spacingfrom
FW-6838-icon-only

Conversation

@thetaPC

@thetaPC thetaPC commented Oct 23, 2026 •

Copy link
Copy Markdown
Contributor

Issue number: resolves internal


What is the current behavior?

An icon-only button renders anything else placed in it: text, icons in the start and end slots, and badges without a vertical position. That content breaks the square shape, as raised in the review of #31043.

What is the new behavior?

  • A button with an icon in the icon-only slot shows only that icon and any badge with a vertical position
  • Elements in the start and end slots aren't rendered. Text and other content without a slot are visually hidden, and the button keeps its square size
  • Hidden content still names the button for assistive technology, including text wrapped in an element like <span> or <ion-label>
  • Text buttons don't change

Does this introduce a breaking change?

  • Yes
  • No

A button with an icon in the icon-only slot now shows only that icon and any badge with a vertical position. Text, elements in the start and end slots, and other content are hidden. Text and elements without a slot are only visually hidden, so they still name the button for assistive technology. To show other content, remove the icon-only slot and use the start or end slot for the icon.

Other information

Check Before After What to look for
Badges in icon-only buttons Before After In the "badge position: none" sections, icon-only buttons no longer show the badge. In the top and bottom sections, the badges still show

@thetaPC
thetaPC added this pull request to stack #31629 October 23, 2026 23:14
@vercel

vercel Bot commented Oct 23, 2026 •

Copy link
Copy Markdown

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

Project Deployment Actions Updated
ionic-framework Ready Ready Preview Nov 10, 2026 1:43am UTC

Request Review

@thetaPC
thetaPC marked this pull request as ready for review October 29, 2026 16:02
@thetaPC
thetaPC requested a review from a team as a code owner October 29, 2026 16:03
@thetaPC
thetaPC requested a review from ShaneK October 29, 2026 16:03

@ShaneK ShaneK left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good overall, the icon-only sizes hold up across every size and theme! Just a couple of things, mainly wrapped text no longer naming the button for screen readers.

Comment thread core/src/components/button/button.scss Resolved
Comment thread core/src/components/button/button.scss Resolved

@ShaneK ShaneK left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good to me, thanks for the fixes, just one small nit on a comment!

}

/**
* Text can't be selected, so the default slot passes it a zero font size.

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
* Text can't be selected, so the default slot passes it a zero font size.
* `::slotted()` can't target bare text, so the default slot gives it a zero font size.

Nit: I read "selected" as user selection at first, since the host sets user-select: none, and that makes the font size rule look like a duplicate of the visually-hidden() one. Removing it would bring bare text back though, because ::slotted() only hides elements. Up to you!

This branch was successfully deployed

1 active deployment
Preview — 8a49ad00 Deployed Nov 10, 2026 by vercel[bot]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

package: core @ionic/core package

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants