Kbd
A key, written as on the keyboard, to say which one to press.
On this page
Playground
Esc
Background
<kbd class="feitio-kbd">Esc</kbd>When to use
- For shortcuts and keys in text: "press / to search".
When not to use
- For code: inline code.
- As the only way to do something: the shortcut is an extra; the button stays.
Examples
Esc↵Ctrl + K↑ ↓
Keys and combinations
One key per <kbd>; combinations with a plus sign between them.
Show code
<kbd class="feitio-kbd">Ctrl</kbd> + <kbd class="feitio-kbd">K</kbd>Accessibility
- It is a
<kbd>: screen readers know it is a key. - Arrows and symbols: write the name out if it is the only text ("down arrow").
Attributes
| Attribute | Values | What for |
|---|---|---|
class="feitio-kbd" | on the <kbd> | The key, with a slightly thicker bottom edge. |