Why do buttons with icons only have this text &ZeroWidthSpace;? Curious what purpose it serves since it throws off my btn only icon styling :skull_and_crossbones: [Screenshot 2024-12-06 at 9.59.18 AM]

You can see a description by pmusaraj of why, from this PR : This adds consistent sizing for text inputs, dropdowns, and buttons across the app. This is important because these elements are often used together in forms, and having different calculated heights causes many layout issues. Related co…

Seems like there could be a more robust way to achieve this same effect without the use of ZeroWidthSpace

You may be right! It’s a PR from 2021. There might be a modern way to ensure consistency in 2024+.

yeah we’ve considered this before (and probably will again), but unfortunately something as simple as adding a min-height to all buttons would be more disruptive to existing themes

I think we’re working toward a state where things are more standardized and this could become possible, but line height can vary by font… so anything we do by default could result in inconsistent heights as soon as a theme changes to a different font. The zero width space ensures that even with lin…

Wouldn’t a consistent font across the elements utilize the same line height thus preventing varying font line heights?

No, because buttons without text won’t have their height affected by line-height and buttons with text will, so it’s an inconsistency between buttons with text and buttons without

Could the icon’s height not be tied to the font’s line height? I imagine a @function that takes in the font details/token and applies the line height to the icon’s height.

[image] Laurel: Could the icon’s height not be tied to the font’s line height? This. The CSS lh unit is well-supported in modern browsers, so applying the current line-height to an element is pretty simple now. But of course I don’t know about the complexities of making changes without break…

Buttons "text"

Product Support

king_laurel (Laurel) December 6, 2024, 5:54pm 7

Why min height? Could the buttons have a base padding/font including line height that matches the size of drop downs/inputs?

Topic		Replies	Views
New min-height on .btn Development	1	586	September 20, 2018
Size of reply button is influenced by text size preference UX mobile	10	607	December 23, 2024
Height of profile buttons UX completed	1	586	December 5, 2023
Spacing between icon and text Feature	1	1202	September 7, 2014
Modernizing the Foundation theme Announcements	96	5717	August 6, 2026

Buttons "text"

Related topics