# New Topic button hidden text

**URL:** https://meta.discourse.org/t/new-topic-button-hidden-text/364902
**Category:** Development
**Created:** [May 5, 2025, 8:48pm UTC](https://meta.discourse.org/t/new-topic-button-hidden-text/364902 "2025-05-05T20:48:07Z")
**Posts on this page:** 2
**Page:** 1

<div class="post-metadata">

### Author: ![Juan\_Manuel\_Barreto](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/juan_manuel_barreto/32/499557_2.png) [@Juan\_Manuel\_Barreto](https://meta.discourse.org/u/Juan_Manuel_Barreto)
#### Post date: [May 5, 2025, 8:48pm UTC](https://meta.discourse.org/t/new-topic-button-hidden-text/364902/1 "2025-05-05T20:48:08Z")

</div>

Hi! I have been trying to make a style change to the New Post button, but I haven’t been able to figure out a way to do this, and wanted to know if someone could help with ideas on how to solve this.

This is the way the New Topic button looks like on the Desktop and Mobile view:

 ![image](https://global.discourse-cdn.com/meta/original/4X/5/5/c/55cefc3be1f7f1d31fd879509736b425c9ac8130.png)

The responsiveness hides the `New Topic` text from the button, I would like to preserve this text on the mobile view too, how could I achieve this?

Additionally, these are the html elements that appear on each view:

ELEMENT IN MOBILE:

```plaintext
<button class="btn no-text btn-icon btn-default" id="create-topic" type="button">
<svg class="fa d-icon d-icon-far-pen-to-square svg-icon svg-string" xmlns="http://www.w3.org/2000/svg"><use href="#far-pen-to-square"></use></svg> <span aria-hidden="true">
          ​
        </span>
    </button>

```

ELEMENT IN DESKTOP

```plaintext
<button class="btn btn-icon-text btn-default" id="create-topic" type="button">
<svg class="fa d-icon d-icon-far-pen-to-square svg-icon svg-string" xmlns="http://www.w3.org/2000/svg"><use href="#far-pen-to-square"></use></svg> <span class="d-button-label">New Post<!----></span>
    </button>

```

Any help will be highly appreciated!

---

<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: [May 7, 2025, 4:07pm UTC](https://meta.discourse.org/t/new-topic-button-hidden-text/364902/3 "2025-05-07T16:07:10Z")

</div>

We didn’t actually have a great way to get this text back on mobile, so I just added one: [DEV: add create-topic-label value transformer by awesomerobot · Pull Request #32621 · discourse/discourse · GitHub](https://github.com/discourse/discourse/pull/32621) — you’ll get this the next time Discourse is updated..

This change will allow you to override our default behavior in an initializer file in a remote theme, or via the admin panel within the admin/customize/themes code editor’s JS tab:

 ![The image shows a webpage development tool focused on editing HTML, with options to modify CSS, edit before and after headers, and include JavaScript. (Captioned by AI)](https://global.discourse-cdn.com/meta/original/4X/c/7/8/c78fa381831cfc4994df34637e95c2ea440c2634.png)

```js
import { apiInitializer } from "discourse/lib/api";

export default apiInitializer((api) => {

  api.registerValueTransformer("create-topic-label", ({ value, context }) => {
    return context.defaultKey;
  });

});

```

👆 this will override our default mobile/desktop switch with the label, so it will appear in both places:

 ![image](https://global.discourse-cdn.com/meta/original/4X/7/8/d/78d94edd203c96b3032f6826af5191a6d13708cd.png)