# Button text forced to uppercase

**URL:** <https://discourse.nodered.org/t/button-text-forced-to-uppercase/20251>\
**Category:** Dashboard\
**Created:** [13 January 2020 08:58 UTC](https://discourse.nodered.org/t/button-text-forced-to-uppercase/20251 "2020-01-13T08:58:54Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [13 January 2020 08:58 UTC](https://discourse.nodered.org/t/button-text-forced-to-uppercase/20251/1 "2020-01-13T08:58:54Z")

</div>

For the first time I am using a dashboard button and I notice that the text on the button is always in uppercase, whatever I put in the button configuration. Is that expected?

Node-RED version: v1.0.2  
Node.js version: v10.18.1  
Dashboard version 2.17.1  
Running on Ubuntu.

---

<div class="post-metadata">

**Author:** ![Christian-Me](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/christian-me/32/10774_2.png) [@Christian-Me](https://discourse.nodered.org/u/Christian-Me)\
**Post date:** [13 January 2020 09:11 UTC](https://discourse.nodered.org/t/button-text-forced-to-uppercase/20251/2 "2020-01-13T09:11:41Z")

</div>

This intentional and based on the material design design guidelines:

> **[Buttons](https://material.io/components/buttons/#)**
>
> Buttons allow users to take actions, and make choices, with a single tap.

---

<div class="post-metadata">

**Author:** ![edje11](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/edje11/32/572_2.png) [@edje11](https://discourse.nodered.org/u/edje11)\
**Post date:** [13 January 2020 19:36 UTC](https://discourse.nodered.org/t/button-text-forced-to-uppercase/20251/3 "2020-01-13T19:36:29Z")

</div>

You can change the behaviour by adding` text-transform: capitalize;` to the button style.

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [13 January 2020 20:49 UTC](https://discourse.nodered.org/t/button-text-forced-to-uppercase/20251/4 "2020-01-13T20:49:04Z")

</div>

> [@edje11](#):
>
> text-transform: capitalize;

That isn't really what I want either, I just want the text displayed as entered. Or do you mean that if I force `text-transform: none` then it will leave them alone?

---

<div class="post-metadata">

**Author:** ![edje11](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/edje11/32/572_2.png) [@edje11](https://discourse.nodered.org/u/edje11)\
**Post date:** [14 January 2020 13:52 UTC](https://discourse.nodered.org/t/button-text-forced-to-uppercase/20251/5 "2020-01-14T13:52:49Z")

</div>

> [@Colin](#):
>
> text-transform:

Indeed, if you use `text-transform: none;` then it will will stay as it was.

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [14 January 2020 14:46 UTC](https://discourse.nodered.org/t/button-text-forced-to-uppercase/20251/6 "2020-01-14T14:46:42Z")

</div>

> [@edje11](#):
>
> it will will stay as it was.

OK, thanks.

---

<div class="post-metadata">

**Author:** ![markost](https://avatars.discourse-cdn.com/v4/letter/m/3d9bf3/32.png) [@markost](https://discourse.nodered.org/u/markost)\
**Post date:** [14 January 2020 16:31 UTC](https://discourse.nodered.org/t/button-text-forced-to-uppercase/20251/7 "2020-01-14T16:31:21Z")

</div>

Hi,  
where to add `text-transform: none;`?

To ui\_button.html?

---

<div class="post-metadata">

**Author:** ![hugobox](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hugobox/32/2948_2.png) [@hugobox](https://discourse.nodered.org/u/hugobox)\
**Post date:** [14 January 2020 21:18 UTC](https://discourse.nodered.org/t/button-text-forced-to-uppercase/20251/8 "2020-01-14T21:18:13Z")

</div>

you can add the following to a ui\_template node set with template style "Added to site head section":

```auto
<style>
button{
    text-transform: none !important;
}
</style>

```