Kbd ​

A key. It looks like a key cap: a face lit from above, standing on a dark lip.

<p>Press <OKbd>Esc</OKbd> to close, <OKbd>⌘</OKbd> <OKbd>K</OKbd> to search.</p>

<OKbd variant="cap">Q</OKbd>
<OKbd variant="cap">W</OKbd>
<OKbd variant="cap">E</OKbd>
<OKbd variant="cap">Shift</OKbd>

• key, the default — a small cap inside a sentence. It is sized by the text around it.
• cap — a large cap on its own, in display type: a list of bindings, a tutorial.
• outline — a flat key for inside a control, where a cap has no room. It takes the colour of the text around it.

Lights up when pressed ​

Give a key its physical code and it lights up for as long as that key is held. Try Q, W, E or Space right here:

<OKbd variant="cap" code="KeyQ">Q</OKbd>
<OKbd variant="cap" code="KeyW">W</OKbd>
<OKbd variant="cap" code="KeyE">E</OKbd>
<OKbd variant="cap" code="Space">Space</OKbd>

The cap does not sink or move: the library answers with light. The code is the key's position on the keyboard (KeyboardEvent.code), as for a hotkey, so it works on any layout. Without a code, a key is just a picture of a key.

This makes a hint under a screen confirm itself: the user presses the key and sees it was the right one.

In a control ​

<OKbd variant="outline">M</OKbd>

You rarely need it yourself: a button and a toggle draw the key of their own hotkey.

Props ​