Language selection

Keyboard keys

Work in progress

This page is a work in progress.

Please file an issue or submit a pull request if information or coding is missing, incorrect or out of sync with the main repository (wet-boew/wet-boew).


Use to mimic the keys of a computer keyboard.

Design and coding

Basic use


Use to present keyboard keys.


Press Shift

Press Ctrl

Press Enter

Correct use

Compliance point(s):

  • Use <kbd> to describe a keyboard key that a user is to select in a process
  • Use the exact spelling, spacing and sentence case of the keyboard text (for example, Ctrl)
Incorrect use

Compliance point(s):

  • Do not use this component in a way that conflicts with the preceding compliance point(s)
  • Do not use for menu names, or content text
<p>Press <kbd>Shift</kbd></p>
<p>Press <kbd><abbr title="Control">Ctrl</abbr></kbd></p>
<p>Press <kbd>Enter</kbd></p>

Some of the code and documentation for this page is sourced from Bootstrap (external link)

Date modified: