ds
Components
Kbd

Kbd

Keyboard shortcuts.

Press Ctrl K to search · ← → step through

Code

<span>Press <kbd class="kbd">Ctrl</kbd> <kbd class="kbd">K</kbd> to search</span>
<span class="muted">·</span>
<span><kbd class="kbd">←</kbd> <kbd class="kbd">→</kbd> step through</span>

Shortcut table

`P`	Present
`Ctrl` `/`	Code panel
`Space`	Play the walkthrough

Code

<table class="table compact" style="max-width:26rem">
  <tbody>
    <tr><td><kbd class="kbd">P</kbd></td><td>Present</td></tr>
    <tr><td><kbd class="kbd">Ctrl</kbd> <kbd class="kbd">/</kbd></td><td>Code panel</td></tr>
    <tr><td><kbd class="kbd">Space</kbd></td><td>Play the walkthrough</td></tr>
  </tbody>
</table>

Bare

Code

<button class="mi" style="width:14rem"><span>Save to file</span><kbd class="kbd bare">Ctrl+S</kbd></button>

Inside menus and tool buttons the key is a quiet hint, so it drops the border.

Class	On	What it does
`.kbd`	kbd	A key. Inside .prose, plain kbd gets the same style.
`.bare`	.kbd	No border or fill, for hints in menus and toolbars.