# Buttons "text"

**URL:** https://meta.discourse.org/t/buttons-text/340961
**Category:** Support
**Created:** [December 6, 2024, 5:01pm UTC](https://meta.discourse.org/t/buttons-text/340961 "2024-12-06T17:01:38Z")
**Posts on this page:** 11
**Page:** 1

<div class="post-metadata">

### Author: ![king\_laurel](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/king_laurel/32/461779_2.png) [@king\_laurel](https://meta.discourse.org/u/king_laurel)
#### Post date: [December 6, 2024, 5:01pm UTC](https://meta.discourse.org/t/buttons-text/340961/1 "2024-12-06T17:01:38Z")

</div>

Why do buttons with icons only have this text `&ZeroWidthSpace;`?

Curious what purpose it serves since it throws off my btn only icon styling ☠

 ![Screenshot 2024-12-06 at 9.59.18 AM](https://global.discourse-cdn.com/meta/original/4X/9/0/b/90ba0f7b3e9d24d144232c923531ebd223d09251.png)

---

<div class="post-metadata">

### Author: ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [December 6, 2024, 5:26pm UTC](https://meta.discourse.org/t/buttons-text/340961/2 "2024-12-06T17:26:15Z")

</div>

You can see a description by pmusaraj of why, from this [PR](https://github.com/discourse/discourse/pull/14226):

> 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 code:

[https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/components/d-button.gjs#L215-L218](https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/components/d-button.gjs#L215-L218)

---

<div class="post-metadata">

### Author: ![king\_laurel](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/king_laurel/32/461779_2.png) [@king\_laurel](https://meta.discourse.org/u/king_laurel)
#### Post date: [December 6, 2024, 5:27pm UTC](https://meta.discourse.org/t/buttons-text/340961/3 "2024-12-06T17:27:08Z")

</div>

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

---

<div class="post-metadata">

### Author: ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [December 6, 2024, 5:33pm UTC](https://meta.discourse.org/t/buttons-text/340961/4 "2024-12-06T17:33:31Z")

</div>

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

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [December 6, 2024, 5:53pm UTC](https://meta.discourse.org/t/buttons-text/340961/6 "2024-12-06T17:53:30Z")

</div>

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

---

<div class="post-metadata">

### Author: ![king\_laurel](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/king_laurel/32/461779_2.png) [@king\_laurel](https://meta.discourse.org/u/king_laurel)
#### Post date: [December 6, 2024, 5:54pm UTC](https://meta.discourse.org/t/buttons-text/340961/7 "2024-12-06T17:54:32Z")

</div>

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

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [December 6, 2024, 6:02pm UTC](https://meta.discourse.org/t/buttons-text/340961/8 "2024-12-06T18:02:42Z")

</div>

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 line-height and font changes buttons without text have similar behaviors to buttons with text (in other words, the zero width character line height impacts the button height just like buttons with text)

---

<div class="post-metadata">

### Author: ![king\_laurel](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/king_laurel/32/461779_2.png) [@king\_laurel](https://meta.discourse.org/u/king_laurel)
#### Post date: [December 6, 2024, 6:18pm UTC](https://meta.discourse.org/t/buttons-text/340961/9 "2024-12-06T18:18:25Z")

</div>

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

---

<div class="post-metadata">

### Author: ![awesomerobot](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/awesomerobot/32/142900_2.png) [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [December 6, 2024, 11:30pm UTC](https://meta.discourse.org/t/buttons-text/340961/10 "2024-12-06T23:30:29Z")

</div>

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

---

<div class="post-metadata">

### Author: ![king\_laurel](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/king_laurel/32/461779_2.png) [@king\_laurel](https://meta.discourse.org/u/king_laurel)
#### Post date: [December 7, 2024, 4:11am UTC](https://meta.discourse.org/t/buttons-text/340961/11 "2024-12-07T04:11:35Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![\_diondiondion](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/_diondiondion/32/200719_2.png) [@\_diondiondion](https://meta.discourse.org/u/_diondiondion)
#### Post date: [December 13, 2024, 6:12am UTC](https://meta.discourse.org/t/buttons-text/340961/12 "2024-12-13T06:12:27Z")

</div>

> [@king\_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 breaking existing themes.
