# Help panel: \<kbd\> tag

**URL:** https://discourse.nodered.org/t/help-panel-kbd-tag/14031
**Category:** Feature Requests
**Created:** [5 August 2019 21:02 UTC](https://discourse.nodered.org/t/help-panel-kbd-tag/14031 "2019-08-05T21:02:26Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [5 August 2019 21:02 UTC](https://discourse.nodered.org/t/help-panel-kbd-tag/14031/1 "2019-08-05T21:02:26Z")

</div>

For the first time, I've wanted to use the `<kbd>` tag in the Editor's help panel. And for the first time, I've noticed that the tag is not formatted. In the following example the ⤡, Done and Cancel should all look like buttons (which is how that tag is usually formatted):

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/1/1d837ed1244456820cd84b3b16af31b25cb53167.png)

Here is an example format from the [MDN page for that tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/kbd):

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/a/aca46e579e5eceb0fe6cf6c35ae1e2851f843371.png)

And here is the matching CSS:

```css
kbd {
    font-family: monospace;
    background-color: #eee;
    border-radius: 3px;
    border: 1px solid #b4b4b4;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .2), 0 2px 0 0 rgba(255, 255, 255, .7) inset;
    color: #333;
    display: inline-block;
    font-size: .85em;
    font-weight: 700;
    line-height: 1;
    padding: 2px 4px;
    white-space: nowrap;
}

```

It would be really nice to have that option for the help panel and indeed for other panels such as the markdown ones.

Finally, here is an example from the help panel with the above style applied:

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/9/9f16bec29ac445d7c83ab24dc57dd38eba0ef063.png)

---

<div class="post-metadata">

### Author: ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)
#### Post date: [5 August 2019 21:23 UTC](https://discourse.nodered.org/t/help-panel-kbd-tag/14031/2 "2019-08-05T21:23:25Z")

</div>

We do already have the css class `help-key` for this.

```auto
<span class="help-key">Enter</span>

```

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/2/20bc0712cc058374826ecd8990c9e2b43e3ac9ab.png)

And a quick test shows `<kbd class="help-key">` also works.

So you could add that class to get the formatting you want today, and if someone does a PR to apply the same styles to `kbd` then you won't need the class in the future.

---

<div class="post-metadata">

### Author: ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [5 August 2019 21:26 UTC](https://discourse.nodered.org/t/help-panel-kbd-tag/14031/3 "2019-08-05T21:26:24Z")

</div>

Great, thanks Nick. I'll try to remember to do a PR when I get a chance as I think that it is probably easier to remember the tag than it is a custom class.

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/c/cf88d2a2c39aaa52c994a7da7a07737a74c5088e.png)