KBD

The KBD (Keyboard) component can be used to indicate a textual user input from the keyboard inside other elements such as in text, tables, cards, and more.

Default KBD

Here’s a list of KBD components that you can use inside any other element.

Shift Ctrl Tab Caps Lock Esc Spacebar Enter

KBD inside text

Use this example by nesting an inline KBD component inside a paragraph.

Please press Ctrl + Shift + R to re-render an MDN page.

KBD inside table

The KBD component can also be used inside table components to denote what type of key can be pressed for certain descriptions.

Key	Description
`Shift` or `Tab`	Navigate to interactive elements
`Enter` or `Space bar`	Ensure elements with ARIA role="button" can be activated with both key commands.
`Arrow key up` `Arrow key down` or `Arrow key left` `Arrow key right`	Choose and activate previous/next tab.

Arrow keys

Use this example to show arrow keys inside the KBD styled element.

Arrow key up Arrow key down Arrow key left Arrow key right

Letter keys

Use this example if you need to show a key from the latin alphabet

Q W E R T Y U I O P A S D F G H J K L Z X C V B N M

Number keys

Use this example to show a key inside a KBD component from the english numeral system.

1 2 3 4 5 6 7 8 9 0

Function keys

This example can be used to denote function keys inside the KBD component.

F1 F2 F3 F4 F5 F6 F7 F8 F9 F10 F11 F12